From a95bc17a49aa43f566584734100511af4dd06350 Mon Sep 17 00:00:00 2001
From: Nathan Vegdahl <cessen@cessen.com>
Date: Sat, 3 Aug 2019 19:28:01 +0900
Subject: [PATCH 1/4] Added "Watched <time stamp>" text to library list items.

This way you can easily see what episodes of shows you've already
watched, or are in the middle of.
---
 src/components/App.css |  7 +++++++
 src/components/App.js  | 34 ++++++++++++++++++++++++++++------
 src/library/index.js   | 16 ++++++++++++++++
 src/mainActions.js     |  2 +-
 4 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/src/components/App.css b/src/components/App.css
index 33854b1..173e266 100644
--- a/src/components/App.css
+++ b/src/components/App.css
@@ -96,6 +96,13 @@
   color: #888;
 }
 
+.App-library-list-item-time-stamp {
+  color: #888;
+  float: right;
+  margin-right: 1em;
+  font-size: 0.8em;
+}
+
 .App-library-list-item:last-child {
   border-bottom: 1px solid #ddd;
 }
diff --git a/src/components/App.js b/src/components/App.js
index 87068cd..82bb5d2 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -13,13 +13,35 @@ import AddCollection from './AddCollection.js';
 import ImportEpwing from './ImportEpwing.js';
 
 const VideoListItem = (props) => {
-  const { videoId, collection, name } = props;
+  const { videoId, collection, name, pos} = props;
   const hasSubs = collection.videos.get(videoId).subtitleTracks.size > 0;
+  const pos_live = collection.videos.get(videoId).playbackPosition;
+
+  // Build timestamp for how much of the episode has been played.
+  var pos_real = pos;
+  if (pos_live != null) {
+    pos_real = pos_live
+  }
+  const hrs = Math.floor(pos_real / (60*60));
+  pos_real -= hrs * 60 * 60;
+  const mnts = Math.floor(pos_real / 60);
+  pos_real -= mnts * 60;
+  const secs = Math.floor(pos_real);
+  var time_stamp = "";
+  if (hrs > 0 || mnts > 0 || secs > 0) {
+    time_stamp += "Watched ";
+    if (hrs > 0) {
+      time_stamp += ("00" + hrs).slice(-2);
+      time_stamp += ("00" + hrs).slice(-2) + ":";
+    }
+    time_stamp += ("00" + mnts).slice(-2) + ":";
+    time_stamp += ("00" + secs).slice(-2);
+  }
 
   return (
     <li className={'App-library-list-item ' + (hasSubs ? 'App-library-list-item-has-subs' : 'App-library-list-item-no-subs')}>
       <Link to={'/player/' + encodeURIComponent(collection.locator) + '/' + encodeURIComponent(videoId)}>
-        {name}
+        {name} <span className="App-library-list-item-time-stamp">{time_stamp}</span>
       </Link>
     </li>
   );
@@ -68,21 +90,21 @@ class App extends Component {
                           {title.parts.seasonEpisodes.length ? (
                             <ul>
                               {title.parts.seasonEpisodes.map(se => (
-                                <VideoListItem collection={collection} videoId={se.videoId} name={'Season ' + se.seasonNumber + ' Episode ' + se.episodeNumber} key={se.videoId} />
+                                <VideoListItem collection={collection} videoId={se.videoId} name={'Season ' + se.seasonNumber + ' Episode ' + se.episodeNumber} pos={se.playbackPosition} key={se.videoId} />
                               ))}
                             </ul>
                           ) : null}
                           {title.parts.episodes.length ? (
                             <ul>
                               {title.parts.episodes.map(ep => (
-                                <VideoListItem collection={collection} videoId={ep.videoId} name={'Episode ' + ep.episodeNumber} key={ep.videoId} />
+                                <VideoListItem collection={collection} videoId={ep.videoId} name={'Episode ' + ep.episodeNumber} pos={ep.playbackPosition} key={ep.videoId} />
                               ))}
                             </ul>
                           ) : null}
                           {title.parts.others.length ? (
                             <ul>
                               {title.parts.others.map(other => (
-                                <VideoListItem collection={collection} videoId={other.videoId} name={other.name} key={other.name} />
+                                <VideoListItem collection={collection} videoId={other.videoId} name={other.name} pos={other.playbackPosition} key={other.name} />
                               ))}
                             </ul>
                           ) : null}
@@ -112,7 +134,7 @@ class App extends Component {
                                     </Link>
                                   </li>
                                 ) : (
-                                  <VideoListItem collection={collection} videoId={title.videoId} name={title.name} key={title.name} />
+                                  <VideoListItem collection={collection} videoId={title.videoId} name={title.name} pos={title.playbackPosition} key={title.name} />
                                 )
                               )}
                             </ul>
