From b4669d841efa54340ef93f35017f6ecff9d9f509 Mon Sep 17 00:00:00 2001 From: zeppi Date: Thu, 21 Apr 2022 21:26:29 -0400 Subject: [PATCH] watch time ux --- static/app-strings.json | 4 +- ui/component/fileThumbnail/index.js | 3 + ui/component/fileThumbnail/view.jsx | 4 +- ui/component/settingContent/view.jsx | 80 +++++++++++++------------- ui/scss/component/_file-thumbnail.scss | 1 - ui/scss/component/_settings.scss | 1 + 6 files changed, 50 insertions(+), 43 deletions(-) diff --git a/static/app-strings.json b/static/app-strings.json index b819708b2..1a8fc9997 100644 --- a/static/app-strings.json +++ b/static/app-strings.json @@ -2311,9 +2311,9 @@ "Elements": "Elements", "Icons": "Icons", "Go to": "Go to", - "Persist watch time": "Persist watch time", "Clearing...": "Clearing...", "Clear Views": "Clear Views", - "Persist the watch time of the videos you have watched. This will not erase or hide any blockchain activity or downloads.": "Persist the watch time of the videos you have watched. This will not erase or hide any blockchain activity or downloads.", + "Show Video View Progress": "Show Video View Progress", + "Display view progress on thumbnail. This setting will not hide any blockchain activity or downloads.": "Display view progress on thumbnail. This setting will not hide any blockchain activity or downloads.", "--end--": "--end--" } diff --git a/ui/component/fileThumbnail/index.js b/ui/component/fileThumbnail/index.js index c817b8193..f9f447877 100644 --- a/ui/component/fileThumbnail/index.js +++ b/ui/component/fileThumbnail/index.js @@ -3,11 +3,14 @@ import { doResolveUri } from 'redux/actions/claims'; import { makeSelectClaimForUri } from 'redux/selectors/claims'; import { makeSelectContentWatchedPercentageForUri } from 'redux/selectors/content'; import CardMedia from './view'; +import { makeSelectClientSetting } from 'redux/selectors/settings'; +import * as SETTINGS from 'constants/settings'; const select = (state, props) => { return { watchedPercentage: makeSelectContentWatchedPercentageForUri(props.uri)(state), claim: makeSelectClaimForUri(props.uri)(state), + showPercentage: makeSelectClientSetting(SETTINGS.PERSIST_WATCH_TIME)(state), }; }; diff --git a/ui/component/fileThumbnail/view.jsx b/ui/component/fileThumbnail/view.jsx index 3a9124950..8d642c00f 100644 --- a/ui/component/fileThumbnail/view.jsx +++ b/ui/component/fileThumbnail/view.jsx @@ -17,6 +17,7 @@ type Props = { doResolveUri: (string) => void, className?: string, watchedPercentage: number, + showPercentage: boolean, }; function FileThumbnail(props: Props) { @@ -29,6 +30,7 @@ function FileThumbnail(props: Props) { allowGifs = false, className, watchedPercentage, + showPercentage, } = props; const passedThumbnail = rawThumbnail && rawThumbnail.trim().replace(/^http:\/\//i, 'https://'); @@ -39,7 +41,7 @@ function FileThumbnail(props: Props) { const hasResolvedClaim = claim !== undefined; const isGif = thumbnail && thumbnail.endsWith('gif'); - const viewedBar = watchedPercentage && ( + const viewedBar = showPercentage && watchedPercentage && (
diff --git a/ui/component/settingContent/view.jsx b/ui/component/settingContent/view.jsx index 6040507ac..4a23f529d 100644 --- a/ui/component/settingContent/view.jsx +++ b/ui/component/settingContent/view.jsx @@ -32,7 +32,7 @@ type Props = { // --- perform --- setClientSetting: (string, boolean | string | number) => void, clearPlayingUri: () => void, - clearContentCache: () => void, + // clearContentCache: () => void, }; export default function SettingContent(props: Props) { @@ -50,20 +50,21 @@ export default function SettingContent(props: Props) { enablePublishPreview, setClientSetting, clearPlayingUri, - clearContentCache, + // clearContentCache, } = props; - const [contentCacheCleared, setContentCacheCleared] = React.useState(false); - const [clearingContentCache, setClearingContentCache] = React.useState(false); - const onClearContentCache = React.useCallback(() => { - setClearingContentCache(true); - clearContentCache(); - // Just a small timer to give the user a visual effect - // that the content is being cleared. - setTimeout(() => { - setClearingContentCache(false); - setContentCacheCleared(true); - }, 2000); - }, [setClearingContentCache, clearContentCache, setContentCacheCleared]); + // feature disabled until styling is ironed out + // const [contentCacheCleared, setContentCacheCleared] = React.useState(false); + // const [clearingContentCache, setClearingContentCache] = React.useState(false); + // const onClearContentCache = React.useCallback(() => { + // setClearingContentCache(true); + // clearContentCache(); + // // Just a small timer to give the user a visual effect + // // that the content is being cleared. + // setTimeout(() => { + // setClearingContentCache(false); + // setContentCacheCleared(true); + // }, 2000); + // }, [setClearingContentCache, clearContentCache, setContentCacheCleared]); return ( <> @@ -118,30 +119,31 @@ export default function SettingContent(props: Props) { checked={hideReposts} /> - -
- setClientSetting(SETTINGS.PERSIST_WATCH_TIME, !persistWatchTime)} - checked={persistWatchTime} - /> -
-
-
+ + {/*
*/} + setClientSetting(SETTINGS.PERSIST_WATCH_TIME, !persistWatchTime)} + checked={persistWatchTime} + /> + {/*
*/} + {/* Disabled until styling is better */} + {/*
*/} + {/*
*/}