watch time ux

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--"
 }

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),
   };
 };
 

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 && (
     <div className="file-thumbnail__viewed-bar">
       <div className="file-thumbnail__viewed-bar-progress" style={{ width: `${watchedPercentage}%` }} />
     </div>

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}
               />
             </SettingsRow>
-            <SettingsRow title={__('Persist watch time')} subtitle={__(HELP.PERSIST_WATCH_TIME)}>
-              <div className="settings__persistWatchTimeCheckbox">
-                <FormField
-                  type="checkbox"
-                  name="persist_watch_time"
-                  onChange={() => setClientSetting(SETTINGS.PERSIST_WATCH_TIME, !persistWatchTime)}
-                  checked={persistWatchTime}
-                />
-              </div>
-              <div className="settings__persistWatchTimeClearCache">
-                <Button
-                  button="primary"
-                  icon={ICONS.ALERT}
-                  label={
-                    contentCacheCleared
-                      ? __('Views cleared')
-                      : clearingContentCache
-                      ? __('Clearing...')
-                      : __('Clear Views')
-                  }
-                  onClick={onClearContentCache}
-                  disabled={clearingContentCache || contentCacheCleared}
-                />
-              </div>
+            <SettingsRow title={__('Show Video View Progress')} subtitle={__(HELP.PERSIST_WATCH_TIME)}>
+              {/* <div className="settings__persistWatchTimeCheckbox"> */}
+              <FormField
+                type="checkbox"
+                name="persist_watch_time"
+                onChange={() => setClientSetting(SETTINGS.PERSIST_WATCH_TIME, !persistWatchTime)}
+                checked={persistWatchTime}
+              />
+              {/* </div> */}
+              {/* Disabled until styling is better */}
+              {/* <div className="settings__persistWatchTimeClearCache"> */}
+              {/*  <Button */}
+              {/*    button="primary" */}
+              {/*    icon={ICONS.ALERT} */}
+              {/*    label={ */}
+              {/*      contentCacheCleared */}
+              {/*        ? __('Views cleared') */}
+              {/*        : clearingContentCache */}
+              {/*        ? __('Clearing...') */}
+              {/*        : __('Clear Views') */}
+              {/*    } */}
+              {/*    onClick={onClearContentCache} */}
+              {/*    disabled={clearingContentCache || contentCacheCleared} */}
+              {/*  /> */}
+              {/* </div> */}
             </SettingsRow>
             <SettingsRow title={__('Show mature content')} subtitle={__(HELP.SHOW_MATURE)}>
               <FormField
@@ -229,7 +231,7 @@ const HELP = {
   AUTOPLAY_MEDIA: 'Autoplay video and audio files when navigating to a file.',
   AUTOPLAY_NEXT: 'Autoplay the next related item when a file (video or audio) finishes playing.',
   HIDE_REPOSTS: 'You will not see reposts by people you follow or receive email notifying about them.',
-  PERSIST_WATCH_TIME: 'Persist the watch time of the videos you have fully. This will not erase or hide any blockchain activity or downloads.',
+  PERSIST_WATCH_TIME: 'Display view progress on thumbnail. This setting will not hide any blockchain activity or downloads.',
   SHOW_MATURE: 'Mature content may include nudity, intense sexuality, profanity, or other adult content. By displaying mature content, you are affirming you are of legal age to view mature content in your country or jurisdiction.  ',
   MAX_PURCHASE_PRICE: 'This will prevent you from purchasing any content over a certain cost, as a safety measure.',
   ONLY_CONFIRM_OVER_AMOUNT: '', // [feel redundant. Disable for now] "When this option is chosen, LBRY won't ask you to confirm purchases or tips below your chosen amount.",

ui/scss/component/_file-thumbnail.scss

@@ -5,7 +5,6 @@
   width: 100%;
   height: 5px;
   background-color: var(--color-gray-7);
-  opacity: 0.5;
 }
 
 .file-thumbnail__viewed-bar-progress {

ui/scss/component/_settings.scss

@@ -27,4 +27,5 @@
 
 .settings__persistWatchTimeCheckbox {
   text-align: right;
+  padding-top: var(--spacing-m);
 }