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

125
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,52 +76,73 @@
</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">
<button <div class="text-center">
title="Start Playout Service" <div class="w-full h-1/2 aspect-square p-2">
class="btn btn-primary w-32 h-32 text-8xl text-lime-600" <button
:class="playlistStore.playoutIsRunning && 'shadow-glow shadow-lime-600'" title="Start Playout Service"
@click="controlProcess('start')" class="btn btn-primary h-full w-full text-7xl text-lime-600"
> :class="playlistStore.playoutIsRunning && 'shadow-glow shadow-lime-600'"
<i class="bi-play" /> @click="controlProcess('start')"
</button> >
<button <i class="bi-play" />
title="Stop Playout Service" </button>
class="btn btn-primary w-32 h-32 text-8xl text-red-600" </div>
@click="controlProcess('stop')" <div class="w-full h-1/2 aspect-square p-2">
> <button
<i class="bi-stop" /> title="Jump to last Clip"
</button> class="btn btn-primary h-full w-full text-7xl text-cyan-600"
<button @click="controlPlayout('back')"
title="Restart Playout Service" >
class="btn btn-primary w-32 h-32 text-8xl text-yellow-500" <i class="bi-skip-start" />
@click="controlProcess('restart')" </button>
> </div>
<i class="bi-arrow-clockwise" /> </div>
</button>
<button <div class="text-center">
title="Jump to last Clip" <div class="w-full h-1/2 aspect-square p-2">
class="btn btn-primary w-32 h-32 text-8xl text-cyan-600" <button
@click="controlPlayout('back')" title="Stop Playout Service"
> class="btn btn-primary h-full w-full text-7xl text-red-600"
<i class="bi-skip-start" /> @click="controlProcess('stop')"
</button> >
<button <i class="bi-stop" />
title="Reset Playout State" </button>
class="btn btn-primary w-32 h-32 text-8xl text-cyan-600" </div>
@click="controlPlayout('reset')"
> <div class="w-full h-1/2 aspect-square p-2">
<i class="bi-arrow-repeat" /> <button
</button> title="Reset Playout State"
<button class="btn btn-primary h-full w-full text-7xl text-cyan-600"
title="Jump to next Clip" @click="controlPlayout('reset')"
class="btn btn-primary w-32 h-32 text-8xl text-cyan-600" >
@click="controlPlayout('next')" <i class="bi-arrow-repeat" />
> </button>
<i class="bi-skip-end" /> </div>
</button> </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
title="Jump to next Clip"
class="btn btn-primary h-full w-full text-7xl text-cyan-600"
@click="controlPlayout('next')"
>
<i class="bi-skip-end" />
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>