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..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,13 +15,31 @@ import AddCollection from './AddCollection.js';
import ImportEpwing from './ImportEpwing.js';
const VideoListItem = (props) => {
- const { videoId, collection, name } = props;
+ const { videoId, collection, name, playbackPosition} = props;
const hasSubs = collection.videos.get(videoId).subtitleTracks.size > 0;
+ // 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;
+ }
+
+ // Build the timestamp for time watched.
+ var time_stamp = "";
+ if (position > 2.0) { // Only give a time stamp if enough has been watched.
+ time_stamp += "Watched ";
+ time_stamp += secondsToTimestamp(position);
+ }
+
return (