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

Move TV page title into player cover

Browse source
This commit is contained in:
Sam Carlton 2021-05-03 15:16:53 -05:00
parent 9b6a7d91c4
commit 852a934a90
2 changed files with 30 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

20
components/video/player.vue
View file

@ -35,10 +35,17 @@
> >
</picture> </picture>
<div <div
class="video-card-overlay absolute inset-0 flex justify-center items-center bg-gradient-to-tr from-black to-transparent p-4" class="video-card-overlay absolute inset-0 flex flex-col justify-center items-center bg-gradient-to-tr from-black to-transparent p-4"
style="--gradient-from-color:rgba(0, 0, 0, 1); --gradient-to-color:rgba(0, 0, 0, 0.7);" style="--gradient-from-color:rgba(0, 0, 0, 1); --gradient-to-color:rgba(0, 0, 0, 0.7);"
> >
<div class="play-circle w-16 h-16 bg-white-2 flex justify-center items-center outline-0 rounded-full ease"> <div class="cover-top h-full">
<slot name="cover-top">
<!-- Top -->
</slot>
</div>
<div class="play-circle bg-white-2 bg-blur flex justify-center items-center outline-0 rounded-full ease p-4">
<svg <svg
viewBox="0 0 18 18" viewBox="0 0 18 18"
style="width:18px;height:18px;margin-left:3px" style="width:18px;height:18px;margin-left:3px"
@ -49,6 +56,15 @@
/> />
</svg> </svg>
</div> </div>
<div class="cover-bottom h-full">
<slot name="cover-bottom">
<!-- Bottom -->
</slot>
</div>
</div> </div>
</div> </div>
<iframe <iframe

21
pages/tv/_slug.vue
View file

@ -4,14 +4,23 @@
<VideoPlayer <VideoPlayer
:video="video" :video="video"
class="pt-16" class="pt-16"
/> >
<template v-slot:cover-bottom>
<div class="page-heading h-full flex items-end md:p-4">
<h1 class="title text-xs text-left md:text-2xl font-bold">
{{ video.name }}
</h1>
</div>
</template>
</VideoPlayer>
<div <div
class="md:flex w-full justify-between space-y-4 md:space-y-0 md:px-10" class="md:flex w-full justify-between space-y-4 md:space-y-0 md:px-10"
> >
<h1 class="title text-lg md:text-2xl font-bold"> <!-- <h1 class="title text-lg md:text-2xl font-bold">
{{ video.name }} {{ video.name }}
</h1> </h1> -->
<ChannelCredit <ChannelCredit
:video="video" :video="video"
@ -151,12 +160,6 @@ export default {
// payload = endpoint.payload // payload = endpoint.payload
// } // }
// console.log({
// video,
// featuredApps,
// relatedVideos
// })
return { return {
video: payload.video, video: payload.video,
featuredApps: payload.featuredApps, featuredApps: payload.featuredApps,