mirror of
https://github.com/ThatGuySam/doesitarm.git
synced 2026-05-18 06:44:46 -07:00
Add timestamps component
This commit is contained in:
parent
a04297bc2c
commit
6448e414c0
1 changed files with 26 additions and 0 deletions
26
src/components/video/timestamps.astro
Normal file
26
src/components/video/timestamps.astro
Normal file
|
|
@ -0,0 +1,26 @@
|
||||||
|
---
|
||||||
|
const {
|
||||||
|
video
|
||||||
|
} = Astro.props
|
||||||
|
|
||||||
|
const hasTimeStamps = video.timestamps.length > 0
|
||||||
|
|
||||||
|
---
|
||||||
|
{ hasTimeStamps &&
|
||||||
|
<div class="player-timestamps w-full max-w-4xl">
|
||||||
|
<div class="player-timestamps-wrapper md:inline-flex md:w-full max-w-4xl overflow-x-auto overflow-y-visible md:whitespace-nowrap rounded-xl py-3">
|
||||||
|
{ video.timestamps.map( timestamp => {
|
||||||
|
// const inSeconds = (minutes * 60) + Number(seconds)
|
||||||
|
return (
|
||||||
|
<button
|
||||||
|
time={ timestamp.time }
|
||||||
|
aria-label={`Jump to ${ timestamp.fullText }`}
|
||||||
|
class="inline-block text-xs rounded-lg border-2 border-white focus:outline-none border-opacity-0 neumorphic-shadow-inner px-3 py-2"
|
||||||
|
>
|
||||||
|
{ timestamp.fullText }
|
||||||
|
</button>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
}
|
||||||
Loading…
Add table
Add a link
Reference in a new issue