From dfc19d66fd4dd60b5e66bc74fcf3ed9c217334b9 Mon Sep 17 00:00:00 2001
From: Scott Tolinski <scott@leveluptuts.com>
Date: Thu, 17 Aug 2023 14:06:14 -0600
Subject: [PATCH] hides timestamp book marks in eventual favor of cue points
 for v2 launch

---
 src/lib/player/Player.svelte | 114 +++++++++++++++++------------------
 src/styles/buttons.css       |   2 +-
 src/styles/variables.css     |   2 +-
 3 files changed, 59 insertions(+), 59 deletions(-)

diff --git a/src/lib/player/Player.svelte b/src/lib/player/Player.svelte
index 956b7d9a9..58089f4c6 100644
--- a/src/lib/player/Player.svelte
+++ b/src/lib/player/Player.svelte
@@ -1,62 +1,62 @@
 <script lang="ts">
 	import Icon from '$lib/Icon.svelte';
-	import { player, type Timestamp } from '$state/player';
+	import { player } from '$state/player';
 	import { fly, slide } from 'svelte/transition';
 	import Visualizer from './Visualizer.svelte';
-	import Bookmarks from './Bookmarks.svelte';
-
-	let time_stamps: Timestamp[] = [];
-
-	function extractTimestamps(html: string, totalTime: number): Timestamp[] {
-		const parser = new DOMParser();
-		const doc = parser.parseFromString(html, 'text/html');
-		const timestampElements = doc.querySelectorAll('a[href*="#t="]');
-		const timestamps: Timestamp[] = [];
-
-		let previousTimeStamp = 0;
-		let previousDuration = 0;
-		let previousPercentage = 0;
-		let previousStartingPosition = 0;
-
-		timestampElements.forEach((element, index) => {
-			const href = element.getAttribute('href');
-			const timeString = href?.split('#t=')[1];
-			const liElement = element.closest('li');
-			const label = liElement?.textContent?.trim() || '';
-			const time_stamp = timeString ? timeStringToSeconds(timeString) : 0;
-			const duration = index === 0 ? time_stamp : time_stamp - previousTimeStamp;
-			const percentage = (duration / totalTime) * 100;
-			const startingPosition = previousPercentage + previousStartingPosition;
-
-			timestamps.push({ label, time_stamp, duration, percentage, startingPosition, href });
-
-			previousTimeStamp = time_stamp;
-			previousDuration = duration;
-			previousPercentage = percentage;
-			previousStartingPosition = startingPosition;
-		});
-
-		// Calculate the remaining percentage for the last timestamp
-		const lastTimestamp = timestamps[timestamps.length - 1];
-		lastTimestamp.percentage = 100 - lastTimestamp.startingPosition;
-
-		return timestamps;
-	}
-
-	function timeStringToSeconds(timeString: string): number {
-		const [minutes, seconds] = timeString.split(':').map(Number);
-		return minutes * 60 + seconds;
-	}
-
-	$: if ($player.audio && $player?.current_show?.show_notes) {
-		$player.audio.onloadedmetadata = function () {
-			const extractedTimestamps = extractTimestamps(
-				$player.current_show.show_notes,
-				$player.audio.duration
-			);
-			time_stamps = extractedTimestamps;
-		};
-	}
+	// import Bookmarks from './Bookmarks.svelte';
+
+	// let time_stamps: Timestamp[] = [];
+
+	// function extractTimestamps(html: string, totalTime: number): Timestamp[] {
+	// 	const parser = new DOMParser();
+	// 	const doc = parser.parseFromString(html, 'text/html');
+	// 	const timestampElements = doc.querySelectorAll('a[href*="#t="]');
+	// 	const timestamps: Timestamp[] = [];
+
+	// 	let previousTimeStamp = 0;
+	// 	let previousDuration = 0;
+	// 	let previousPercentage = 0;
+	// 	let previousStartingPosition = 0;
+
+	// 	timestampElements.forEach((element, index) => {
+	// 		const href = element.getAttribute('href');
+	// 		const timeString = href?.split('#t=')[1];
+	// 		const liElement = element.closest('li');
+	// 		const label = liElement?.textContent?.trim() || '';
+	// 		const time_stamp = timeString ? timeStringToSeconds(timeString) : 0;
+	// 		const duration = index === 0 ? time_stamp : time_stamp - previousTimeStamp;
+	// 		const percentage = (duration / totalTime) * 100;
+	// 		const startingPosition = previousPercentage + previousStartingPosition;
+
+	// 		timestamps.push({ label, time_stamp, duration, percentage, startingPosition, href });
+
+	// 		previousTimeStamp = time_stamp;
+	// 		previousDuration = duration;
+	// 		previousPercentage = percentage;
+	// 		previousStartingPosition = startingPosition;
+	// 	});
+
+	// 	// Calculate the remaining percentage for the last timestamp
+	// 	const lastTimestamp = timestamps[timestamps.length - 1];
+	// 	lastTimestamp.percentage = 100 - lastTimestamp.startingPosition;
+
+	// 	return timestamps;
+	// }
+
+	// function timeStringToSeconds(timeString: string): number {
+	// 	const [minutes, seconds] = timeString.split(':').map(Number);
+	// 	return minutes * 60 + seconds;
+	// }
+
+	// $: if ($player.audio && $player?.current_show?.show_notes) {
+	// 	$player.audio.onloadedmetadata = function () {
+	// 		const extractedTimestamps = extractTimestamps(
+	// 			$player.current_show.show_notes,
+	// 			$player.audio.duration
+	// 		);
+	// 		time_stamps = extractedTimestamps;
+	// 	};
+	// }
 
 	$: if ($player.audio) {
 		$player.audio.crossOrigin = 'anonymous';
@@ -106,9 +106,9 @@
 					<div class="media-range">
 						<media-time-display />
 						<div class="media-range-bookmarks">
-							{#if time_stamps}
+							<!-- {#if time_stamps}
 								<Bookmarks {time_stamps} />
-							{/if}
+							{/if} -->
 							<media-time-range />
 						</div>
 						<media-duration-display />
diff --git a/src/styles/buttons.css b/src/styles/buttons.css
index ce7e90eff..b97c09ec4 100644
--- a/src/styles/buttons.css
+++ b/src/styles/buttons.css
@@ -48,7 +48,7 @@
 	}
 
 	:is(button, .button).play {
-		--button-bg: linear-gradient(to right, var(--green), var(--teal));
+		--button-bg: linear-gradient(to right, var(--success), var(--accent));
 		--button-color: var(--black-8);
 		font-size: var(--font-size-md);
 		padding: 10px 20px;
diff --git a/src/styles/variables.css b/src/styles/variables.css
index c84159e5d..5ca41a848 100644
--- a/src/styles/variables.css
+++ b/src/styles/variables.css
@@ -144,7 +144,7 @@
 	--primary: var(--yellow);
 	--accent: var(--teal);
 	--warning: var(--red);
-	--success: var(--teal);
+	--success: var(--green);
 	--zebra: oklch(var(--blacklch) / 0.05);
 	--line: var(--black-2);
 	--border: solid 4px var(--color-sheet);