Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Add video player astro component

Browse source
This commit is contained in:
Sam Carlton 2022-05-06 15:32:40 -05:00
parent a1531fbec5
commit d3e73e6896
1 changed files with 63 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

63
src/components/video/player.astro Normal file
View file

@ -0,0 +1,63 @@
---
import Poster from './poster.astro'
import Timestamps from './timestamps.astro'
const {
video,
width = '325px',
classes = 'w-full flex-shrink-0 flex-grow-0 border-2 border-transparent rounded-2xl overflow-hidden'
} = Astro.props
---
<lite-youtube
class="video-canvas w-screen flex flex-col justify-center items-center bg-black pt-16"
style="left:50%;right:50%;margin-left:-50vw;margin-right:-50vw;"
>
<script
class="video-data"
type="application/json"
set:html={ JSON.stringify( video ) }
/>
<div class="ratio-wrapper w-full max-w-4xl">
<div class="player-container relative overflow-hidden w-full pb-16/9">
<div class="player-poster cursor-pointer">
<Poster
video={ video }
/>
<div
class="video-card-overlay absolute inset-0 flex flex-col justify-center items-center bg-gradient-to-tr p-4"
style="
--tw-gradient-stops:
rgba(0, 0, 0, 1),
rgba(0, 0, 0, 0.6)
;
"
>
<div class="cover-top h-full"></div>
<div class="play-circle bg-white-2 bg-blur flex justify-center items-center outline-0 rounded-full ease p-4">
<svg viewBox="0 0 18 18" style="width:18px;height:18px;margin-left:3px">
<path fill="currentColor" d="M15.562 8.1L3.87.225c-.818-.562-1.87 0-1.87.9v15.75c0 .9 1.052 1.462 1.87.9L15.563 9.9c.584-.45.584-1.35 0-1.8z"></path>
</svg>
</div>
<div class="cover-bottom h-full">
<slot name="cover-bottom"/>
</div>
</div>
</div>
</div>
</div>
<Timestamps
video={ video }
/>
</lite-youtube>
<script>
import 'lazysizes'
import 'can-autoplay'
import '~/helpers/lite-youtube.js'
</script>