+
@@ -178,6 +191,7 @@ ControlBar.propTypes = {
duration: PropTypes.number,
volume: PropTypes.number,
muted: PropTypes.bool,
+ playbackSpeed: PropTypes.number,
subtitlesTracks: PropTypes.array,
audioTracks: PropTypes.array,
metaItem: PropTypes.object,
@@ -190,6 +204,7 @@ ControlBar.propTypes = {
onSeekRequested: PropTypes.func,
onToggleSubtitlesMenu: PropTypes.func,
onToggleInfoMenu: PropTypes.func,
+ onToggleSpeedMenu: PropTypes.func,
onToggleVideosMenu: PropTypes.func
};
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index d11c17e16..f21ec7c5a 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -4,6 +4,7 @@ const React = require('react');
const PropTypes = require('prop-types');
const classnames = require('classnames');
const debounce = require('lodash.debounce');
+const langs = require('langs');
const { useRouteFocused } = require('stremio-router');
const { useServices } = require('stremio/services');
const { HorizontalNavBar, Button, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
@@ -14,6 +15,7 @@ const NextVideoPopup = require('./NextVideoPopup');
const InfoMenu = require('./InfoMenu');
const VideosMenu = require('./VideosMenu');
const SubtitlesMenu = require('./SubtitlesMenu');
+const SpeedMenu = require('./SpeedMenu');
const Video = require('./Video');
const usePlayer = require('./usePlayer');
const useSettings = require('./useSettings');
@@ -40,9 +42,12 @@ const Player = ({ urlParams, queryParams }) => {
const setImmersedDebounced = React.useCallback(debounce(setImmersed, 3000), []);
const [subtitlesMenuOpen, , closeSubtitlesMenu, toggleSubtitlesMenu] = useBinaryState(false);
const [infoMenuOpen, , closeInfoMenu, toggleInfoMenu] = useBinaryState(false);
+ const [speedMenuOpen, , closeSpeedMenu, toggleSpeedMenu] = useBinaryState(false);
const [videosMenuOpen, , closeVideosMenu, toggleVideosMenu] = useBinaryState(false);
const [nextVideoPopupOpen, openNextVideoPopup, closeNextVideoPopup] = useBinaryState(false);
const nextVideoPopupDismissed = React.useRef(false);
+ const defaultSubtitlesSelected = React.useRef(false);
+ const defaultAudioTrackSelected = React.useRef(false);
const [error, setError] = React.useState(null);
const [videoState, setVideoState] = React.useReducer(
(videoState, nextVideoState) => ({ ...videoState, ...nextVideoState }),
@@ -55,6 +60,7 @@ const Player = ({ urlParams, queryParams }) => {
buffering: null,
volume: null,
muted: null,
+ playbackSpeed: null,
audioTracks: [],
selectedAudioTrackId: null,
subtitlesTracks: [],
@@ -157,6 +163,9 @@ const Player = ({ urlParams, queryParams }) => {
const onSeekRequested = React.useCallback((time) => {
dispatch({ type: 'setProp', propName: 'time', propValue: time });
}, []);
+ const onPlaybackSpeedChanged = React.useCallback((rate) => {
+ dispatch({ type: 'setProp', propName: 'playbackSpeed', propValue: rate });
+ }, []);
const onSubtitlesTrackSelected = React.useCallback((id) => {
dispatch({ type: 'setProp', propName: 'selectedSubtitlesTrackId', propValue: id });
dispatch({ type: 'setProp', propName: 'selectedExtraSubtitlesTrackId', propValue: null });
@@ -212,6 +221,9 @@ const Player = ({ urlParams, queryParams }) => {
if (!event.nativeEvent.infoMenuClosePrevented) {
closeInfoMenu();
}
+ if (!event.nativeEvent.speedMenuClosePrevented) {
+ closeSpeedMenu();
+ }
if (!event.nativeEvent.videosMenuClosePrevented) {
closeVideosMenu();
}
@@ -252,7 +264,10 @@ const Player = ({ urlParams, queryParams }) => {
[]
},
autoplay: true,
- time: player.libraryItem !== null && player.selected.streamRequest !== null && player.libraryItem.state.video_id === player.selected.streamRequest.id ?
+ time: player.libraryItem !== null &&
+ player.selected.streamRequest !== null &&
+ player.selected.streamRequest.path !== null &&
+ player.libraryItem.state.video_id === player.selected.streamRequest.path.id ?
player.libraryItem.state.timeOffset
:
0,
@@ -336,6 +351,37 @@ const Player = ({ urlParams, queryParams }) => {
}
}
}, [videoState.time, videoState.duration]);
+ React.useEffect(() => {
+ if (!defaultSubtitlesSelected.current) {
+ const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
+
+ const subtitlesTrack = findTrackByLang(videoState.subtitlesTracks, settings.subtitlesLanguage);
+ const extraSubtitlesTrack = findTrackByLang(videoState.extraSubtitlesTracks, settings.subtitlesLanguage);
+
+ if (subtitlesTrack && subtitlesTrack.id) {
+ onSubtitlesTrackSelected(subtitlesTrack.id);
+ defaultSubtitlesSelected.current = true;
+ } else if (extraSubtitlesTrack && extraSubtitlesTrack.id) {
+ onExtraSubtitlesTrackSelected(extraSubtitlesTrack.id);
+ defaultSubtitlesSelected.current = true;
+ }
+ }
+ }, [videoState.subtitlesTracks, videoState.extraSubtitlesTracks]);
+ React.useEffect(() => {
+ if (!defaultAudioTrackSelected.current) {
+ const findTrackByLang = (tracks, lang) => tracks.find((track) => track.lang === lang || langs.where('1', track.lang)?.[2] === lang);
+ const audioTrack = findTrackByLang(videoState.audioTracks, settings.audioLanguage);
+
+ if (audioTrack && audioTrack.id) {
+ onAudioTrackSelected(audioTrack.id);
+ defaultAudioTrackSelected.current = true;
+ }
+ }
+ }, [videoState.audioTracks]);
+ React.useEffect(() => {
+ defaultSubtitlesSelected.current = false;
+ defaultAudioTrackSelected.current = false;
+ }, [videoState.stream]);
React.useEffect(() => {
if ((!Array.isArray(videoState.subtitlesTracks) || videoState.subtitlesTracks.length === 0) &&
(!Array.isArray(videoState.extraSubtitlesTracks) || videoState.extraSubtitlesTracks.length === 0) &&
@@ -349,6 +395,11 @@ const Player = ({ urlParams, queryParams }) => {
closeVideosMenu();
}
}, [player.metaItem]);
+ React.useEffect(() => {
+ if (videoState.playbackSpeed === null) {
+ closeSpeedMenu();
+ }
+ }, [videoState.playbackSpeed]);
React.useEffect(() => {
const intervalId = setInterval(() => {
pushToLibrary();
@@ -389,7 +440,7 @@ const Player = ({ urlParams, queryParams }) => {
const onKeyDown = (event) => {
switch (event.code) {
case 'Space': {
- if (!subtitlesMenuOpen && !infoMenuOpen && videoState.paused !== null) {
+ if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen&& videoState.paused !== null) {
if (videoState.paused) {
onPlayRequested();
} else {
@@ -400,7 +451,7 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
case 'ArrowRight': {
- if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) {
+ if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && videoState.time !== null) {
const seekTimeMultiplier = event.shiftKey ? 3 : 1;
onSeekRequested(videoState.time + (settings.seekTimeDuration * seekTimeMultiplier));
}
@@ -408,7 +459,7 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
case 'ArrowLeft': {
- if (!subtitlesMenuOpen && !infoMenuOpen && videoState.time !== null) {
+ if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && videoState.time !== null) {
const seekTimeMultiplier = event.shiftKey ? 3 : 1;
onSeekRequested(videoState.time - (settings.seekTimeDuration * seekTimeMultiplier));
}
@@ -416,14 +467,14 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
case 'ArrowUp': {
- if (!subtitlesMenuOpen && !infoMenuOpen && videoState.volume !== null) {
+ if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && videoState.volume !== null) {
onVolumeChangeRequested(videoState.volume + 5);
}
break;
}
case 'ArrowDown': {
- if (!subtitlesMenuOpen && !infoMenuOpen && videoState.volume !== null) {
+ if (!subtitlesMenuOpen && !infoMenuOpen && !videosMenuOpen && !speedMenuOpen && videoState.volume !== null) {
onVolumeChangeRequested(videoState.volume - 5);
}
@@ -431,6 +482,7 @@ const Player = ({ urlParams, queryParams }) => {
}
case 'KeyS': {
closeInfoMenu();
+ closeSpeedMenu();
closeVideosMenu();
if ((Array.isArray(videoState.subtitlesTracks) && videoState.subtitlesTracks.length > 0) ||
(Array.isArray(videoState.extraSubtitlesTracks) && videoState.extraSubtitlesTracks.length > 0) ||
@@ -442,6 +494,7 @@ const Player = ({ urlParams, queryParams }) => {
}
case 'KeyI': {
closeSubtitlesMenu();
+ closeSpeedMenu();
closeVideosMenu();
if (player.metaItem !== null && player.metaItem.type === 'Ready') {
toggleInfoMenu();
@@ -449,9 +502,20 @@ const Player = ({ urlParams, queryParams }) => {
break;
}
+ case 'KeyR': {
+ closeInfoMenu();
+ closeSubtitlesMenu();
+ closeVideosMenu();
+ if (videoState.playbackSpeed !== null) {
+ toggleSpeedMenu();
+ }
+
+ break;
+ }
case 'KeyV': {
closeInfoMenu();
closeSubtitlesMenu();
+ closeSpeedMenu();
if (player.metaItem !== null && player.metaItem.type === 'Ready') {
toggleVideosMenu();
}
@@ -461,6 +525,7 @@ const Player = ({ urlParams, queryParams }) => {
case 'Escape': {
closeSubtitlesMenu();
closeInfoMenu();
+ closeSpeedMenu();
closeVideosMenu();
onDismissNextVideoPopup();
break;
@@ -473,7 +538,7 @@ const Player = ({ urlParams, queryParams }) => {
return () => {
window.removeEventListener('keydown', onKeyDown);
};
- }, [player.metaItem, settings.seekTimeDuration, routeFocused, subtitlesMenuOpen, infoMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.audioTracks, videoState.subtitlesTracks, videoState.extraSubtitlesTracks, toggleSubtitlesMenu, toggleInfoMenu, toggleVideosMenu]);
+ }, [player.metaItem, settings.seekTimeDuration, routeFocused, subtitlesMenuOpen, infoMenuOpen, videosMenuOpen, speedMenuOpen, videoState.paused, videoState.time, videoState.volume, videoState.audioTracks, videoState.subtitlesTracks, videoState.extraSubtitlesTracks, videoState.playbackSpeed, toggleSubtitlesMenu, toggleInfoMenu, toggleVideosMenu]);
React.useLayoutEffect(() => {
return () => {
setImmersedDebounced.cancel();
@@ -482,7 +547,7 @@ const Player = ({ urlParams, queryParams }) => {
};
}, []);
return (
-
{
null
}
{
- subtitlesMenuOpen || infoMenuOpen ?
+ subtitlesMenuOpen || infoMenuOpen || videosMenuOpen || speedMenuOpen ?
:
null
@@ -547,6 +612,7 @@ const Player = ({ urlParams, queryParams }) => {
duration={videoState.duration}
volume={videoState.volume}
muted={videoState.muted}
+ playbackSpeed={videoState.playbackSpeed}
subtitlesTracks={videoState.subtitlesTracks.concat(videoState.extraSubtitlesTracks)}
audioTracks={videoState.audioTracks}
metaItem={player.metaItem}
@@ -559,6 +625,7 @@ const Player = ({ urlParams, queryParams }) => {
onSeekRequested={onSeekRequested}
onToggleSubtitlesMenu={toggleSubtitlesMenu}
onToggleInfoMenu={toggleInfoMenu}
+ onToggleSpeedMenu={toggleSpeedMenu}
onToggleVideosMenu={toggleVideosMenu}
onMouseMove={onBarMouseMove}
onMouseOver={onBarMouseMove}
@@ -613,6 +680,16 @@ const Player = ({ urlParams, queryParams }) => {
:
null
}
+ {
+ speedMenuOpen ?
+
+ :
+ null
+ }
{
videosMenuOpen ?
{
+ const onClick = React.useCallback(() => {
+ if (typeof onSelect === 'function') {
+ onSelect(value);
+ }
+ }, [onSelect, value]);
+ return (
+
+ );
+};
+
+OptionButton.propTypes = {
+ className: PropTypes.string,
+ value: PropTypes.number,
+ selected: PropTypes.bool,
+ onSelect: PropTypes.func,
+};
+
+module.exports = OptionButton;
diff --git a/src/routes/Player/SpeedMenu/Option/index.js b/src/routes/Player/SpeedMenu/Option/index.js
new file mode 100644
index 000000000..2bf2d108d
--- /dev/null
+++ b/src/routes/Player/SpeedMenu/Option/index.js
@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const Option = require('./Option');
+
+module.exports = Option;
diff --git a/src/routes/Player/SpeedMenu/Option/styles.less b/src/routes/Player/SpeedMenu/Option/styles.less
new file mode 100644
index 000000000..1de1f65ff
--- /dev/null
+++ b/src/routes/Player/SpeedMenu/Option/styles.less
@@ -0,0 +1,38 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+@import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
+
+.option {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 0 1.5em;
+
+ &:global(.selected) {
+ background-color: @color-background;
+
+ .icon {
+ display: block;
+ }
+ }
+
+ &:hover, &:focus {
+ background-color: @color-background-light2;
+ }
+
+ .label {
+ flex: 1;
+ font-weight: 400;
+ color: @color-surface-light5-90;
+ }
+
+ .icon {
+ flex: none;
+ display: none;
+ width: 0.5rem;
+ height: 0.5rem;
+ border-radius: 100%;
+ margin-left: 1rem;
+ background-color: @color-accent3-90;
+ }
+}
\ No newline at end of file
diff --git a/src/routes/Player/SpeedMenu/SpeedMenu.js b/src/routes/Player/SpeedMenu/SpeedMenu.js
new file mode 100644
index 000000000..836a9ac80
--- /dev/null
+++ b/src/routes/Player/SpeedMenu/SpeedMenu.js
@@ -0,0 +1,48 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const React = require('react');
+const PropTypes = require('prop-types');
+const classnames = require('classnames');
+const Option = require('./Option');
+const styles = require('./styles');
+
+const RATES = Array.from(Array(8).keys(), (n) => n * 0.25 + 0.25).reverse();
+
+const SpeedMenu = ({ className, playbackSpeed, onPlaybackSpeedChanged }) => {
+ const onMouseDown = React.useCallback((event) => {
+ event.nativeEvent.speedMenuClosePrevented = true;
+ }, []);
+ const onOptionSelect = React.useCallback((value) => {
+ if (typeof onPlaybackSpeedChanged === 'function') {
+ onPlaybackSpeedChanged(value);
+ }
+ }, [onPlaybackSpeedChanged]);
+ return (
+
+
+ Playback Speed
+
+
+ {
+ RATES.map((rate) => (
+
+ ))
+ }
+
+
+
Rewind & Fast-forward duration
diff --git a/src/routes/Settings/styles.less b/src/routes/Settings/styles.less
index 7e297080a..2b9e36d96 100644
--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@@ -336,6 +336,7 @@
.label {
margin: 0 1rem;
+ white-space: nowrap;
color: @color-secondaryvariant1-90;
}
}
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js
index 57f444d01..f7bcb9885 100644
--- a/src/routes/Settings/useProfileSettingsInputs.js
+++ b/src/routes/Settings/useProfileSettingsInputs.js
@@ -1,12 +1,13 @@
// Copyright (C) 2017-2022 Smart code 203358507
+const React = require('react');
const { useServices } = require('stremio/services');
-const { CONSTANTS, languageNames, useDeepEqualMemo } = require('stremio/common');
+const { CONSTANTS, languageNames } = require('stremio/common');
const useProfileSettingsInputs = (profile) => {
const { core } = useServices();
- // TODO combine those useDeepEqualMemo in one
- const interfaceLanguageSelect = useDeepEqualMemo(() => ({
+ // TODO combine those useMemo in one
+ const interfaceLanguageSelect = React.useMemo(() => ({
options: Object.keys(languageNames).map((code) => ({
value: code,
label: languageNames[code]
@@ -25,7 +26,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const subtitlesLanguageSelect = useDeepEqualMemo(() => ({
+ const subtitlesLanguageSelect = React.useMemo(() => ({
options: Object.keys(languageNames).map((code) => ({
value: code,
label: languageNames[code]
@@ -44,7 +45,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const subtitlesSizeSelect = useDeepEqualMemo(() => ({
+ const subtitlesSizeSelect = React.useMemo(() => ({
options: CONSTANTS.SUBTITLES_SIZES.map((size) => ({
value: `${size}`,
label: `${size}%`
@@ -66,7 +67,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const subtitlesTextColorInput = useDeepEqualMemo(() => ({
+ const subtitlesTextColorInput = React.useMemo(() => ({
value: profile.settings.subtitlesTextColor,
onChange: (event) => {
core.transport.dispatch({
@@ -81,7 +82,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const subtitlesBackgroundColorInput = useDeepEqualMemo(() => ({
+ const subtitlesBackgroundColorInput = React.useMemo(() => ({
value: profile.settings.subtitlesBackgroundColor,
onChange: (event) => {
core.transport.dispatch({
@@ -96,7 +97,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const subtitlesOutlineColorInput = useDeepEqualMemo(() => ({
+ const subtitlesOutlineColorInput = React.useMemo(() => ({
value: profile.settings.subtitlesOutlineColor,
onChange: (event) => {
core.transport.dispatch({
@@ -111,7 +112,26 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const seekTimeDurationSelect = useDeepEqualMemo(() => ({
+ const audioLanguageSelect = React.useMemo(() => ({
+ options: Object.keys(languageNames).map((code) => ({
+ value: code,
+ label: languageNames[code]
+ })),
+ selected: [profile.settings.audioLanguage],
+ onSelect: (event) => {
+ core.transport.dispatch({
+ action: 'Ctx',
+ args: {
+ action: 'UpdateSettings',
+ args: {
+ ...profile.settings,
+ audioLanguage: event.value
+ }
+ }
+ });
+ }
+ }), [profile.settings]);
+ const seekTimeDurationSelect = React.useMemo(() => ({
options: CONSTANTS.SEEK_TIME_DURATIONS.map((size) => ({
value: `${size}`,
label: `${size / 1000} seconds`
@@ -133,7 +153,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const bingeWatchingCheckbox = useDeepEqualMemo(() => ({
+ const bingeWatchingCheckbox = React.useMemo(() => ({
checked: profile.settings.bingeWatching,
onClick: () => {
core.transport.dispatch({
@@ -148,7 +168,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const playInBackgroundCheckbox = useDeepEqualMemo(() => ({
+ const playInBackgroundCheckbox = React.useMemo(() => ({
checked: profile.settings.playInBackground,
onClick: () => {
core.transport.dispatch({
@@ -163,7 +183,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const playInExternalPlayerCheckbox = useDeepEqualMemo(() => ({
+ const playInExternalPlayerCheckbox = React.useMemo(() => ({
checked: profile.settings.playInExternalPlayer,
onClick: () => {
core.transport.dispatch({
@@ -178,7 +198,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const hardwareDecodingCheckbox = useDeepEqualMemo(() => ({
+ const hardwareDecodingCheckbox = React.useMemo(() => ({
checked: profile.settings.hardwareDecoding,
onClick: () => {
core.transport.dispatch({
@@ -193,7 +213,7 @@ const useProfileSettingsInputs = (profile) => {
});
}
}), [profile.settings]);
- const streamingServerUrlInput = useDeepEqualMemo(() => ({
+ const streamingServerUrlInput = React.useMemo(() => ({
value: profile.settings.streamingServerUrl,
onChange: (value) => {
core.transport.dispatch({
@@ -215,6 +235,7 @@ const useProfileSettingsInputs = (profile) => {
subtitlesTextColorInput,
subtitlesBackgroundColorInput,
subtitlesOutlineColorInput,
+ audioLanguageSelect,
seekTimeDurationSelect,
bingeWatchingCheckbox,
playInBackgroundCheckbox,
diff --git a/src/routes/Settings/useStreamingServerSettingsInputs.js b/src/routes/Settings/useStreamingServerSettingsInputs.js
index 8e1e3405c..d6ea1a6a0 100644
--- a/src/routes/Settings/useStreamingServerSettingsInputs.js
+++ b/src/routes/Settings/useStreamingServerSettingsInputs.js
@@ -1,8 +1,8 @@
// Copyright (C) 2017-2022 Smart code 203358507
+const React = require('react');
const isEqual = require('lodash.isequal');
const { useServices } = require('stremio/services');
-const { useDeepEqualMemo } = require('stremio/common');
const CACHE_SIZES = [0, 2147483648, 5368709120, 10737418240, null];
@@ -53,8 +53,8 @@ const TORRENT_PROFILES = {
const useStreamingServerSettingsInputs = (streamingServer) => {
const { core } = useServices();
- // TODO combine those useDeepEqualMemo in one
- const cacheSizeSelect = useDeepEqualMemo(() => {
+ // TODO combine those useMemo in one
+ const cacheSizeSelect = React.useMemo(() => {
if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') {
return null;
}
@@ -82,7 +82,7 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
}
};
}, [streamingServer.settings]);
- const torrentProfileSelect = useDeepEqualMemo(() => {
+ const torrentProfileSelect = React.useMemo(() => {
if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') {
return null;
}
diff --git a/src/services/Chromecast/Chromecast.js b/src/services/Chromecast/Chromecast.js
index c025f2dee..44c9e4022 100644
--- a/src/services/Chromecast/Chromecast.js
+++ b/src/services/Chromecast/Chromecast.js
@@ -20,7 +20,7 @@ function Chromecast() {
function onTransportInitError(args) {
console.error(args);
active = false;
- error = new Error('Google Cast API not available');
+ error = new Error('Google Cast API not available', { cause: args });
starting = false;
onStateChanged();
transport = null;
diff --git a/src/services/Chromecast/ChromecastTransport.js b/src/services/Chromecast/ChromecastTransport.js
index 7c82f80ae..f396df643 100644
--- a/src/services/Chromecast/ChromecastTransport.js
+++ b/src/services/Chromecast/ChromecastTransport.js
@@ -1,6 +1,7 @@
// Copyright (C) 2017-2022 Smart code 203358507
const EventEmitter = require('eventemitter3');
+const hat = require('hat');
const MESSAGE_NAMESPACE = 'urn:x-cast:com.stremio';
const CHUNK_SIZE = 20000;
@@ -33,7 +34,7 @@ const initialize = () => {
function ChromecastTransport() {
const events = new EventEmitter();
- const chunks = [];
+ const messages = {};
initialize()
.then(() => {
@@ -59,26 +60,17 @@ function ChromecastTransport() {
function onMessage(_, message) {
try {
- const { chunk, last } = JSON.parse(message);
- chunks.push(chunk);
- if (!last) {
- return;
+ const { id, chunk, index, length } = JSON.parse(message);
+ messages[id] = messages[id] || [];
+ messages[id][index] = chunk;
+ if (Object.keys(messages[id]).length === length) {
+ const parsedMessage = JSON.parse(messages[id].join(''));
+ delete messages[id];
+ events.emit('message', parsedMessage);
}
} catch (error) {
- chunks.splice(0, chunks.length);
events.emit('message-error', error);
- return;
}
-
- let parsedMessage;
- try {
- parsedMessage = JSON.parse(chunks.splice(0, chunks.length).join(''));
- } catch (error) {
- events.emit('message-error', error);
- return;
- }
-
- events.emit('message', parsedMessage);
}
function onApplicationStatusChanged(event) {
events.emit(cast.framework.CastSession.APPLICATION_STATUS_CHANGED, event);
@@ -165,11 +157,13 @@ function ChromecastTransport() {
const chunk = serializedMessage.slice(start, start + CHUNK_SIZE);
chunks.push(chunk);
}
-
+ const id = hat();
return Promise.all(chunks.map((chunk, index) => {
return castSession.sendMessage(MESSAGE_NAMESPACE, {
+ id,
chunk,
- last: index === chunks.length - 1,
+ index,
+ length: chunks.length
});
}));
} else {
diff --git a/src/services/Core/Core.js b/src/services/Core/Core.js
index e033396d5..9e78f1af1 100644
--- a/src/services/Core/Core.js
+++ b/src/services/Core/Core.js
@@ -20,7 +20,7 @@ function Core(args) {
function onTransportError(args) {
console.error(args);
active = false;
- error = new Error('Stremio Core Transport initialization failed');
+ error = new Error('Stremio Core Transport initialization failed', { cause: args });
starting = false;
onStateChanged();
transport = null;
diff --git a/webpack.config.js b/webpack.config.js
index 522aa1048..51997aa52 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -6,8 +6,10 @@ const webpack = require('webpack');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
+const WorkboxPlugin = require('workbox-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
+const colors = require('@stremio/stremio-colors');
const pachageJson = require('./package.json');
const COMMIT_HASH = execSync('git rev-parse HEAD').toString().trim();
@@ -187,8 +189,18 @@ module.exports = (env, argv) => ({
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: ['*']
}),
+ argv.mode === 'production' &&
+ new WorkboxPlugin.GenerateSW({
+ maximumFileSizeToCacheInBytes: 20000000,
+ clientsClaim: true,
+ skipWaiting: true
+ }),
new CopyWebpackPlugin({
- patterns: [{ from: 'favicons', to: `${COMMIT_HASH}/favicons` }]
+ patterns: [
+ { from: 'favicons', to: `${COMMIT_HASH}/favicons` },
+ { from: 'images', to: `${COMMIT_HASH}/images` },
+ { from: 'manifest.json', to: `${COMMIT_HASH}/manifest.json` },
+ ]
}),
new MiniCssExtractPlugin({
filename: `${COMMIT_HASH}/styles/[name].css`
@@ -197,7 +209,10 @@ module.exports = (env, argv) => ({
template: './src/index.html',
inject: false,
scriptLoading: 'blocking',
- faviconsPath: `${COMMIT_HASH}/favicons`
+ themeColor: colors.background,
+ faviconsPath: `${COMMIT_HASH}/favicons`,
+ imagesPath: `${COMMIT_HASH}/images`,
+ manifestPath: `${COMMIT_HASH}/manifest.json`,
})
- ]
+ ].filter(Boolean)
});