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>
<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);"
>
<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
viewBox="0 0 18 18"
style="width:18px;height:18px;margin-left:3px"
@ -49,6 +56,15 @@
/>
</svg>
</div>
<div class="cover-bottom h-full">
<slot name="cover-bottom">
<!-- Bottom -->
</slot>
</div>
</div>
</div>
<iframe

21
pages/tv/_slug.vue
View file

@ -4,14 +4,23 @@
<VideoPlayer
:video="video"
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
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 }}
</h1>
</h1> -->
<ChannelCredit
:video="video"
@ -151,12 +160,6 @@ export default {
// payload = endpoint.payload
// }
// console.log({
// video,
// featuredApps,
// relatedVideos
// })
return {
video: payload.video,
featuredApps: payload.featuredApps,