implemented storage for video progress

src/App.js

@@ -2,7 +2,6 @@ import { SearchView } from './views/Search';
 import { MovieView } from './views/Movie';
 import { useMovie, MovieProvider } from './hooks/useMovie';
 import './index.css';
-import {store} from './lib/storage/watched.js'
 
 function Router() {
   const { streamData } = useMovie();
@@ -12,13 +11,6 @@ function Router() {
 function App() {
   return (
     <MovieProvider>
-      <div>
-        <p>Testing</p>
-        <button onClick={() => {
-          const data = store.get();
-          data.save();
-        }}>Click me</button>
-      </div>
       <Router />
     </MovieProvider>
   );

src/components/EpisodeSelector.js

@@ -1,11 +1,12 @@
 import React from 'react';
 import { TypeSelector } from './TypeSelector';
 import { NumberSelector } from './NumberSelector';
+import { VideoProgressStore } from '../lib/storage/VideoProgress'
 import './EpisodeSelector.css'
 
 export function EpisodeSelector({ setSelectedSeason, selectedSeason, setEpisode, seasons, episodes, currentSeason, currentEpisode, streamData }) {
     const choices = episodes ? episodes.map(v => {
-        let progressData = JSON.parse(localStorage.getItem('video-progress') || "{}")
+        const progressData = VideoProgressStore.get();
         
         let currentlyAt = 0;
         let totalDuration = 0;

src/components/MovieRow.js

@@ -1,13 +1,13 @@
 import React from 'react'
 import { Arrow } from './Arrow'
-// import { Cross } from './Crosss'
 import { PercentageOverlay } from './PercentageOverlay'
+import { VideoProgressStore } from '../lib/storage/VideoProgress'
 import './MovieRow.css'
 
 // title: string
 // onClick: () => void
 export function MovieRow(props) {
-    const progressData = JSON.parse(localStorage.getItem("video-progress") || "{}")
+    const progressData = VideoProgressStore.get();
     let progress;
     let percentage = null;
     

src/lib/storage/VideoProgress.js

@@ -0,0 +1,44 @@
+import { versionedStoreBuilder } from './base.js';
+
+/*
+version 0
+{
+    [{scraperid}]: {
+        movie: {
+            [{movie-id}]: {
+                full: {
+                    currentlyAt: number,
+                    totalDuration: number,
+                    updatedAt: number, // unix timestamp in ms
+                    meta: FullMetaObject, // no idea whats in here
+                }
+            }
+        },
+        show: {
+            [{show-id}]: {
+                [{season}-{episode}]: {
+                    currentlyAt: number,
+                    totalDuration: number,
+                    updatedAt: number, // unix timestamp in ms
+                    show: {
+                        episode: string,
+                        season: string,
+                    },
+                    meta: FullMetaObject, // no idea whats in here
+                }
+            }
+        }
+    }
+}
+*/
+
+// TODO implement the store into the rest of the codebase
+export const VideoProgressStore = versionedStoreBuilder()
+    .setKey('video-progress')
+    .addVersion({
+        version: 0,
+        create() {
+            return {}
+        }
+    })
+    .build()

src/lib/storage/watched.js

@@ -1,29 +0,0 @@
-import { versionedStoreBuilder } from './base.js';
-
-// TODO implement watched store
-// TODO implement the store into the rest of the codebase
-export const store = versionedStoreBuilder()
-    .setKey('test-store')
-    .addVersion({
-        version: 0,
-    })
-    .addVersion({
-        version: 1,
-        migrate(d) {
-            d.v1 = "v1"
-            return d;
-        },
-    })
-    .addVersion({
-        version: 2,
-        migrate(d) {
-            d.v2 = "v2"
-            return d;
-        },
-        create() {
-            return {
-                v2: "v2"
-            }
-        }
-    })
-    .build()

src/views/Movie.js

@@ -7,6 +7,7 @@ import { useMovie } from '../hooks/useMovie'
 import { VideoElement } from '../components/VideoElement'
 import { EpisodeSelector } from '../components/EpisodeSelector'
 import { getStreamUrl } from '../lib/index'
+import { VideoProgressStore } from '../lib/storage/VideoProgress'
 
 import './Movie.css'
 
@@ -81,26 +82,26 @@ export function MovieView(props) {
     }, [streamData.seasons, streamData.episodes, streamData.type, selectedSeason])
 
     React.useEffect(() => {
-        let ls = JSON.parse(localStorage.getItem("video-progress") || "{}")
+        const progressData = VideoProgressStore.get();
         let key = streamData.type === "show" ? `${season}-${episode}` : "full"
-        let time = ls?.[streamData.source]?.[streamData.type]?.[streamData.slug]?.[key]?.currentlyAt;
+        let time = progressData?.[streamData.source]?.[streamData.type]?.[streamData.slug]?.[key]?.currentlyAt;
         setStartTime(time);
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [baseRouteMatch, showRouteMatch]);
 
     const setProgress = (evt) => {
-        let ls = JSON.parse(localStorage.getItem("video-progress") || "{}")
+        let progressSave = VideoProgressStore.get();
 
-        if (!ls[streamData.source])
+        if (!progressSave[streamData.source])
-            ls[streamData.source] = {}
+            progressSave[streamData.source] = {}
-        if (!ls[streamData.source][streamData.type])
+        if (!progressSave[streamData.source][streamData.type])
-            ls[streamData.source][streamData.type] = {}
+            progressSave[streamData.source][streamData.type] = {}
-        if (!ls[streamData.source][streamData.type][streamData.slug])
+        if (!progressSave[streamData.source][streamData.type][streamData.slug])
-            ls[streamData.source][streamData.type][streamData.slug] = {}
+            progressSave[streamData.source][streamData.type][streamData.slug] = {}
         
         // Store real data
         let key = streamData.type === "show" ? `${season}-${episode}` : "full"
-        ls[streamData.source][streamData.type][streamData.slug][key] = {
+        progressSave[streamData.source][streamData.type][streamData.slug][key] = {
             currentlyAt: Math.floor(evt.currentTarget.currentTime),
             totalDuration: Math.floor(evt.currentTarget.duration),
             updatedAt: Date.now(),
@@ -108,13 +109,13 @@ export function MovieView(props) {
         }
 
         if(streamData.type === "show") {
-            ls[streamData.source][streamData.type][streamData.slug][key].show = {
+            progressSave[streamData.source][streamData.type][streamData.slug][key].show = {
                 season,
                 episode
             }
         }
 
-        localStorage.setItem("video-progress", JSON.stringify(ls))
+        progressSave.save();
     }
 
     return (

src/views/Search.js

@@ -11,6 +11,7 @@ import { Title } from '../components/Title';
 import { TypeSelector } from '../components/TypeSelector';
 import { useMovie } from '../hooks/useMovie';
 import { findContent, getEpisodes, getStreamUrl } from '../lib/index';
+import { VideoProgressStore } from '../lib/storage/VideoProgress'
 
 import './Search.css';
 
@@ -134,7 +135,7 @@ export function SearchView() {
     }, []);
 
     React.useEffect(() => {
-        const progressData = JSON.parse(localStorage.getItem('video-progress') || "{}")
+        const progressData = VideoProgressStore.get();
         let newContinueWatching = []
 
         Object.keys(progressData).forEach((source) => {