Skip to content

Commit

Permalink
hides timestamp book marks in eventual favor of cue points for v2 launch
Browse files Browse the repository at this point in the history
  • Loading branch information
@stolinski
stolinski committed Aug 17, 2023
1 parent f6d8359 commit dfc19d6
Show file tree
Hide file tree
Showing 3 changed files with 59 additions and 59 deletions.
114 changes: 57 additions & 57 deletions src/lib/player/Player.svelte
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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 />
Expand Down
2 changes: 1 addition & 1 deletion src/styles/buttons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion src/styles/variables.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down

1 comment on commit dfc19d6

@vercel
Copy link

@vercel vercel bot commented on dfc19d6 Aug 17, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

sytnax-website-v2 – ./

sytnax-website-v2-git-v2-syntax.vercel.app
sytnax-website-v2-syntax.vercel.app
beta.syntax.fm

Please sign in to comment.