more progress

src/components/Cross.css

@@ -0,0 +1,7 @@
+.cross {
+    display: inline-block;
+}
+
+.cross:hover {
+    transform: rotate(45deg);
+}

src/components/Cross.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import './Cross.css'
+
+export function Cross(props) {
+    return (
+        <span className="cross" dangerouslySetInnerHTML={{
+            __html: `
+            <svg height="1em" viewBox="0 0 365.696 365.696" width="1em" xmlns="http://www.w3.org/2000/svg">
+                <path d="m243.1875 182.859375 113.132812-113.132813c12.5-12.5 12.5-32.765624 0-45.246093l-15.082031-15.082031c-12.503906-12.503907-32.769531-12.503907-45.25 0l-113.128906 113.128906-113.132813-113.152344c-12.5-12.5-32.765624-12.5-45.246093 0l-15.105469 15.082031c-12.5 12.503907-12.5 32.769531 0 45.25l113.152344 113.152344-113.128906 113.128906c-12.503907 12.503907-12.503907 32.769531 0 45.25l15.082031 15.082031c12.5 12.5 32.765625 12.5 45.246093 0l113.132813-113.132812 113.128906 113.132812c12.503907 12.5 32.769531 12.5 45.25 0l15.082031-15.082031c12.5-12.503906 12.5-32.769531 0-45.25zm0 0"/>
+            </svg>
+            `}}>
+        </span>
+    )
+}

src/components/MovieRow.js

@@ -1,7 +1,8 @@
 import React from 'react'
 import { Arrow } from './Arrow'
-import './MovieRow.css'
+// import { Cross } from './Crosss'
 import { PercentageOverlay } from './PercentageOverlay'
+import './MovieRow.css'
 
 // title: string
 // onClick: () => void
@@ -21,6 +22,7 @@ export function MovieRow(props) {
     return (
         <div className="movieRow" onClick={() => props.onClick && props.onClick()}>
             <div className="left">
+                {/* <Cross /> */}
                 {props.title}<span className="seasonEpisodeSubtitle">{props.place ? ` - S${props.place.season}:E${props.place.episode}` : ''}</span>&nbsp;
                 <span className="year">({props.year})</span>
             </div>

src/views/Search.css

@@ -22,7 +22,7 @@
     cursor: pointer;
 }
 .cardView nav a.selected-link {
-    background: var(--button);
+    background: var(--card);
     color: var(--button-text);
     font-weight: bold;
 }

src/views/Search.js

@@ -151,6 +151,26 @@ export function SearchView() {
 
                     if (entry.percentageDone < 90) {
                         newContinueWatching.push(entry)
+                    } else {
+                        if (!subselection.show) return;
+
+                        if (subselection.meta.episodes[subselection.show.season].includes(`${parseInt(subselection.show.episode) + 1}`)) {
+                            subselection.show = {
+                                season: subselection.show.season,
+                                episode: `${parseInt(subselection.show.episode) + 1}`
+                            }
+
+                            entry.percentageDone = 0;
+                        } else if (subselection.meta.episodes[`${parseInt(subselection.show.season) + 1}`]['1']) {
+                            subselection.show = {
+                                season: `${parseInt(subselection.show.season) + 1}`,
+                                episode: '1'
+                            }
+                        } else {
+                            return;
+                        }
+
+                        newContinueWatching.push(entry);
                     }
                 }
             }
@@ -178,7 +198,7 @@ export function SearchView() {
                 <a className={page === 'search' ? 'selected-link' : ''} onClick={() => setPage('search')} href>Search</a>
                 {continueWatching.length > 0 ?
                     <a className={page === 'watching' ? 'selected-link' : ''} onClick={() => setPage('watching')} href>Continue watching</a>
-                : ''}
+                    : ''}
             </nav>
 
             {/* Search */}
@@ -228,27 +248,20 @@ export function SearchView() {
             {/* Continue watching */}
             {continueWatching.length > 0 && page === 'watching' ? <Card>
                 <Title>Continue watching</Title>
-                {Object.entries(continueWatching.reduce((a, v) => {
+                {continueWatching?.map((v, i) => (
-                    if (!a[v.source]) a[v.source] = []
+                    // <div>
-                    a[v.source].push(v)
+                        <MovieRow key={i} title={v.data.meta.title} slug={v.data.meta.slug} type={v.type} year={v.data.meta.year} source={v.source} place={v.data.show} percentage={v.percentageDone} deletable onClick={() => {
-                    return a;
+                            if (v.type === 'show') {
-                }, {})).map(v => (
+                                history.push(`${routeMatch.url}/${v.source}/${v.data.meta.title}/${v.slug}/season/${v.data.show.season}/episode/${v.data.show.episode}`)
-                    <div key={v[0]}>
+                            } else {
-                        <p className="source">{v[0]}</p>
+                                history.push(`${routeMatch.url}/${v.source}/${v.data.meta.title}/${v.slug}`)
-                        {v[1].map((v, i) => (
+                            }
-                            <MovieRow key={i} title={v.data.meta.title} slug={v.data.meta.slug} type={v.type} year={v.data.meta.year} source={v.source} place={v.data.show} percentage={v.percentageDone} onClick={() => {
+                            
-                                if (v.type === 'show') {
+                            setShowingOptions(false)
-                                    history.push(`${routeMatch.url}/${v.source}/${v.data.meta.title}/${v.slug}/season/${v.data.show.season}/episode/${v.data.show.episode}`)
+                            getStream(v.data.meta.title, v.data.meta.slug, v.type, v.source, v.data.meta.year)
-                                } else {
+                        }} />
-                                    history.push(`${routeMatch.url}/${v.source}/${v.data.meta.title}/${v.slug}`)
+                    // </div>
-                                }
+                    ))}
-
-                                setShowingOptions(false)
-                                getStream(v.data.meta.title, v.data.meta.slug, v.type, v.source, v.data.meta.year)
-                            }} />
-                        ))}
-                    </div>
-                ))}
             </Card> : <React.Fragment></React.Fragment>}
 
             <div className="topRightCredits">