Scrollbar fix, show notification in chrome for OGG

fix #102
owncloud · Oct 5, 2013 · 27c1934 · 27c1934
1 parent aaf3ee8
commit 27c1934
Show file tree

Hide file tree

Showing 7 changed files with 54 additions and 40 deletions.
diff --git a/build/Gruntfile.js b/build/Gruntfile.js
@@ -125,7 +125,7 @@ module.exports = function(grunt) {
 		nggettext_extract: {
 			pot: {
 				files: {
-					'../l10n/templates/music.pot': ['../templates/*.php']
+					'../l10n/templates/music.pot': ['../templates/*.php', '../js/public/app.js']
 				}
 			},
 		},

diff --git a/css/style-playerbar.css b/css/style-playerbar.css
@@ -7,25 +7,14 @@
 	background: #eee;
 	border-bottom: 1px solid #e7e7e7;
 	z-index: 50;
-	-moz-box-shadow: 0 -3px 7px #000;
-	-webkit-box-shadow: 0 -3px 7px #000;
-	box-shadow: 0 -3px 7px #000;
-	/* initial state is hidden */
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
-	filter: alpha(opacity = 0);
-	opacity: 0;
-	/* transistion to fade in*/
-	-webkit-transition: opacity 500ms;
-	-moz-transition: opacity 500ms;
-	-o-transition: opacity 500ms;
-	transition: opacity 500ms;
-
-}
-
-#playerbar.started {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	filter: alpha(opacity = 100);
-	opacity: 1;
+}
+
+#playerbar, #playerbar * {
+	display: none;
+}
+
+#playerbar.started, #playerbar.started * {
+	display: inline;
 }
 
 #playerbar > img.right {
@@ -72,7 +61,7 @@
 }
 
 #sm2-container embed, #sm2-container object,
-#playerbar.started #sm2-container embed, #playerbar.started #sm2-container object {
+#sm2-container.started embed, #sm2-container.started object {
 	position: absolute;
 	left: 259px; /* with sidebar 300px */
 	top: 8px;
@@ -91,8 +80,8 @@
 
 #sm2-container.swf_loaded, #sm2-container.swf_unblocked,
 #playerbar #sm2-container embed, #playerbar #sm2-container object,
-#playerbar.started #sm2-container.swf_loaded embed, #playerbar.started #sm2-container.swf_unblocked embed,
-#playerbar.started #sm2-container.swf_loaded object, #playerbar.started #sm2-container.swf_unblocked object, {
+#sm2-container.started.swf_loaded embed, #sm2-container.started.swf_unblocked embed,
+#sm2-container.started.swf_loaded object, #sm2-container.started.swf_unblocked object, {
 	/* hide container if flash is loaded, unblocked or player isn't started yet */
 	width: 1px;
 	height: 1px;
@@ -151,6 +140,10 @@
 	background-color: #ccc;
 }
 
+#playerbar.started .progress, #playerbar.started .seek-bar, #playerbar.started .play-bar {
+	display: block;
+}
+
 #playerbar .play-bar {
 	width: 0%;
 	background-color: #1d2d44;

diff --git a/css/style.css b/css/style.css
@@ -5,20 +5,23 @@
 }
 /* end stable5 fixes */
 
+#notification a {
+	text-decoration: underline;
+}
+
 #app-content {
 	overflow-y:auto;
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
 
-	/* transistion to move down*/
-	-webkit-transition: padding 500ms;
-	-moz-transition: padding 500ms;
-	-o-transition: padding 500ms;
-	transition: padding 500ms;
+	height: auto;
+	top: 0;
+	bottom: 0;
+	position: absolute;
 }
 
 #app-content.started {
