mirror of
https://github.com/hensm/fx_cast.git
synced 2026-06-08 08:39:59 +00:00
Add new media options
This commit is contained in:
@@ -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"
|
||||
|
||||
@@ -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
|
||||
const localPlayerState = mediaElement.paused
|
||||
? chrome.cast.media.PlayerState.PAUSED
|
||||
: chrome.cast.media.PlayerState.PLAYING;
|
||||
|
||||
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;
|
||||
if (options.mediaSyncElement) {
|
||||
mediaElement.addEventListener("play", () => {
|
||||
if (ignoreMediaEvents) {
|
||||
ignoreMediaEvents = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// RepeatMode
|
||||
const localRepeatMode = mediaElement.loop
|
||||
? chrome.cast.media.RepeatMode.SINGLE
|
||||
: chrome.cast.media.RepeatMode.OFF;
|
||||
currentMedia.play(null
|
||||
, onMediaPlaySuccess
|
||||
, onMediaPlayError);
|
||||
});
|
||||
|
||||
if (localRepeatMode !== currentMedia.repeatMode) {
|
||||
switch (currentMedia.repeatMode) {
|
||||
case chrome.cast.media.RepeatMode.SINGLE:
|
||||
mediaElement.loop = true;
|
||||
break;
|
||||
|
||||
case chrome.cast.media.RepeatMode.OFF:
|
||||
mediaElement.loop = false;
|
||||
break;
|
||||
mediaElement.addEventListener("pause", () => {
|
||||
if (ignoreMediaEvents) {
|
||||
ignoreMediaEvents = false;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
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
|
||||
if (currentMedia.currentTime !== mediaElement.currentTime) {
|
||||
mediaElement.currentTime = currentMedia.currentTime;
|
||||
}
|
||||
});
|
||||
currentMedia.addUpdateListener(isAlive => {
|
||||
if (!isAlive) {
|
||||
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");
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
export default {
|
||||
mediaEnabled: true
|
||||
, mediaSyncElement: false
|
||||
, mediaStopOnUnload: false
|
||||
, localMediaEnabled: true
|
||||
, localMediaServerPort: 9555
|
||||
, mirroringEnabled: false
|
||||
|
||||
@@ -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">
|
||||
|
||||
Reference in New Issue
Block a user