Improve how the persist watch time is being stored; add clear cache button.

ui/component/fileThumbnail/index.js

@@ -1,17 +1,12 @@
 import { connect } from 'react-redux';
-import * as SETTINGS from 'constants/settings';
 import { doResolveUri } from 'redux/actions/claims';
-import { makeSelectClientSetting } from 'redux/selectors/settings';
 import { makeSelectClaimForUri } from 'redux/selectors/claims';
-import { makeSelectContentPositionForUri, makeSelectContentPositionPersistedForUri } from 'redux/selectors/content';
+import { makeSelectContentPositionForUri } from 'redux/selectors/content';
 import CardMedia from './view';
 
 const select = (state, props) => {
-  const persistWatchTime = makeSelectClientSetting(SETTINGS.PERSIST_WATCH_TIME)(state);
   return {
-    position: persistWatchTime
-      ? makeSelectContentPositionPersistedForUri(props.uri)(state)
-      : makeSelectContentPositionForUri(props.uri)(state),
+    position: makeSelectContentPositionForUri(props.uri)(state),
     claim: makeSelectClaimForUri(props.uri)(state),
   };
 };

ui/component/fileThumbnail/view.jsx

@@ -16,7 +16,7 @@ type Props = {
   claim: ?StreamClaim,
   doResolveUri: (string) => void,
   className?: string,
-  position?: number,
+  position: number | null,
 };
 
 function FileThumbnail(props: Props) {
@@ -32,9 +32,12 @@ function FileThumbnail(props: Props) {
 
   const media = claim && claim.value && (claim.value.video || claim.value.audio);
   const duration = media && media.duration;
-  const viewedBar = position && duration && (
+  // When the position is -1, it means the user has watched the entire
+  // video and he/she is using the persist watch setting.
+  const watchedPercentage = position === -1 ? 100 : ((position || 0) / (duration || 1)) * 100 || 0;
+  const viewedBar = position && (
     <div className="file-thumbnail__viewed-bar">
-      <div className="file-thumbnail__viewed-bar-progress" style={{ width: (position / duration) * 100 + '%' }} />
+      <div className="file-thumbnail__viewed-bar-progress" style={{ width: `${watchedPercentage}%` }} />
     </div>
   );
 

ui/component/settingContent/index.js

@@ -1,7 +1,7 @@
 import { connect } from 'react-redux';
 import { selectMyChannelUrls } from 'redux/selectors/claims';
 import * as SETTINGS from 'constants/settings';
-import { doSetPlayingUri } from 'redux/actions/content';
+import { doSetPlayingUri, clearContentCache } from 'redux/actions/content';
 import { doSetClientSetting } from 'redux/actions/settings';
 import { selectShowMatureContent, makeSelectClientSetting } from 'redux/selectors/settings';
 import { selectUserVerifiedEmail } from 'redux/selectors/user';
@@ -25,6 +25,7 @@ const select = (state) => ({
 const perform = (dispatch) => ({
   setClientSetting: (key, value) => dispatch(doSetClientSetting(key, value)),
   clearPlayingUri: () => dispatch(doSetPlayingUri({ uri: null })),
+  clearContentCache: () => dispatch(clearContentCache()),
 });
 
 export default connect(select, perform)(SettingContent);

ui/component/settingContent/view.jsx

@@ -32,6 +32,7 @@ type Props = {
   // --- perform ---
   setClientSetting: (string, boolean | string | number) => void,
   clearPlayingUri: () => void,
+  clearContentCache: () => void,
 };
 
 export default function SettingContent(props: Props) {
@@ -49,6 +50,7 @@ export default function SettingContent(props: Props) {
     enablePublishPreview,
     setClientSetting,
     clearPlayingUri,
+    clearContentCache,
   } = props;
 
   return (
@@ -105,12 +107,23 @@ export default function SettingContent(props: Props) {
               />
             </SettingsRow>
             <SettingsRow title={__('Persist watch time')} subtitle={__(HELP.PERSIST_WATCH_TIME)}>
-              <FormField
-                type="checkbox"
-                name="persist_watch_time"
-                onChange={() => setClientSetting(SETTINGS.PERSIST_WATCH_TIME, !persistWatchTime)}
-                checked={persistWatchTime}
-              />
+              <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="Clear Cache"
+                  onClick={clearContentCache}
+                  disabled={false}
+                />
+              </div>
             </SettingsRow>
             <SettingsRow title={__('Show mature content')} subtitle={__(HELP.SHOW_MATURE)}>
               <FormField

ui/constants/action_types.js

@@ -143,6 +143,7 @@ export const SET_PRIMARY_URI = 'SET_PRIMARY_URI';
 export const SET_PLAYING_URI = 'SET_PLAYING_URI';
 export const SET_CONTENT_POSITION = 'SET_CONTENT_POSITION';
 export const CLEAR_CONTENT_POSITION = 'CLEAR_CONTENT_POSITION';
+export const CLEAR_CONTENT_CACHE = 'CLEAR_CONTENT_CACHE';
 export const SET_CONTENT_LAST_VIEWED = 'SET_CONTENT_LAST_VIEWED';
 export const CLEAR_CONTENT_HISTORY_URI = 'CLEAR_CONTENT_HISTORY_URI';
 export const CLEAR_CONTENT_HISTORY_ALL = 'CLEAR_CONTENT_HISTORY_ALL';

ui/redux/actions/content.js

@@ -239,9 +239,18 @@ export function clearPosition(uri: string) {
   return (dispatch: Dispatch, getState: () => any) => {
     const state = getState();
     const claim = makeSelectClaimForUri(uri)(state);
+    const persistWatchTime = makeSelectClientSetting(SETTINGS.PERSIST_WATCH_TIME)(state);
     const { claim_id: claimId, txid, nout } = claim;
     const outpoint = `${txid}:${nout}`;
 
+    if (persistWatchTime) {
+      dispatch({
+        type: ACTIONS.SET_CONTENT_POSITION,
+        data: { claimId, outpoint, position: -1 },
+      });
+      return;
+    }
+
     dispatch({
       type: ACTIONS.CLEAR_CONTENT_POSITION,
       data: { claimId, outpoint },
@@ -249,6 +258,12 @@ export function clearPosition(uri: string) {
   };
 }
 
+export function clearContentCache() {
+  return {
+    type: ACTIONS.CLEAR_CONTENT_CACHE,
+  };
+}
+
 export function doSetContentHistoryItem(uri: string) {
   return (dispatch: Dispatch) => {
     dispatch({

ui/redux/reducers/content.js

@@ -55,7 +55,6 @@ reducers[ACTIONS.SET_CONTENT_POSITION] = (state, action) => {
       [claimId]: {
         ...state.positions[claimId],
         [outpoint]: position,
-        [`${outpoint}:persisted`]: position,
       },
     },
   };
@@ -91,6 +90,13 @@ reducers[ACTIONS.CLEAR_CONTENT_POSITION] = (state, action) => {
   }
 };
 
+reducers[ACTIONS.CLEAR_CONTENT_CACHE] = (state, action) => {
+  return {
+    ...state,
+    positions: {},
+  };
+};
+
 reducers[ACTIONS.SET_CONTENT_LAST_VIEWED] = (state, action) => {
   const { uri, lastViewed } = action.data;
   const { history } = state;

ui/redux/reducers/settings.js

@@ -67,6 +67,7 @@ const defaultState = {
     [SETTINGS.FLOATING_PLAYER]: true,
     [SETTINGS.AUTO_DOWNLOAD]: true,
     [SETTINGS.HIDE_REPOSTS]: false,
+    [SETTINGS.PERSIST_WATCH_TIME]: false,
 
     // OS
     [SETTINGS.AUTO_LAUNCH]: true,

ui/redux/selectors/content.js

@@ -63,16 +63,6 @@ export const makeSelectContentPositionForUri = (uri: string) =>
     return state.positions[id] ? state.positions[id][outpoint] : null;
   });
 
-export const makeSelectContentPositionPersistedForUri = (uri: string) =>
-  createSelector(selectState, makeSelectClaimForUri(uri), (state, claim) => {
-    if (!claim) {
-      return null;
-    }
-    const outpoint = `${claim.txid}:${claim.nout}:persisted`;
-    const id = claim.claim_id;
-    return state.positions[id] ? state.positions[id][outpoint] : null;
-  });
-
 export const selectHistory = createSelector(selectState, (state) => state.history || []);
 
 export const selectHistoryPageCount = createSelector(selectHistory, (history) =>

ui/scss/component/_settings.scss

@@ -18,3 +18,13 @@
     margin-left: 2.2rem;
   }
 }
+
+.settings {
+  &__persistWatchTimeCheckbox {
+    display: flex;
+    justify-content: end;
+  }
+  &__persistWatchTimeClearCache {
+    text-align: right;
+  }
+}