From ff1c0d65d6dae6e94bd6441c0dcf6ae9dd2d1083 Mon Sep 17 00:00:00 2001 From: mrjvs Date: Mon, 25 Oct 2021 21:16:10 +0200 Subject: [PATCH] implemented storage for video progress --- src/App.js | 8 ------ src/components/EpisodeSelector.js | 3 ++- src/components/MovieRow.js | 4 +-- src/lib/storage/VideoProgress.js | 44 +++++++++++++++++++++++++++++++ src/lib/storage/watched.js | 29 -------------------- src/views/Movie.js | 25 +++++++++--------- src/views/Search.js | 3 ++- 7 files changed, 63 insertions(+), 53 deletions(-) create mode 100644 src/lib/storage/VideoProgress.js delete mode 100644 src/lib/storage/watched.js diff --git a/src/App.js b/src/App.js index 91ca1a56..8e248937 100644 --- a/src/App.js +++ b/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 ( -
-

Testing

- -
); diff --git a/src/components/EpisodeSelector.js b/src/components/EpisodeSelector.js index a478873d..9d3cc4e5 100644 --- a/src/components/EpisodeSelector.js +++ b/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; diff --git a/src/components/MovieRow.js b/src/components/MovieRow.js index b0d62e3c..60b6783e 100644 --- a/src/components/MovieRow.js +++ b/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; diff --git a/src/lib/storage/VideoProgress.js b/src/lib/storage/VideoProgress.js new file mode 100644 index 00000000..914962a0 --- /dev/null +++ b/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() diff --git a/src/lib/storage/watched.js b/src/lib/storage/watched.js deleted file mode 100644 index 6d5264d2..00000000 --- a/src/lib/storage/watched.js +++ /dev/null @@ -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() diff --git a/src/views/Movie.js b/src/views/Movie.js index c47522cb..6f6561b9 100644 --- a/src/views/Movie.js +++ b/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]) - ls[streamData.source] = {} - if (!ls[streamData.source][streamData.type]) - ls[streamData.source][streamData.type] = {} - if (!ls[streamData.source][streamData.type][streamData.slug]) - ls[streamData.source][streamData.type][streamData.slug] = {} + if (!progressSave[streamData.source]) + progressSave[streamData.source] = {} + if (!progressSave[streamData.source][streamData.type]) + progressSave[streamData.source][streamData.type] = {} + if (!progressSave[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 ( diff --git a/src/views/Search.js b/src/views/Search.js index a602b26a..68067ab8 100644 --- a/src/views/Search.js +++ b/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) => {