Add new media options

ext/src/_locales/en/messages.json

@@ -76,6 +76,12 @@
   , "optionsMediaEnabled": {
         "message": "Media casting enabled"
     }
+  , "optionsMediaSyncElement": {
+        "message": "Sync receiver state with media element"
+    }
+  , "optionsMediaStopOnUnload": {
+        "message": "Stop receiver playback on page unload"
+    }
 
   , "optionsLocalMediaCategoryName": {
         "message": "Local media casting"

ext/src/mediaCast.js

@@ -9,6 +9,8 @@ let logMessage;
 let session;
 let currentMedia;
 
+let ignoreMediaEvents = false;
+
 
 const isLocalFile = srcUrl.startsWith("file:");
 
@@ -18,6 +20,13 @@ window.addEventListener("beforeunload", () => {
     browser.runtime.sendMessage({
         subject: "bridge:stopHttpServer"
     });
+
+    if (options.mediaStopOnUnload) {
+        session.stop();
+        /*currentMedia.stop(null
+              , onMediaStopSuccess
+              , onMediaStopError);*/
+    }
 });
 
 function getLocalAddress () {
@@ -38,51 +47,6 @@ function getLocalAddress () {
 }
 
 
-mediaElement.addEventListener("play", () => {
-    currentMedia.play(null
-          , onMediaPlaySuccess
-          , onMediaPlayError);
-});
-
-mediaElement.addEventListener("pause", () => {
-    currentMedia.pause(null
-          , onMediaPauseSuccess
-          , onMediaPauseError);
-});
-
-mediaElement.addEventListener("suspend", () => {
-    /*currentMedia.stop(null
-          , onMediaStopSuccess
-          , onMediaStopError);*/
-});
-
-mediaElement.addEventListener("seeking", () => {
-    const seekRequest = new chrome.cast.media.SeekRequest();
-    seekRequest.currentTime = mediaElement.currentTime;
-
-    currentMedia.seek(seekRequest
-          , onMediaSeekSuccess
-          , onMediaSeekError);
-});
-
-mediaElement.addEventListener("ratechange", () => {
-    currentMedia._sendMediaMessage({
-        type: "SET_PLAYBACK_RATE"
-      , playbackRate: mediaElement.playbackRate
-    });
-});
-
-mediaElement.addEventListener("volumechange", () => {
-    const newVolume = new chrome.cast.Volume(
-            currentMedia.volume
-          , currentMedia.muted);
-    const volumeRequest = new chrome.cast.media.VolumeRequest(newVolume);
-
-    logMessage("Volume change");
-    currentMedia.setVolume(volumeRequest);
-});
-
-
 async function onRequestSessionSuccess (session_) {
     logMessage("onRequestSessionSuccess");
 
@@ -219,49 +183,119 @@ function onLoadMediaSuccess (media) {
     logMessage("onLoadMediaSuccess");
 
     currentMedia = media;
-    currentMedia.addUpdateListener(() => {
-        console.log(currentMedia);
 
-        // PlayerState
+    if (options.mediaSyncElement) {
-        const localPlayerState = mediaElement.paused
+        mediaElement.addEventListener("play", () => {
-            ? chrome.cast.media.PlayerState.PAUSED
+            if (ignoreMediaEvents) {
-            : chrome.cast.media.PlayerState.PLAYING;
+                ignoreMediaEvents = false;
-
+                return;
-        if (localPlayerState !== currentMedia.playerState) {
-            switch (currentMedia.playerState) {
-                case chrome.cast.media.PlayerState.PLAYING:
-                    mediaElement.play();
-                    break;
-
-                case chrome.cast.media.PlayerState.PAUSED:
-                    mediaElement.pause();
-                    break;
             }
-        }
 
-        // RepeatMode
+            currentMedia.play(null
-        const localRepeatMode = mediaElement.loop
+                  , onMediaPlaySuccess
-            ? chrome.cast.media.RepeatMode.SINGLE
+                  , onMediaPlayError);
-            : chrome.cast.media.RepeatMode.OFF;
+        });
 
-        if (localRepeatMode !== currentMedia.repeatMode) {
+        mediaElement.addEventListener("pause", () => {
-            switch (currentMedia.repeatMode) {
+            if (ignoreMediaEvents) {
-                case chrome.cast.media.RepeatMode.SINGLE:
+                ignoreMediaEvents = false;
-                    mediaElement.loop = true;
+                return;
-                    break;
-
-                case chrome.cast.media.RepeatMode.OFF:
-                    mediaElement.loop = false;
-                    break;
             }
-        }
+
+            currentMedia.pause(null
+                  , onMediaPauseSuccess
+                  , onMediaPauseError);
+        });
+
+        mediaElement.addEventListener("suspend", () => {
+            /*currentMedia.stop(null
+                  , onMediaStopSuccess
+                  , onMediaStopError);*/
+        });
+
+        mediaElement.addEventListener("seeking", () => {
+            if (ignoreMediaEvents) {
+                ignoreMediaEvents = false;
+                return;
+            }
+
+            const seekRequest = new chrome.cast.media.SeekRequest();
+            seekRequest.currentTime = mediaElement.currentTime;
+
+            currentMedia.seek(seekRequest
+                  , onMediaSeekSuccess
+                  , onMediaSeekError);
+        });
+
+        mediaElement.addEventListener("ratechange", () => {
+            currentMedia._sendMediaMessage({
+                type: "SET_PLAYBACK_RATE"
+              , playbackRate: mediaElement.playbackRate
+            });
+        });
+
+        mediaElement.addEventListener("volumechange", () => {
+            const newVolume = new chrome.cast.Volume(
+                    currentMedia.volume
+                  , currentMedia.muted);
+
+            const volumeRequest =
+                    new chrome.cast.media.VolumeRequest(newVolume);
+
+            logMessage("Volume change");
+            currentMedia.setVolume(volumeRequest);
+        });
 
 
-        // currentTime
+        currentMedia.addUpdateListener(isAlive => {
-        if (currentMedia.currentTime !== mediaElement.currentTime) {
+            if (!isAlive) {
-            mediaElement.currentTime = currentMedia.currentTime;
+                return;
-        }
+            }
-    });
+
+            // PlayerState
+            const localPlayerState = mediaElement.paused
+                ? chrome.cast.media.PlayerState.PAUSED
+                : chrome.cast.media.PlayerState.PLAYING;
+
+            if (localPlayerState !== currentMedia.playerState) {
+                ignoreMediaEvents = true;
+                switch (currentMedia.playerState) {
+                    case chrome.cast.media.PlayerState.PLAYING:
+                        mediaElement.play();
+                        break;
+
+                    case chrome.cast.media.PlayerState.PAUSED:
+                        mediaElement.pause();
+                        break;
+                }
+            }
+
+            // RepeatMode
+            const localRepeatMode = mediaElement.loop
+                ? chrome.cast.media.RepeatMode.SINGLE
+                : chrome.cast.media.RepeatMode.OFF;
+
+            if (localRepeatMode !== currentMedia.repeatMode) {
+                ignoreMediaEvents = true;
+                switch (currentMedia.repeatMode) {
+                    case chrome.cast.media.RepeatMode.SINGLE:
+                        mediaElement.loop = true;
+                        break;
+
+                    case chrome.cast.media.RepeatMode.OFF:
+                        mediaElement.loop = false;
+                        break;
+                }
+            }
+
+
+            // currentTime
+            if (currentMedia.currentTime !== mediaElement.currentTime) {
+                ignoreMediaEvents = true;
+                mediaElement.currentTime = currentMedia.currentTime;
+            }
+        });
+    }
 }
 function onLoadMediaError () {
     logMessage("onLoadMediaError");

ext/src/options/defaultOptions.js

@@ -1,5 +1,7 @@
 export default {
     mediaEnabled: true
+  , mediaSyncElement: false
+  , mediaStopOnUnload: false
   , localMediaEnabled: true
   , localMediaServerPort: 9555
   , mirroringEnabled: false

ext/src/options/index.jsx

@@ -192,6 +192,26 @@ class App extends Component {
                             </div>
                         </label>
 
+                        <label className="option option--inline">
+                            <input name="mediaSyncElement"
+                                   type="checkbox"
+                                   checked={ this.state.options.mediaSyncElement }
+                                   onChange={ this.handleInputChange } />
+                            <div className="option__label">
+                                { _("optionsMediaSyncElement") }
+                            </div>
+                        </label>
+
+                        <label className="option option--inline">
+                            <input name="mediaStopOnUnload"
+                                   type="checkbox"
+                                   checked={ this.state.options.mediaStopOnUnload }
+                                   onChange={ this.handleInputChange } />
+                            <div className="option__label">
+                                { _("optionsMediaStopOnUnload") }
+                            </div>
+                        </label>
+
                         <fieldset className="category"
                                   disabled={ !this.state.options.mediaEnabled }>
                             <legend className="category__name">