diff --git a/src/library/index.js b/src/library/index.js
index 61cef70..a6c50ed 100644
--- a/src/library/index.js
+++ b/src/library/index.js
@@ -8,6 +8,7 @@ import { ensureKuromojiLoaded, createAutoAnnotatedText } from '../util/analysis'
 import { detectIso6393 } from '../util/languages';
 import { createTimeRangeChunk, createTimeRangeChunkSet } from '../util/chunk';
 import { extractAudio, extractFrameImage } from '../util/ffmpeg';
+import createStorageBackend from '../storage';
 
 const LOCAL_PREFIX = 'local:';
 
@@ -108,6 +109,16 @@ const listDirs = async (dir) => {
 };
 
 export const getCollectionIndex = async (collectionLocator) => {
+  const storage = await createStorageBackend();
+  const playbackPos = async (vid_id) => {
+      const positionStr = await storage.getItemMaybe('playback_position/' + encodeURIComponent(collectionLocator) + '/' + encodeURIComponent(vid_id));
+      if (!positionStr) {
+        return 0;
+      } else {
+        return JSON.parse(positionStr);
+      }
+  };
+
   if (collectionLocator.startsWith(LOCAL_PREFIX)) {
     const baseDirectory = collectionLocator.slice(LOCAL_PREFIX.length);
 
@@ -129,6 +140,7 @@ export const getCollectionIndex = async (collectionLocator) => {
         name: vid.name,
         series: false,
         videoId: vid.id,
+        playbackPosition: await playbackPos(vid.id),
         parts: null,
       });
     }
