From 1c37d32a0985ff7390313833345b9299f9f0b196 Mon Sep 17 00:00:00 2001
From: metamuffin <metamuffin@disroot.org>
Date: Tue, 16 Jan 2024 22:58:23 +0100
Subject: chapter thumbnail display and player seek via url

---
 web/script/player/player.ts | 14 ++++++++++++--
 web/style/layout.css        |  8 ++++----
 web/style/nodecard.css      | 44 ++++++++++++++++++++++----------------------
 3 files changed, 38 insertions(+), 28 deletions(-)

(limited to 'web')

diff --git a/web/script/player/player.ts b/web/script/player/player.ts
index a92ab4b..ea45e9a 100644
--- a/web/script/player/player.ts
+++ b/web/script/player/player.ts
@@ -107,9 +107,10 @@ export class Player {
             this.set_pers("Downloading track indecies...")
             await this.set_track_enabled(0, true, false)
             await this.set_track_enabled(1, true, false)
-            
+
             this.set_pers("Downloading initial segments...")
-            const start_time = get_continue_time(userdata.watched);
+            const start_time = get_query_start_time() ?? get_continue_time(userdata.watched);
+
             this.update(start_time)
             this.video.currentTime = start_time
 
@@ -155,3 +156,12 @@ function get_continue_time(w: WatchedState): number {
     if (typeof w == "string") return 0
     else return w.progress
 }
+
+function get_query_start_time() {
+    const u = new URL(window.location.href)
+    const p = u.searchParams.get("t")
+    if (!p) return
+    const x = parseFloat(p)
+    if (Number.isNaN(x)) return
+    return x
+}
diff --git a/web/style/layout.css b/web/style/layout.css
index 16ae668..3ad5236 100644
--- a/web/style/layout.css
+++ b/web/style/layout.css
@@ -106,19 +106,19 @@ footer p {
     margin-right: 3px;
 }
 
-.homelist {
+.hlist {
     overflow-x: scroll;
     max-width: 100%;
 }
-.homelist ul {
+.hlist ul {
     display: table;
 }
-.homelist ul li {
+.hlist ul li {
     display: table-cell;
 }
 
 @media (max-width: 750px) {
-    .homelist ul {
+    .hlist ul {
         padding-left: 0;
     }
 }
diff --git a/web/style/nodecard.css b/web/style/nodecard.css
index 7554649..b0dd3e2 100644
--- a/web/style/nodecard.css
+++ b/web/style/nodecard.css
@@ -18,52 +18,52 @@
     display: block;
 }
 
-.node.card {
+.card {
     padding: 1em;
 }
 
-.node.card .poster,
-.node.card .poster img {
+.card .poster,
+.card .poster img {
     height: var(--card-size);
 }
-.node.card.aspect-port {
+.card.aspect-port {
     width: calc(var(--card-size) / var(--port-poster-aspect));
 }
-.node.card.aspect-land {
+.card.aspect-land {
     width: calc(var(--card-size) / var(--land-poster-aspect));
 }
-.node.card.aspect-thumb {
+.card.aspect-thumb {
     width: calc(var(--card-size) / var(--land-thumb-aspect));
 }
-.node.card.aspect-square {
+.card.aspect-square {
     width: calc(var(--card-size));
 }
 
-.node.card .poster a img {
+.card .poster a img {
     object-fit: cover;
     object-position: center;
     width: 100%;
 }
-.node.card .title {
+.card .title {
     text-align: center;
     margin-top: 0.5em;
     text-align: center;
     text-overflow: ellipsis;
 }
-.node.card .title a {
+.card .title a {
     text-decoration-line: none;
 }
-.node.card .title a:hover {
+.card .title a:hover {
     text-decoration-line: underline;
 }
-.node.card .poster {
+.card .poster {
     display: grid;
 }
-.node.card .poster a {
+.card .poster a {
     grid-area: 1 / 1;
 }
 
-.node.card.poster .poster .cardhover.item {
+.card .poster .cardhover {
     position: relative;
     pointer-events: none;
     grid-area: 1 / 1;
@@ -74,23 +74,23 @@
     justify-content: center;
     align-items: center;
 }
-.node.card.poster .poster:hover .cardhover.item {
+.card .poster:hover .cardhover {
     opacity: 1;
 }
 
-.node.card.poster .poster a {
+.card .poster a {
     overflow: hidden;
 }
 
-.node.card.poster .poster a img {
+.card .poster a img {
     transition: transform 0.3s;
 }
 
-.node.card.poster .poster:hover a img {
+.card .poster:hover a img {
     transform: scale(1.1);
 }
 
-.node.card.poster .poster .cardhover.item a.play {
+.card .poster .cardhover a.play {
     text-decoration: none;
     width: 1em;
     height: 1em;
@@ -103,11 +103,11 @@
     background-color: var(--overlay);
     transition: background-color 0.3s, font-size 0.3s;
 }
-.node.card.poster .poster .cardhover.item a.play:hover {
+.card .poster .cardhover a.play:hover {
     background-color: var(--overlay-hover);
     font-size: 3em;
 }
-.node.card.poster .poster .cardhover.item .props {
+.card .poster .cardhover .props {
     position: absolute;
     bottom: 0px;
     left: 0px;
@@ -120,4 +120,4 @@
     .children {
         justify-content: center;
     }
-}
\ No newline at end of file
+}
-- 
cgit v1.2.3-70-g09d2