-	padding-top: 50px;
+	top: 65px;
 }
 
 .play {

diff --git a/js/app/controllers/playercontroller.js b/js/app/controllers/playercontroller.js
@@ -21,8 +21,8 @@
 
 
 angular.module('Music').controller('PlayerController',
-	['$scope', '$routeParams', '$rootScope', 'playlistService', 'Audio', 'Artists', 'Restangular',
-	function ($scope, $routeParams, $rootScope, playlistService, Audio, Artists, Restangular) {
+	['$scope', '$routeParams', '$rootScope', 'playlistService', 'Audio', 'Artists', 'Restangular', 'gettext',
+	function ($scope, $routeParams, $rootScope, playlistService, Audio, Artists, Restangular, gettext) {
 
 	$scope.artists = Artists;
 
@@ -61,7 +61,16 @@ angular.module('Music').controller('PlayerController',
 	});
 
 	$scope.getPlayableFileURL = function (track) {
+		var isChrome = (navigator && navigator.userAgent &&
+			navigator.userAgent.indexOf('Chrome') !== -1) ?
+				true : false;
 		for(var mimeType in track.files) {
+			if(mimeType === 'audio/ogg' && isChrome) {
+				// TODO inject this
+				OC.Notification.showHtml(gettext(
+					'Chrome is just able to playback MP3 files - see <a href="https://github.com/owncloud/music/wiki/Frequently-Asked-Questions#why-can-chromechromium-just-playback-mp3-files">wiki</a>'
+				));
+			}
 			if(Audio.canPlayMIME(mimeType)) {
 				return track.files[mimeType];
 			}

diff --git a/js/public/app.js b/js/public/app.js
@@ -145,8 +145,8 @@ angular.module('Music').controller('MainController',
 	};
 }]);
 angular.module('Music').controller('PlayerController',
-	['$scope', '$routeParams', '$rootScope', 'playlistService', 'Audio', 'Artists', 'Restangular',
-	function ($scope, $routeParams, $rootScope, playlistService, Audio, Artists, Restangular) {
+	['$scope', '$routeParams', '$rootScope', 'playlistService', 'Audio', 'Artists', 'Restangular', 'gettext',
+	function ($scope, $routeParams, $rootScope, playlistService, Audio, Artists, Restangular, gettext) {
 
 	$scope.artists = Artists;
 
@@ -185,7 +185,16 @@ angular.module('Music').controller('PlayerController',
 	});
 
 	$scope.getPlayableFileURL = function (track) {
+		var isChrome = (navigator && navigator.userAgent &&
+			navigator.userAgent.indexOf('Chrome') !== -1) ?
+				true : false;
 		for(var mimeType in track.files) {
+			if(mimeType === 'audio/ogg' && isChrome) {
+				// TODO inject this
+				OC.Notification.showHtml(gettext(
+					'Chrome is just able to playback MP3 files - see <a href="https://github.com/owncloud/music/wiki/Frequently-Asked-Questions#why-can-chromechromium-just-playback-mp3-files">wiki</a>'
+				));
+			}
 			if(Audio.canPlayMIME(mimeType)) {
 				return track.files[mimeType];
 			}

diff --git a/templates/main.php b/templates/main.php
@@ -17,6 +17,9 @@
 		<?php print_unescaped($this->inc('part.main')) ?>
 	</script>
 
+	<!-- this will be used to display the flash element to give the user a chance to unblock flash -->
+	<div id="sm2-container" ng-class="{started: started}"></div>
+
 	<div id="playerbar" ng-controller="PlayerController" ng-class="{started: started}">
 		<div id="play-controls">
 			<img  ng-click="prev()"class="control small svg" alt="{{'Previous' | translate }}"
@@ -29,8 +32,6 @@
 				src="<?php p(OCP\image_path('music', 'play-next.svg')) ?>" />
 		</div>
 
-		<!-- this will be used to display the flash element to give the user a chance to unblock flash -->
-		<div id="sm2-container"></div>
 
 		<div ng-show="currentAlbum" class="albumart" cover="{{ currentAlbum.cover }}"
 			albumart="{{ currentAlbum.name }}" title="{{ currentAlbum.name }}" ></div>
@@ -68,4 +69,8 @@
 	</div>-->
 
 	<div id="app-content" ng-view ng-class="{started: started}"></div>
+
+	<div ng-show="artists" class="alphabet-navigation" ng-init="letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']" ng-class="{started: started}" resize>
+		<a scroll-to="{{ letter }}" ng-repeat="letter in letters" ng-class="{available: letterAvailable[letter]}">{{ letter }}</a>
+	</div>
 </div>
diff --git a/templates/part.main.php b/templates/part.main.php
@@ -34,8 +34,3 @@
 	</div>
 </div>
 
-
-<div ng-show="artists" class="alphabet-navigation" ng-init="letters = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']" ng-class="{started: started}" resize>
-	<a scroll-to="{{ letter }}" ng-repeat="letter in letters" ng-class="{available: letterAvailable[letter]}">{{ letter }}</a>
-</div>
-