implemented storage for video progress

This commit is contained in:
mrjvs 2021-10-25 21:16:10 +02:00
parent 06924775a3
commit ff1c0d65d6
7 changed files with 63 additions and 53 deletions

View File

@ -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>
);

View File

@ -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;

View File

@ -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;

View File

@ -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()

View File

@ -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()

View File

@ -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 (

View File

@ -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) => {