Make play button state driven directly off media events

Change-Id: I877b9f6e94f9c043e7c1bc80c7ce611ab6721ff8

diff --git a/index.html b/index.html
index be370bf..98db753 100644 (file)
--- a/index.html
+++ b/index.html
@@ -30,7 +30,7 @@
                        <source id=videoSrc>
                </video>
 
-               <div id="imagePlayer" onClick="nextButtonClick()" class="player"></div>
+               <div id="imagePlayer" class="player"></div>
 
                <div id="audioMediaList" class="mediaList mediaListAudioList">
                   <ul id="audioMediaListItems">

diff --git a/js/imageControls.js b/js/imageControls.js
index 943fd24..59fd473 100644 (file)
--- a/js/imageControls.js
+++ b/js/imageControls.js
@@ -16,7 +16,9 @@ ImageControls = function()
 
 ImageControls.prototype.play = function()
 {
-       this.paused = false;
+    this.paused = false;
+    $("#playButton").toggleClass('playing', true);
+    $("#navigationButtons").hide();
     slideshowInterval = setInterval(function(){
        nextButtonClick();
     }, 3000);
@@ -24,6 +26,8 @@ ImageControls.prototype.play = function()
 
 ImageControls.prototype.pause = function()
 {
-       this.paused = true;
+    this.paused = true;
+    $("#playButton").toggleClass('playing', false);
+    $("#navigationButtons").show();
     clearInterval(slideshowInterval);
 }

diff --git a/js/main.js b/js/main.js
index 7cc1b8d..85a0bdb 100644 (file)
--- a/js/main.js
+++ b/js/main.js
@@ -448,8 +448,6 @@ function showMainMenu()
        currentMenu = "main";
        currentPlayerControls.pause();
 
-       $("#playButton").toggleClass('playing', false);
-
        //If the media list is showing, hide it.  Remove the mediaListAudioList class if it exists so that it will resize properly
        if (currentMediaList.is(":visible"))
                currentMediaList.fadeOut(300);
@@ -554,8 +552,6 @@ function playLoadedMedia()
        if (loadAndPlay)
        {
                currentPlayerControls.play();
-
-               $("#playButton").toggleClass('playing', true);
                loadAndPlay = false;
        }
 }
@@ -567,12 +563,10 @@ function playButtonClick()
        {
                if (currentPlayerControls.paused)
                {
-                       $("#playButton").toggleClass('playing', true);
                        currentPlayerControls.play();
                }
                else
                {
-                       $("#playButton").toggleClass('playing', false);
                        currentPlayerControls.pause();
                }
        }
@@ -586,7 +580,6 @@ function pauseButtonClick()
        if (!currentPlayerControls.paused)
        {
                currentPlayerControls.pause();
-               $("#playButton").toggleClass('playing', false);
        }
 }
 
@@ -606,8 +599,6 @@ function backButtonClick()
                        loadAndPlay = true;
                        audioPlayer.pause();
 
-                       $("#playButton").toggleClass('playing', false);
-
                        $("#audioSrc").attr("src", audioContent[audioIndex].contentURI);
                        updateMediaName(audioContent[audioIndex].artists[0], audioContent[audioIndex].title, audioContent[audioIndex].coverArt);
                        audioPlayer.load();
@@ -623,7 +614,6 @@ function backButtonClick()
                                videoIndex = videoContent.length - 1;
 
                        videoPlayer.pause();
-                       $("#playButton").toggleClass('playing', false);
                        $("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
                        videoPlayer.load();
                }
@@ -665,8 +655,6 @@ function nextButtonClick()
                        loadAndPlay = true;
                        audioPlayer.pause();
 
-                       $("#playButton").toggleClass('playing', false);
-
                        $("#audioSrc").attr("src", audioContent[audioIndex].contentURI);
                        updateMediaName(audioContent[audioIndex].artists[0], audioContent[audioIndex].title, audioContent[audioIndex].coverArt);
                        audioPlayer.load();
@@ -682,7 +670,6 @@ function nextButtonClick()
                                videoIndex = 0;
 
                        videoPlayer.pause();
-                       $("#playButton").toggleClass('playing', false);
                        $("#videoSrc").attr("src", videoContent[videoIndex].contentURI);
                        videoPlayer.load();
                }
@@ -908,11 +895,39 @@ function init()
        });
 
     document.getElementById('videoPlayer').addEventListener("playing", function() {
+        $("#playButton").toggleClass('playing', true);
         $("#navigationButtons").hide();
     }, false);
     document.getElementById('videoPlayer').addEventListener("pause", function() {
+        $("#playButton").toggleClass('playing', false);
+        $("#navigationButtons").show();
+    }, false);
+    document.getElementById('videoPlayer').addEventListener("ended", function() {
+        $("#playButton").toggleClass('playing', false);
         $("#navigationButtons").show();
     }, false);
+    document.getElementById('audioPlayer').addEventListener("playing", function() {
+        $("#playButton").toggleClass('playing', true);
+    }, false);
+    document.getElementById('audioPlayer').addEventListener("pause", function() {
+        $("#playButton").toggleClass('playing', false);
+    }, false);
+    document.getElementById('audioPlayer').addEventListener("ended", function() {
+        $("#playButton").toggleClass('playing', false);
+    }, false);
+    document.getElementById('imagePlayer').addEventListener("click", function() {
+       if (imageControls.paused)
+        {
+            // next picture
+            nextButtonClick();
+        }
+        else
+        {
+            // pause the slideshow and fade in the controls
+            imageControls.pause();
+            $("#navigationButtons").show();
+        }
+    }, false);
 }
 
 $(document).ready(function () {