@@ -157,6 +169,7 @@ export const getCollectionIndex = async (collectionLocator) => {
           name: dir,
           series: false,
           videoId: vids[0].id,
+          playbackPosition: await playbackPos(vids[0].id),
           parts: null,
         });
       } else {
@@ -172,6 +185,7 @@ export const getCollectionIndex = async (collectionLocator) => {
             seasonEpisodes.push({
               seasonNumber: sNum,
               episodeNumber: eNum,
+              playbackPosition: await playbackPos(vid.id),
               videoId: vid.id,
             });
           } else {
@@ -180,11 +194,13 @@ export const getCollectionIndex = async (collectionLocator) => {
               const eNum = +(eMatch[1]);
               episodes.push({
                 episodeNumber: eNum,
+                playbackPosition: await playbackPos(vid.id),
                 videoId: vid.id,
               });
             } else {
               others.push({
                 name: vid.name,
+                playbackPosition: await playbackPos(vid.id),
                 videoId: vid.id,
               });
             }
diff --git a/src/mainActions.js b/src/mainActions.js
index 12b9fd4..e06d299 100644
--- a/src/mainActions.js
+++ b/src/mainActions.js
@@ -53,7 +53,7 @@ const VideoRecord = new Record({
   name: undefined,
   videoURL: undefined,
   subtitleTracks: new IMap(), // id -> SubtitleTrackRecord
-  playbackPosition: 0,
+  playbackPosition: null,
   loadingSubs: false,
 });
 

From 7c430cd54555c4f497e19621e6a818b3b0f15944 Mon Sep 17 00:00:00 2001
From: Nathan Vegdahl <cessen@cessen.com>
Date: Sat, 3 Aug 2019 19:47:55 +0900
Subject: [PATCH 2/4] Fix silly mistake with a duplicate line of code.

---
 src/components/App.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/App.js b/src/components/App.js
index 82bb5d2..b4e6f54 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -31,7 +31,6 @@ const VideoListItem = (props) => {
   if (hrs > 0 || mnts > 0 || secs > 0) {
     time_stamp += "Watched ";
     if (hrs > 0) {
-      time_stamp += ("00" + hrs).slice(-2);
       time_stamp += ("00" + hrs).slice(-2) + ":";
     }
     time_stamp += ("00" + mnts).slice(-2) + ":";

From 6a2d9752bf3f0e4b7fb6a06a6ee3c8afdda1e32f Mon Sep 17 00:00:00 2001
From: Nathan Vegdahl <cessen@cessen.com>
Date: Thu, 2 Jan 2020 13:02:02 +0900
Subject: [PATCH 3/4] Fixed bug with some videos not showing a watched amount.

---
 src/library/index.js | 10 +++++-----
 src/mainActions.js   |  3 +++
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/library/index.js b/src/library/index.js
index a6c50ed..85dacf5 100644
--- a/src/library/index.js
+++ b/src/library/index.js
@@ -140,8 +140,8 @@ export const getCollectionIndex = async (collectionLocator) => {
         name: vid.name,
         series: false,
         videoId: vid.id,
-        playbackPosition: await playbackPos(vid.id),
         parts: null,
+        playbackPosition: await playbackPos(vid.id),
       });
     }
 
@@ -169,8 +169,8 @@ export const getCollectionIndex = async (collectionLocator) => {
           name: dir,
           series: false,
           videoId: vids[0].id,
-          playbackPosition: await playbackPos(vids[0].id),
           parts: null,
+          playbackPosition: await playbackPos(vids[0].id),
         });
       } else {
         const seasonEpisodes = [];
@@ -185,8 +185,8 @@ export const getCollectionIndex = async (collectionLocator) => {
             seasonEpisodes.push({
               seasonNumber: sNum,
               episodeNumber: eNum,
-              playbackPosition: await playbackPos(vid.id),
               videoId: vid.id,
+              playbackPosition: await playbackPos(vid.id),
             });
           } else {
             const eMatch = EPISODE_PATTERN.exec(vid.name);
@@ -194,14 +194,14 @@ export const getCollectionIndex = async (collectionLocator) => {
               const eNum = +(eMatch[1]);
               episodes.push({
                 episodeNumber: eNum,
-                playbackPosition: await playbackPos(vid.id),
                 videoId: vid.id,
+                playbackPosition: await playbackPos(vid.id),
               });
             } else {
               others.push({
                 name: vid.name,
-                playbackPosition: await playbackPos(vid.id),
                 videoId: vid.id,
+                playbackPosition: await playbackPos(vid.id),
               });
             }
           }
diff --git a/src/mainActions.js b/src/mainActions.js
index e06d299..dede70a 100644
--- a/src/mainActions.js
+++ b/src/mainActions.js
@@ -46,6 +46,7 @@ const TitleRecord = new Record({
   series: undefined,
   videoId: undefined, // only defined if not a series
   parts: undefined, // only defined if a series
+  playbackPosition: undefined,
 });
 
 const VideoRecord = new Record({
@@ -115,6 +116,7 @@ export default class MainActions {
         name: vid.name,
         videoURL: vid.url,
         subtitleTracks: new IMap(subTrackKVs),
+        playbackPosition: vid.playbackPosition,
         // remaining fields are OK to leave as default
       })]);
     }
@@ -126,6 +128,7 @@ export default class MainActions {
         series: title.series,
         videoId: title.videoId, // only defined if not a series
         parts: title.parts, // only defined if a series
+        playbackPosition: title.playbackPosition,
       }));
     }
 

From a31e8a8b21f8b795ceec23df276caab630a84cf2 Mon Sep 17 00:00:00 2001
From: Nathan Vegdahl <cessen@cessen.com>
Date: Thu, 2 Jan 2020 13:23:31 +0900
Subject: [PATCH 4/4] Nicer timestamps, and some code cleanup.

---
 src/components/App.js | 41 ++++++++++++++++++++---------------------
 src/util/string.js    | 23 +++++++++++++++++++++++
 2 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/src/components/App.js b/src/components/App.js
index b4e6f54..aea64e4 100644
--- a/src/components/App.js
+++ b/src/components/App.js
@@ -4,6 +4,8 @@ import { ScrollContext } from 'react-router-scroll-4';
 
 import { extractAudioFromVideo, extractFrameImageFromVideo } from '../library';
 
+import { secondsToTimestamp } from '../util/string';
+
 import './App.css';
 
 import WidthWrapper from './WidthWrapper.js';
