From baf3a926935c7c1befaab46f79d2f27795247e23 Mon Sep 17 00:00:00 2001 From: Botzy Date: Fri, 14 Mar 2025 17:47:36 +0200 Subject: [PATCH 1/8] feat(Settings): added blurUnwatchedImage prop to profile settings --- src/routes/Settings/Settings.js | 11 +++++++++++ src/routes/Settings/useProfileSettingsInputs.js | 17 +++++++++++++++++ src/types/models/Ctx.d.ts | 1 + 3 files changed, 29 insertions(+) diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index f238c1d02..141b6e576 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -31,6 +31,7 @@ const Settings = () => { const toast = useToast(); const { interfaceLanguageSelect, + blurUnwatchedImageToggle, subtitlesLanguageSelect, subtitlesSizeSelect, subtitlesTextColorInput, @@ -502,6 +503,16 @@ const Settings = () => { {...playInExternalPlayerSelect} /> +
+
+
{ t('SETTINGS_BLUR_UNWATCHED_IMAGE') }
+
+ +
{ shell.active &&
diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index c193c6eaf..41d294a45 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -32,6 +32,22 @@ const useProfileSettingsInputs = (profile) => { } }), [profile.settings]); + const blurUnwatchedImageToggle = React.useMemo(() => ({ + checked: profile.settings.blurUnwatchedImage, + onClick: () => { + core.transport.dispatch({ + action: 'Ctx', + args: { + action: 'UpdateSettings', + args: { + ...profile.settings, + blurUnwatchedImage: !profile.settings.blurUnwatchedImage + } + } + }); + } + }), [profile.settings]); + const quitOnCloseToggle = React.useMemo(() => ({ checked: profile.settings.quitOnClose, onClick: () => { @@ -325,6 +341,7 @@ const useProfileSettingsInputs = (profile) => { }), [profile.settings]); return { interfaceLanguageSelect, + blurUnwatchedImageToggle, subtitlesLanguageSelect, subtitlesSizeSelect, subtitlesTextColorInput, diff --git a/src/types/models/Ctx.d.ts b/src/types/models/Ctx.d.ts index a86fd60fa..61b33dfdd 100644 --- a/src/types/models/Ctx.d.ts +++ b/src/types/models/Ctx.d.ts @@ -21,6 +21,7 @@ type Settings = { hardwareDecoding: boolean, escExitFullscreen: boolean, interfaceLanguage: string, + blurUnwatchedImage: boolean, nextVideoNotificationDuration: number, playInBackground: boolean, playerType: string | null, From 7adfa8ff39e34c3c78cbfe8addeb825f02e93cc5 Mon Sep 17 00:00:00 2001 From: Botzy Date: Fri, 14 Mar 2025 18:20:16 +0200 Subject: [PATCH 2/8] refactor(Settings): rename blurUnwatchedImage to hideSpoilers --- src/routes/Settings/Settings.js | 4 ++-- src/routes/Settings/useProfileSettingsInputs.js | 8 ++++---- src/types/models/Ctx.d.ts | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/src/routes/Settings/Settings.js b/src/routes/Settings/Settings.js index 141b6e576..bd26c53f1 100644 --- a/src/routes/Settings/Settings.js +++ b/src/routes/Settings/Settings.js @@ -31,7 +31,7 @@ const Settings = () => { const toast = useToast(); const { interfaceLanguageSelect, - blurUnwatchedImageToggle, + hideSpoilersToggle, subtitlesLanguageSelect, subtitlesSizeSelect, subtitlesTextColorInput, @@ -510,7 +510,7 @@ const Settings = () => {
{ diff --git a/src/routes/Settings/useProfileSettingsInputs.js b/src/routes/Settings/useProfileSettingsInputs.js index 41d294a45..afad298ed 100644 --- a/src/routes/Settings/useProfileSettingsInputs.js +++ b/src/routes/Settings/useProfileSettingsInputs.js @@ -32,8 +32,8 @@ const useProfileSettingsInputs = (profile) => { } }), [profile.settings]); - const blurUnwatchedImageToggle = React.useMemo(() => ({ - checked: profile.settings.blurUnwatchedImage, + const hideSpoilersToggle = React.useMemo(() => ({ + checked: profile.settings.hideSpoilers, onClick: () => { core.transport.dispatch({ action: 'Ctx', @@ -41,7 +41,7 @@ const useProfileSettingsInputs = (profile) => { action: 'UpdateSettings', args: { ...profile.settings, - blurUnwatchedImage: !profile.settings.blurUnwatchedImage + hideSpoilers: !profile.settings.hideSpoilers } } }); @@ -341,7 +341,7 @@ const useProfileSettingsInputs = (profile) => { }), [profile.settings]); return { interfaceLanguageSelect, - blurUnwatchedImageToggle, + hideSpoilersToggle, subtitlesLanguageSelect, subtitlesSizeSelect, subtitlesTextColorInput, diff --git a/src/types/models/Ctx.d.ts b/src/types/models/Ctx.d.ts index 61b33dfdd..47f18749f 100644 --- a/src/types/models/Ctx.d.ts +++ b/src/types/models/Ctx.d.ts @@ -21,7 +21,7 @@ type Settings = { hardwareDecoding: boolean, escExitFullscreen: boolean, interfaceLanguage: string, - blurUnwatchedImage: boolean, + hideSpoilers: boolean, nextVideoNotificationDuration: number, playInBackground: boolean, playerType: string | null, From d006cae53d397d5f1e1d3c1d102a59dd026cf4d3 Mon Sep 17 00:00:00 2001 From: Botzy Date: Mon, 17 Mar 2025 19:42:58 +0200 Subject: [PATCH 3/8] feat(Video): blur unwatched episode thumbnail --- src/components/Video/Video.js | 5 ++++- src/components/Video/styles.less | 5 +++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/src/components/Video/Video.js b/src/components/Video/Video.js index 0bcb569a5..8cbc5007b 100644 --- a/src/components/Video/Video.js +++ b/src/components/Video/Video.js @@ -8,11 +8,13 @@ const { useRouteFocused } = require('stremio-router'); const { default: Icon } = require('@stremio/stremio-icons/react'); const { Button, Image, Popup } = require('stremio/components'); const useBinaryState = require('stremio/common/useBinaryState'); +const useProfile = require('stremio/common/useProfile'); const VideoPlaceholder = require('./VideoPlaceholder'); const styles = require('./styles'); const Video = ({ className, id, title, thumbnail, season, episode, released, upcoming, watched, progress, scheduled, seasonWatched, deepLinks, onMarkVideoAsWatched, onMarkSeasonAsWatched, ...props }) => { const routeFocused = useRouteFocused(); + const profile = useProfile(); const [menuOpen, , closeMenu, toggleMenu] = useBinaryState(false); const popupLabelOnMouseUp = React.useCallback((event) => { if (!event.nativeEvent.togglePopupPrevented) { @@ -66,13 +68,14 @@ const Video = ({ className, id, title, thumbnail, season, episode, released, upc } }, [deepLinks]); const renderLabel = React.useMemo(() => function renderLabel({ className, id, title, thumbnail, episode, released, upcoming, watched, progress, scheduled, children, ...props }) { + const blurThumbnail = profile.settings.hideSpoilers && !watched; return (