feat(videodetail): show continue watching button

jwplayer · Jun 23, 2021 · 9f4c2d9 · 9f4c2d9
1 parent 77fe5bd
commit 9f4c2d9
Show file tree

Hide file tree

Showing 8 changed files with 43 additions and 2 deletions.
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -12,6 +12,7 @@ $large-button-height: 40px;
   align-items: center;
   height: $medium-button-height;
   padding: 0 16px;
+  overflow: hidden;
 
   font-family: theme.$body-alt-font-family;
   font-weight: 700;

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -9,6 +9,7 @@ type Color = 'default' | 'primary';
 type Variant = 'contained' | 'outlined' | 'text';
 
 type Props = {
+  children?: React.ReactNode;
   label: string;
   active?: boolean;
   color?: Color;
@@ -24,6 +25,7 @@ type Props = {
 
 const Button: React.FC<Props> = ({
   label,
+  children,
   color = 'default',
   startIcon,
   fullWidth = false,
@@ -47,11 +49,13 @@ const Button: React.FC<Props> = ({
     <NavLink className={className} to={to} activeClassName={styles.active} {...rest} exact>
       {icon}
       {span}
+      {children}
     </NavLink>
   ) : (
     <button className={className} onClick={onClick} {...rest}>
       {icon}
       {span}
+      {children}
     </button>
   );
 };

diff --git a/src/components/Video/Video.module.scss b/src/components/Video/Video.module.scss
@@ -259,3 +259,19 @@
     transition: opacity 0.6s ease;
   }
 }
+
+.progressRail {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 4px;
+  background-color: rgba(variables.$black, 0.4);
+}
+
+.progress {
+  position: absolute;
+  left: 0;
+  height: 4px;
+  background-color: variables.$white;
+}
diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
@@ -29,6 +29,7 @@ type Props = {
   feedId?: string;
   trailerItem?: PlaylistItem;
   play: boolean;
+  progress?: number;
   startPlay: () => void;
   goBack: () => void;
   onComplete?: () => void;
@@ -53,6 +54,7 @@ const Video: React.FC<Props> = ({
   trailerItem,
   play,
   startPlay,
+  progress,
   goBack,
   onComplete,
   poster,
@@ -123,12 +125,18 @@ const Video: React.FC<Props> = ({
               color="primary"
               variant="contained"
               size="large"
-              label={t('video:start_watching')}
+              label={typeof progress === 'number' ? t('video:continue_watching') : t('video:start_watching')}
               startIcon={<Play />}
               onClick={startPlay}
               active={play}
               fullWidth
-            />
+            >
+              {progress && (
+                <div className={styles.progressRail}>
+                  <div className={styles.progress} style={{ width: `${progress * 100}%` }} />
+                </div>
+              )}
+            </Button>
           </div>
           <div className={styles.otherButtons}>
             {trailerItem && (

diff --git a/src/i18n/locales/en_US/video.json b/src/i18n/locales/en_US/video.json
@@ -1,6 +1,7 @@
 {
   "add_to_favorites": "Add to favorites",
   "all_seasons": "All seasons",
+  "continue_watching": "Continue watching",
   "copied_url": "Copied url",
   "current_episode": "Current episode",
   "currently_playing": "Currently playing",

diff --git a/src/i18n/locales/nl_NL/video.json b/src/i18n/locales/nl_NL/video.json
@@ -1,6 +1,7 @@
 {
   "add_to_favorites": "",
   "all_seasons": "",
+  "continue_watching": "",
   "copied_url": "",
   "current_episode": "",
   "currently_playing": "",

diff --git a/src/screens/Movie/Movie.tsx b/src/screens/Movie/Movie.tsx
@@ -19,6 +19,7 @@ import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 import useRecommendedPlaylist from '../../hooks/useRecommendationsPlaylist';
 
 import styles from './Movie.module.scss';
+import { watchHistoryStore } from '../../stores/WatchHistoryStore';
 
 type MovieRouteParams = {
   id: string;
@@ -46,6 +47,9 @@ const Movie = ({
   const [playTrailer, setPlayTrailer] = useState<boolean>(false);
   const enableSharing: boolean = config.options.enableSharing === true;
 
+  const watchHistory = watchHistoryStore.useState((s) => s.watchHistory);
+  const watchHistoryItem = item && watchHistory.find(({ mediaid }) => mediaid === item.mediaid);
+
   useBlurImageUpdater(item);
 
   const isFavorited = !!item && hasItem(item);
@@ -131,6 +135,7 @@ const Movie = ({
         startPlay={startPlay}
         goBack={goBack}
         onComplete={handleComplete}
+        progress={watchHistoryItem?.progress}
         poster={posterFading ? 'fading' : 'normal'}
         enableSharing={enableSharing}
         hasShared={hasShared}

diff --git a/src/screens/Series/Series.tsx b/src/screens/Series/Series.tsx
@@ -21,6 +21,7 @@ import { filterSeries, getFiltersFromSeries } from '../../utils/collection';
 import LoadingOverlay from '../../components/LoadingOverlay/LoadingOverlay';
 
 import styles from './Series.module.scss';
+import { watchHistoryStore } from '../../stores/WatchHistoryStore';
 
 type SeriesRouteParams = {
   id: string;
@@ -58,6 +59,9 @@ const Series = ({
   const [playTrailer, setPlayTrailer] = useState<boolean>(false);
   const enableSharing: boolean = config.options.enableSharing === true;
 
+  const watchHistory = watchHistoryStore.useState((s) => s.watchHistory);
+  const watchHistoryItem = item && watchHistory.find(({ mediaid }) => mediaid === item.mediaid);
+
   useBlurImageUpdater(item);
 
   const isFavorited = !!item && hasItem(item);
@@ -147,6 +151,7 @@ const Series = ({
         feedId={feedId ?? undefined}
         trailerItem={trailerItem}
         play={play}
+        progress={watchHistoryItem?.progress}
         startPlay={startPlay}
         goBack={goBack}
         onComplete={handleComplete}