djsundog/ffplayout
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix responsive

Browse Source
This commit is contained in:
jb-alvarado 2024-04-08 13:53:04 +02:00
parent ab4e659309
commit 85c2af1266
1 changed files with 76 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
components/Control.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<div class="w-full"> <div class="w-full">
<div class="grid grid-cols-2 md:grid-cols-[512px_auto] xl:grid-cols-[512px_auto_450px]"> <div class="grid grid-cols-1 md:grid-cols-[auto_512px] xl:grid-cols-[512px_auto_450px]">
<div class="order-1 p-1 flex"> <div class="order-1 p-1 flex">
<div class="aspect-video w-full"> <div class="aspect-video w-full">
<video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls /> <video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls />
@ -26,7 +26,9 @@
</div> </div>
</div> </div>
<div class="order-3 xl:order-2 col-span-2 xl:col-span-1 bg-base-200 h-full grid grid-cols-1 xs:grid-cols-2"> <div
class="order-3 xl:order-2 col-span-1 md:col-span-2 xl:col-span-1 bg-base-200 h-full grid grid-cols-1 xs:grid-cols-2"
>
<div class="col-span-1 p-1"> <div class="col-span-1 p-1">
<div <div
class="w-full h-full bg-base-100 rounded font-['DigitalNumbers-Regular'] p-6 text-3xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center" class="w-full h-full bg-base-100 rounded font-['DigitalNumbers-Regular'] p-6 text-3xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center"
@ -43,7 +45,7 @@
</div> </div>
</div> </div>
<div class="col-span-1 md:col-span-2 p-1"> <div class="col-span-1 xs:col-span-2 p-1">
<div class="w-full h-full bg-base-100 flex items-center p-3"> <div class="w-full h-full bg-base-100 flex items-center p-3">
<div class="w-full h-full flex flex-col"> <div class="w-full h-full flex flex-col">
<div v-if="playlistStore.ingestRuns" class="h-1/3 font-bold truncate" title="Live Ingest"> <div v-if="playlistStore.ingestRuns" class="h-1/3 font-bold truncate" title="Live Ingest">
@ -62,7 +64,11 @@
{{ secToHMS(playlistStore.currentClipOut) }} {{ secToHMS(playlistStore.currentClipOut) }}
</div> </div>
<div class="h-1/3"> <div class="h-1/3">
<progress class="progress progress-accent w-full" :value="playlistStore.progressValue" max="100"></progress> <progress
class="progress progress-accent w-full"
:value="playlistStore.progressValue"
max="100"
></progress>
</div> </div>
</div> </div>
</div> </div>
@ -70,48 +76,67 @@
</div> </div>
<div class="order-2 xl:order-3 p-1"> <div class="order-2 xl:order-3 p-1">
<div class="bg-base-100 flex justify-center"> <div class="bg-base-100 h-full flex justify-center">
<div class="grid grid-cols-3 gap-3 p-4"> <div class="w-full h-full grid grid-cols-3">
<div class="text-center">
<div class="w-full h-1/2 aspect-square p-2">
<button <button
title="Start Playout Service" title="Start Playout Service"
class="btn btn-primary w-32 h-32 text-8xl text-lime-600" class="btn btn-primary h-full w-full text-7xl text-lime-600"
:class="playlistStore.playoutIsRunning && 'shadow-glow shadow-lime-600'" :class="playlistStore.playoutIsRunning && 'shadow-glow shadow-lime-600'"
@click="controlProcess('start')" @click="controlProcess('start')"
> >
<i class="bi-play" /> <i class="bi-play" />
</button> </button>
<button </div>
title="Stop Playout Service" <div class="w-full h-1/2 aspect-square p-2">
class="btn btn-primary w-32 h-32 text-8xl text-red-600"
@click="controlProcess('stop')"
>
<i class="bi-stop" />
</button>
<button
title="Restart Playout Service"
class="btn btn-primary w-32 h-32 text-8xl text-yellow-500"
@click="controlProcess('restart')"
>
<i class="bi-arrow-clockwise" />
</button>
<button <button
title="Jump to last Clip" title="Jump to last Clip"
class="btn btn-primary w-32 h-32 text-8xl text-cyan-600" class="btn btn-primary h-full w-full text-7xl text-cyan-600"
@click="controlPlayout('back')" @click="controlPlayout('back')"
> >
<i class="bi-skip-start" /> <i class="bi-skip-start" />
</button> </button>
</div>
</div>
<div class="text-center">
<div class="w-full h-1/2 aspect-square p-2">
<button
title="Stop Playout Service"
class="btn btn-primary h-full w-full text-7xl text-red-600"
@click="controlProcess('stop')"
>
<i class="bi-stop" />
</button>
</div>
<div class="w-full h-1/2 aspect-square p-2">
<button <button
title="Reset Playout State" title="Reset Playout State"
class="btn btn-primary w-32 h-32 text-8xl text-cyan-600" class="btn btn-primary h-full w-full text-7xl text-cyan-600"
@click="controlPlayout('reset')" @click="controlPlayout('reset')"
> >
<i class="bi-arrow-repeat" /> <i class="bi-arrow-repeat" />
</button> </button>
</div>
</div>
<div class="text-center">
<div class="w-full h-1/2 aspect-square p-2">
<button
title="Restart Playout Service"
class="btn btn-primary h-full w-full text-7xl text-yellow-500"
@click="controlProcess('restart')"
>
<i class="bi-arrow-clockwise" />
</button>
</div>
<div class="w-full h-1/2 aspect-square p-2">
<button <button
title="Jump to next Clip" title="Jump to next Clip"
class="btn btn-primary w-32 h-32 text-8xl text-cyan-600" class="btn btn-primary h-full w-full text-7xl text-cyan-600"
@click="controlPlayout('next')" @click="controlPlayout('next')"
> >
<i class="bi-skip-end" /> <i class="bi-skip-end" />
@ -121,6 +146,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">