@@ -13,28 +15,25 @@ import AddCollection from './AddCollection.js';
 import ImportEpwing from './ImportEpwing.js';
 
 const VideoListItem = (props) => {
-  const { videoId, collection, name, pos} = props;
+  const { videoId, collection, name, playbackPosition} = props;
   const hasSubs = collection.videos.get(videoId).subtitleTracks.size > 0;
-  const pos_live = collection.videos.get(videoId).playbackPosition;
 
-  // Build timestamp for how much of the episode has been played.
-  var pos_real = pos;
-  if (pos_live != null) {
-    pos_real = pos_live
+  // Get the current playback position.  We first check if we have a "live"
+  // version of the position, if the user has visited the video this session.
+  // Otherwise we get the position that was loaded from the database on
+  // application launch.
+  var position;
+  if (collection.videos.get(videoId).playbackPosition != null) {
+    position = collection.videos.get(videoId).playbackPosition;
+  } else {
+    position = playbackPosition;
   }
-  const hrs = Math.floor(pos_real / (60*60));
-  pos_real -= hrs * 60 * 60;
-  const mnts = Math.floor(pos_real / 60);
-  pos_real -= mnts * 60;
-  const secs = Math.floor(pos_real);
+
+  // Build the timestamp for time watched.
   var time_stamp = "";
-  if (hrs > 0 || mnts > 0 || secs > 0) {
+  if (position > 2.0) { // Only give a time stamp if enough has been watched.
     time_stamp += "Watched ";
-    if (hrs > 0) {
-      time_stamp += ("00" + hrs).slice(-2) + ":";
-    }
-    time_stamp += ("00" + mnts).slice(-2) + ":";
-    time_stamp += ("00" + secs).slice(-2);
+    time_stamp += secondsToTimestamp(position);
   }
 
   return (
@@ -89,21 +88,21 @@ class App extends Component {
                           {title.parts.seasonEpisodes.length ? (
                             <ul>
                               {title.parts.seasonEpisodes.map(se => (
-                                <VideoListItem collection={collection} videoId={se.videoId} name={'Season ' + se.seasonNumber + ' Episode ' + se.episodeNumber} pos={se.playbackPosition} key={se.videoId} />
+                                <VideoListItem collection={collection} videoId={se.videoId} name={'Season ' + se.seasonNumber + ' Episode ' + se.episodeNumber} playbackPosition={se.playbackPosition} key={se.videoId} />
                               ))}
                             </ul>
                           ) : null}
                           {title.parts.episodes.length ? (
                             <ul>
                               {title.parts.episodes.map(ep => (
-                                <VideoListItem collection={collection} videoId={ep.videoId} name={'Episode ' + ep.episodeNumber} pos={ep.playbackPosition} key={ep.videoId} />
+                                <VideoListItem collection={collection} videoId={ep.videoId} name={'Episode ' + ep.episodeNumber} playbackPosition={ep.playbackPosition} key={ep.videoId} />
                               ))}
                             </ul>
                           ) : null}
                           {title.parts.others.length ? (
                             <ul>
                               {title.parts.others.map(other => (
-                                <VideoListItem collection={collection} videoId={other.videoId} name={other.name} pos={other.playbackPosition} key={other.name} />
+                                <VideoListItem collection={collection} videoId={other.videoId} name={other.name} playbackPosition={other.playbackPosition} key={other.name} />
                               ))}
                             </ul>
                           ) : null}
@@ -133,7 +132,7 @@ class App extends Component {
                                     </Link>
                                   </li>
                                 ) : (
-                                  <VideoListItem collection={collection} videoId={title.videoId} name={title.name} pos={title.playbackPosition} key={title.name} />
+                                  <VideoListItem collection={collection} videoId={title.videoId} name={title.name} playbackPosition={title.playbackPosition} key={title.name} />
                                 )
                               )}
                             </ul>
diff --git a/src/util/string.js b/src/util/string.js
index abf90f1..772e88a 100644
--- a/src/util/string.js
+++ b/src/util/string.js
@@ -8,3 +8,26 @@ export const removePrefix = (s, prefix) => {
 }
 
 export const cpSlice = (s, cpBegin, cpEnd) => [...s].slice(cpBegin, cpEnd).join('');
+
+// Converts from seconds (float) to a nicely formatted timestamp (string).
+//
+// The timestamp will look like this: "hh:mm:ss", but will omit unneeded digits.
+// For example, if the input is 61 second, the timestamp will be "1:01".
+export const secondsToTimestamp = (seconds) => {
+  const hrs = Math.floor(seconds / (60*60));
+  seconds -= hrs * 60 * 60;
+  const mnts = Math.floor(seconds / 60);
+  seconds -= mnts * 60;
+  const secs = Math.floor(seconds);
+
+  var time_stamp = "";
+  if (hrs > 0) {
+    time_stamp += hrs + ":";
+    time_stamp += ("00" + mnts).slice(-2) + ":";
+  } else {
+    time_stamp += mnts + ":";
+  }
+  time_stamp += ("00" + secs).slice(-2);
+
+  return time_stamp;
+}
\ No newline at end of file