preloading images

CHANGELOG.md

@@ -8,6 +8,8 @@
   [#](https://git.project-insanity.org/onny/nextcloud-app-radio/commit/b7e711955b90f388a5e340ab582461fd39df8969) @onny
 - Add volume icon
   [#](https://git.project-insanity.org/onny/nextcloud-app-radio/commit/07ce3e5aebd5e5b5bf91e3aae996441ae9268402) @onny
+- Remember volume state
+  [#66](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/66) @onny
 
 ### Fixed
 - Fix styling issue (overflow hidden) player area
@@ -21,6 +23,8 @@
   [#61](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/61) @onny
 - Fix play/pause toggle favicon
   [#59](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/59) @onny
+- Preload images
+  [#59](https://git.project-insanity.org/onny/nextcloud-app-radio/issues/59) @onny
 
 ## 0.6.1 – 2018-08-11
 ### Changed

css/main.css

@@ -31,8 +31,12 @@
 	overflow:hidden;
 }
 
-.play{background: url('../img/play.png') no-repeat;}
-.pause{background: url('../img/pause.png') no-repeat;}
+.play{
+	background: url('../img/play.png') no-repeat;
+}
+.pause{
+	background: url('../img/pause.png') no-repeat;
+}
 
 .icon-stationfav {
 	width: 16px;
@@ -494,3 +498,8 @@ table td {
 	margin-top: 15px;
 	margin-left: 35px;
 }
+
+#preload-01 { background: url('../img/sound_mid.png') no-repeat -9999px -9999px; }
+#preload-02 { background: url('../img/sound_silent.png') no-repeat -9999px -9999px; }
+#preload-03 { background: url('../img/pause.png') no-repeat -9999px -9999px; }
+#preload-04 { background: url('../img/wheel.png') no-repeat -9999px -9999px; }

js/main.js

@@ -66,6 +66,7 @@ $(function(){
   /* Click on a radio station (table entry) and play it */
   $('body').on('click', '.filename', function(e) {
     e.preventDefault();
+    $('#playbutton').attr("class", "buffering");
     var stationid = $(this).parent().attr('data-id');
     var stationname = $(this).parent().find('.nametext').text();
     action_play(stationid);
@@ -403,6 +404,7 @@ $(function(){
     animate: true,
     step: .1,
     slide: function(e, ui) {
+      player.volume = ui.value;
       if (ui.value < 0.2) {
         $("#volumeicon").removeClass();
         $("#volumeicon").attr("class","silent");
@@ -419,7 +421,6 @@ $(function(){
   });
 
   $("#volumeslider").on("slidestop", debounce(function(e, ui) {
-      player.volume = ui.value;
       save_volume_state(ui.value);
     }, 700)
   );

templates/main.php

@@ -65,6 +65,11 @@
                 <tfoot>
                 </tfoot>
             </table>
+
+            <div id="preload-01"></div>
+            <div id="preload-02"></div>
+            <div id="preload-03"></div>
+            <div id="preload-04"></div>            
         </div>
     </div>
     <!-- closing app-content -->