finish generator, cleanup css, add date picker, style alert, add shadow to elements
This commit is contained in:
jb-alvarado
parent
140cb15c3e
commit
6fe26d4900
BIN
assets/fonts/DigitalNumbers-Regular.woff
Normal file
BIN
assets/fonts/DigitalNumbers-Regular.woff
Normal file
Binary file not shown.
Binary file not shown.
@ -1,48 +0,0 @@
|
|||||||
$gray-800: #3a3f44 !default;
|
|
||||||
$gray-900: #262a2c !default;
|
|
||||||
|
|
||||||
$primary: $gray-800 !default;
|
|
||||||
$secondary: $gray-900 !default;
|
|
||||||
|
|
||||||
$accent: #ff9c36;
|
|
||||||
$bg-primary: #212529;
|
|
||||||
$bg-secondary: #1d2024;
|
|
||||||
$link-color: #c4c4c4;
|
|
||||||
$link-color-hover: #e7e7e7;
|
|
||||||
$item-hover: rgba(31, 31, 31, 0.8);
|
|
||||||
$border-color: black;
|
|
||||||
$overlay-bg: rgba(61, 61, 61, 0.534);
|
|
||||||
|
|
||||||
$success: #438d3c;
|
|
||||||
$danger: #972929;
|
|
||||||
$warning: #a78c14;
|
|
||||||
$alert-color: #ffffff;
|
|
||||||
|
|
||||||
$control-button-play: #43c32e;
|
|
||||||
$control-button-play-hover: #339924;
|
|
||||||
$control-button-stop: #d01111;
|
|
||||||
$control-button-stop-hover: #a70e0e;
|
|
||||||
$control-button-restart: #d1c410;
|
|
||||||
$control-button-restart-hover: #b4a90e;
|
|
||||||
$control-button-control: #06aad3;
|
|
||||||
$control-button-control-hover: #068bac;
|
|
||||||
|
|
||||||
$log-time: #666864;
|
|
||||||
$log-number: #e2c317;
|
|
||||||
$log-addr: #ad7fa8;
|
|
||||||
$log-cmd: #6c95c2;
|
|
||||||
$log-content: #ececec;
|
|
||||||
$log-info: #8ae234;
|
|
||||||
$log-warning: #ff8700;
|
|
||||||
$log-error: #d32828;
|
|
||||||
$log-debug: #6e99c7;
|
|
||||||
$log-decoder: #56efff;
|
|
||||||
$log-encoder: #45ccee;
|
|
||||||
$log-server: #23cbdd;
|
|
||||||
|
|
||||||
$theme-colors: (
|
|
||||||
'primary': $primary,
|
|
||||||
'secondary': $secondary,
|
|
||||||
);
|
|
||||||
|
|
||||||
$b-radius: 3px;
|
|
||||||
@ -1,4 +1,3 @@
|
|||||||
@import '_variables.scss';
|
|
||||||
@import 'bootstrap-icons/font/bootstrap-icons.css';
|
@import 'bootstrap-icons/font/bootstrap-icons.css';
|
||||||
|
|
||||||
#__nuxt,
|
#__nuxt,
|
||||||
@ -10,101 +9,12 @@ main > div {
|
|||||||
}
|
}
|
||||||
|
|
||||||
@font-face {
|
@font-face {
|
||||||
font-family: 'DigitalNumbers-Regular';
|
font-family: 'DigitalNumbers';
|
||||||
src: url('@/assets/fonts/DigitalNumbers-Regular.woff2') format('woff2');
|
src: url('@/assets/fonts/DigitalNumbers-Regular.woff') format('woff');
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
font-style: normal;
|
font-style: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.media-alert {
|
|
||||||
position: absolute;
|
|
||||||
top: 80px;
|
|
||||||
right: 12px;
|
|
||||||
max-width: 400px;
|
|
||||||
max-height: 60px;
|
|
||||||
z-index: 11;
|
|
||||||
}
|
|
||||||
|
|
||||||
.bg-warning {
|
|
||||||
background-color: $warning;
|
|
||||||
}
|
|
||||||
|
|
||||||
.date-div {
|
|
||||||
width: 250px;
|
|
||||||
height: 37px;
|
|
||||||
float: right;
|
|
||||||
margin-right: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-item {
|
|
||||||
background: none;
|
|
||||||
border: none;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 0 0 .5em;
|
|
||||||
min-height: 26px;
|
|
||||||
min-height: 26px;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-div {
|
|
||||||
background-color: $gray-900;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-browser-scroll {
|
|
||||||
height: calc(100% - 3px);
|
|
||||||
overflow: auto;
|
|
||||||
scrollbar-width: medium;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-container .player-browser-scroll {
|
|
||||||
position: relative;
|
|
||||||
height: calc(100% - 50px);
|
|
||||||
min-height: 400px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-icons {
|
|
||||||
margin-right: 0.5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-icons-col {
|
|
||||||
max-width: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-play-col {
|
|
||||||
max-width: 30px;
|
|
||||||
text-align: center;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-dur-col {
|
|
||||||
min-width: 95px;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0 10px 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-item-text {
|
|
||||||
display: inline-block;
|
|
||||||
max-width: 95%;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.media-button {
|
|
||||||
float: right;
|
|
||||||
margin: 1em 0.8em 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.splitpanes__pane {
|
|
||||||
background-color: rgba(34, 34, 34, 0.233);
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.splitpanes--horizontal > .splitpanes__splitter {
|
.splitpanes--horizontal > .splitpanes__splitter {
|
||||||
position: relative;
|
position: relative;
|
||||||
border-top: 1px solid var(--my-gray);
|
border-top: 1px solid var(--my-gray);
|
||||||
@ -144,27 +54,3 @@ main > div {
|
|||||||
transition: background-color 0.3s;
|
transition: background-color 0.3s;
|
||||||
margin-left: -1px;
|
margin-left: -1px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-row .grabbing {
|
|
||||||
cursor: -webkit-grabbing;
|
|
||||||
cursor: grabbing;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-overlay {
|
|
||||||
background-color: $overlay-bg;
|
|
||||||
z-index: 11;
|
|
||||||
position: absolute;
|
|
||||||
width: calc(100% - 25px);
|
|
||||||
height: calc(100% - 36px);
|
|
||||||
|
|
||||||
.spinner-border {
|
|
||||||
position: absolute;
|
|
||||||
margin: auto;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
width: 3rem;
|
|
||||||
height: 3rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|||||||
@ -1,15 +1,94 @@
|
|||||||
<template>
|
<template>
|
||||||
<div
|
<div
|
||||||
v-if="indexStore.showAlert"
|
v-if="indexStore.showAlert"
|
||||||
class="alert show alert-dismissible fade media-alert position-fixed"
|
|
||||||
:class="indexStore.alertVariant"
|
|
||||||
role="alert"
|
role="alert"
|
||||||
|
class="alert fixed top-20 right-3 z-40 w-auto min-w-64 max-w-[90%] md:max-w-[50%] xl:max-w-[40%]"
|
||||||
|
:class="`alert-${indexStore.alertVariant}`"
|
||||||
>
|
>
|
||||||
|
<div v-html="alertIcon(indexStore.alertVariant)" />
|
||||||
{{ indexStore.alertMsg }}
|
{{ indexStore.alertMsg }}
|
||||||
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close" @click="indexStore.showAlert=false"></button>
|
</div>
|
||||||
|
|
||||||
|
<!-- HACK: init alerts to get the right colors, can be remove when bug is fixed -->
|
||||||
|
<div class="alert alert-success w-auto max-w-[700px] justify-start py-2 rounded hidden">
|
||||||
|
<div v-html="alertIcon('success')" />
|
||||||
|
<span class="truncate w-full">bla bla bla</span>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-warning w-auto max-w-[700px] justify-start py-2 rounded hidden">
|
||||||
|
<div v-html="alertIcon('warning')" />
|
||||||
|
<span class="truncate w-full">bla bla bla</span>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-info w-auto max-w-[700px] justify-start py-2 rounded hidden">
|
||||||
|
<div v-html="alertIcon('info')" />
|
||||||
|
<span class="truncate w-full">bla bla bla</span>
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-error w-auto max-w-[700px] justify-start py-2 rounded hidden">
|
||||||
|
<div v-html="alertIcon('error')" />
|
||||||
|
<span class="truncate w-full">bla bla bla</span>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
const indexStore = useIndex()
|
const indexStore = useIndex()
|
||||||
|
|
||||||
|
function alertIcon(variance: string) {
|
||||||
|
switch (variance) {
|
||||||
|
case 'error':
|
||||||
|
return `<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="stroke-current shrink-0 h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
|
/>
|
||||||
|
</svg>`
|
||||||
|
case 'success':
|
||||||
|
return ` <svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="stroke-current shrink-0 h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
|
/>
|
||||||
|
</svg>`
|
||||||
|
case 'warning':
|
||||||
|
return `<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
class="stroke-current shrink-0 h-6 w-6"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
|
||||||
|
/>
|
||||||
|
</svg>`
|
||||||
|
default:
|
||||||
|
return ` <svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
fill="none"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
class="stroke-current shrink-0 w-6 h-6"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
stroke-width="2"
|
||||||
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
||||||
|
/>
|
||||||
|
</svg>`
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -114,9 +114,9 @@ async function onSubmitGui() {
|
|||||||
const update = await configStore.setGuiConfig(configStore.configGui[configStore.configID])
|
const update = await configStore.setGuiConfig(configStore.configGui[configStore.configID])
|
||||||
|
|
||||||
if (update.status) {
|
if (update.status) {
|
||||||
indexStore.msgAlert('alert-success', 'Update GUI config success!', 2)
|
indexStore.msgAlert('success', 'Update GUI config success!', 2)
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', 'Update GUI config failed!', 2)
|
indexStore.msgAlert('error', 'Update GUI config failed!', 2)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -125,7 +125,7 @@ async function deleteChannel() {
|
|||||||
const id = config[configStore.configID].id
|
const id = config[configStore.configID].id
|
||||||
|
|
||||||
if (id === 1) {
|
if (id === 1) {
|
||||||
indexStore.msgAlert('alert-warning', 'First channel can not be deleted!', 2)
|
indexStore.msgAlert('warning', 'First channel can not be deleted!', 2)
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -140,9 +140,9 @@ async function deleteChannel() {
|
|||||||
await configStore.getPlayoutConfig()
|
await configStore.getPlayoutConfig()
|
||||||
|
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
indexStore.msgAlert('alert-success', 'Delete GUI config success!', 2)
|
indexStore.msgAlert('success', 'Delete GUI config success!', 2)
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', 'Delete GUI config failed!', 2)
|
indexStore.msgAlert('error', 'Delete GUI config failed!', 2)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -99,7 +99,7 @@ async function onSubmitPlayout() {
|
|||||||
const update = await configStore.setPlayoutConfig(configStore.configPlayout)
|
const update = await configStore.setPlayoutConfig(configStore.configPlayout)
|
||||||
|
|
||||||
if (update.status === 200) {
|
if (update.status === 200) {
|
||||||
indexStore.msgAlert('alert-success', 'Update playout config success!', 2)
|
indexStore.msgAlert('success', 'Update playout config success!', 2)
|
||||||
|
|
||||||
const channel = configStore.configGui[configStore.configID].id
|
const channel = configStore.configGui[configStore.configID].id
|
||||||
|
|
||||||
@ -113,7 +113,7 @@ async function onSubmitPlayout() {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', 'Update playout config failed!', 2)
|
indexStore.msgAlert('error', 'Update playout config failed!', 2)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@ -183,20 +183,20 @@ async function getUserConfig() {
|
|||||||
|
|
||||||
async function deleteUser() {
|
async function deleteUser() {
|
||||||
if (configStore.configUser.username === configStore.currentUser) {
|
if (configStore.configUser.username === configStore.currentUser) {
|
||||||
indexStore.msgAlert('alert-error', 'Delete current user not possible!', 2)
|
indexStore.msgAlert('error', 'Delete current user not possible!', 2)
|
||||||
} else {
|
} else {
|
||||||
await fetch(`/api/user/${configStore.configUser.username}`, {
|
await fetch(`/api/user/${configStore.configUser.username}`, {
|
||||||
method: 'DELETE',
|
method: 'DELETE',
|
||||||
headers: authStore.authHeader,
|
headers: authStore.authHeader,
|
||||||
})
|
})
|
||||||
.then(async () => {
|
.then(async () => {
|
||||||
indexStore.msgAlert('alert-success', 'Delete user done!', 2)
|
indexStore.msgAlert('success', 'Delete user done!', 2)
|
||||||
|
|
||||||
await configStore.getUserConfig()
|
await configStore.getUserConfig()
|
||||||
await getUsers()
|
await getUsers()
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
indexStore.msgAlert('alert-error', `Delete user error: ${e}`, 2)
|
indexStore.msgAlert('error', `Delete user error: ${e}`, 2)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -226,17 +226,17 @@ async function addUser(add: boolean) {
|
|||||||
showUserModal.value = false
|
showUserModal.value = false
|
||||||
|
|
||||||
if (update.status === 200) {
|
if (update.status === 200) {
|
||||||
indexStore.msgAlert('alert-success', 'Add user success!', 2)
|
indexStore.msgAlert('success', 'Add user success!', 2)
|
||||||
|
|
||||||
await getUsers()
|
await getUsers()
|
||||||
await getUserConfig()
|
await getUserConfig()
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', 'Add user failed!', 2)
|
indexStore.msgAlert('error', 'Add user failed!', 2)
|
||||||
}
|
}
|
||||||
|
|
||||||
clearUser()
|
clearUser()
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', 'Password mismatch!', 2)
|
indexStore.msgAlert('error', 'Password mismatch!', 2)
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
showUserModal.value = false
|
showUserModal.value = false
|
||||||
@ -253,9 +253,9 @@ async function onSubmitUser() {
|
|||||||
const update = await configStore.setUserConfig(configStore.configUser)
|
const update = await configStore.setUserConfig(configStore.configUser)
|
||||||
|
|
||||||
if (update.status === 200) {
|
if (update.status === 200) {
|
||||||
indexStore.msgAlert('alert-success', 'Update user profile success!', 2)
|
indexStore.msgAlert('success', 'Update user profile success!', 2)
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', 'Update user profile failed!', 2)
|
indexStore.msgAlert('error', 'Update user profile failed!', 2)
|
||||||
}
|
}
|
||||||
|
|
||||||
newPass.value = ''
|
newPass.value = ''
|
||||||
|
|||||||
@ -2,7 +2,7 @@
|
|||||||
<div class="w-full">
|
<div class="w-full">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-[auto_512px] 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">
|
<div class="order-1 p-1">
|
||||||
<div class="bg-base-100 w-full h-full rounded">
|
<div class="bg-base-100 w-full h-full rounded shadow">
|
||||||
<div class="w-full h-full p-2">
|
<div class="w-full h-full p-2">
|
||||||
<video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls />
|
<video v-if="streamExtension === 'flv'" ref="httpStreamFlv" controls />
|
||||||
<VideoPlayer
|
<VideoPlayer
|
||||||
@ -33,7 +33,7 @@
|
|||||||
>
|
>
|
||||||
<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 md:text-2xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center"
|
class="w-full h-full bg-base-100 rounded font-['DigitalNumbers'] p-6 text-3xl md:text-2xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center shadow"
|
||||||
>
|
>
|
||||||
{{ timeStr }}
|
{{ timeStr }}
|
||||||
</div>
|
</div>
|
||||||
@ -41,14 +41,14 @@
|
|||||||
|
|
||||||
<div class="col-span-1 p-1 min-h-[50%]">
|
<div class="col-span-1 p-1 min-h-[50%]">
|
||||||
<div
|
<div
|
||||||
class="w-full h-full bg-base-100 rounded font-['DigitalNumbers-Regular'] p-6 text-3xl md:text-2xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center"
|
class="w-full h-full bg-base-100 rounded font-['DigitalNumbers'] p-6 text-3xl md:text-2xl 2xl:text-5xl 4xl:text-7xl tracking-tighter flex justify-center items-center shadow"
|
||||||
>
|
>
|
||||||
{{ secToHMS(playlistStore.remainingSec >= 0 ? playlistStore.remainingSec : 0) }}
|
{{ secToHMS(playlistStore.remainingSec >= 0 ? playlistStore.remainingSec : 0) }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-span-1 xs: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 rounded flex items-center p-3">
|
<div class="w-full h-full bg-base-100 rounded flex items-center p-3 shadow">
|
||||||
<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">
|
||||||
Live Ingest
|
Live Ingest
|
||||||
@ -78,7 +78,7 @@
|
|||||||
</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 h-full flex justify-center rounded">
|
<div class="bg-base-100 h-full flex justify-center rounded shadow">
|
||||||
<div class="w-full h-full grid grid-cols-3">
|
<div class="w-full h-full grid grid-cols-3">
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<div class="w-full h-1/2 aspect-square p-2">
|
<div class="w-full h-1/2 aspect-square p-2">
|
||||||
@ -116,7 +116,7 @@
|
|||||||
<div class="w-full h-1/2 aspect-square p-2">
|
<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 h-full w-full text-7xl text-cyan-600"
|
class="btn btn-primary h-full w-full text-6xl text-cyan-600"
|
||||||
@click="controlPlayout('reset')"
|
@click="controlPlayout('reset')"
|
||||||
>
|
>
|
||||||
<i class="bi-arrow-repeat" />
|
<i class="bi-arrow-repeat" />
|
||||||
@ -128,7 +128,7 @@
|
|||||||
<div class="w-full h-1/2 aspect-square p-2">
|
<div class="w-full h-1/2 aspect-square p-2">
|
||||||
<button
|
<button
|
||||||
title="Restart Playout Service"
|
title="Restart Playout Service"
|
||||||
class="btn btn-primary h-full w-full text-7xl text-yellow-500"
|
class="btn btn-primary h-full w-full text-6xl text-yellow-500"
|
||||||
@click="controlProcess('restart')"
|
@click="controlProcess('restart')"
|
||||||
>
|
>
|
||||||
<i class="bi-arrow-clockwise" />
|
<i class="bi-arrow-clockwise" />
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="navbar bg-base-100 min-h-[52px] p-0">
|
<div class="navbar bg-base-100 min-h-[52px] p-0 shadow">
|
||||||
<NuxtLink class="navbar-brand p-2" href="/">
|
<NuxtLink class="navbar-brand p-2" href="/">
|
||||||
<img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
|
<img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
|
|||||||
@ -1,15 +1,20 @@
|
|||||||
<template>
|
<template>
|
||||||
<div v-if="show" class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30">
|
<div v-if="show" class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30">
|
||||||
<div class="flex flex-col bg-base-100 min-w-[400px] max-w-[90%] h-auto rounded-md p-5 shadow-xl">
|
<div class="flex flex-col bg-base-100 min-w-[400px] max-w-[90%] h-auto rounded-md p-5 shadow-xl">
|
||||||
<div class="font-bold text-lg">{{ title }}</div>
|
<div class="inline-block">
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<div class="font-bold text-lg truncate flex-1 w-0">{{ title }}</div>
|
||||||
|
<button v-if="hideButtons" class="btn btn-sm w-8 h-8 rounded-full" @click="modalAction(false)"><i class="bi bi-x-lg"></i></button>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="grow mt-3">
|
<div class="grow mt-3">
|
||||||
<slot>
|
<slot>
|
||||||
<div v-html="text" />
|
<div v-html="text" />
|
||||||
</slot>
|
</slot>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="flex justify-end mt-3">
|
<div v-if="!hideButtons" class="flex justify-end mt-3">
|
||||||
<div class="join">
|
<div class="join">
|
||||||
<button class="btn btn-sm bg-base-300 hover:bg-base-300/50 join-item" @click="modalAction(false)">
|
<button class="btn btn-sm bg-base-300 hover:bg-base-300/50 join-item" @click="modalAction(false)">
|
||||||
Cancel
|
Cancel
|
||||||
@ -42,5 +47,9 @@ defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
|
hideButtons: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
})
|
})
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -1,12 +1,10 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30">
|
<div class="z-50 fixed top-0 bottom-0 left-0 right-0 flex justify-center items-center bg-black/30 overflow-y-auto">
|
||||||
<div
|
<div class="flex flex-col bg-base-100 w-[800px] min-w-[300px] max-w-[90%] h-[680px] rounded-md p-5 shadow-xl">
|
||||||
class="flex flex-col bg-base-100 w-[800px] min-w-[400px] max-w-[90%] h-auto min-h-[600px] max-h-[80%] rounded-md p-5 shadow-xl"
|
|
||||||
>
|
|
||||||
<div class="font-bold text-lg">Generate Program</div>
|
<div class="font-bold text-lg">Generate Program</div>
|
||||||
|
|
||||||
<div class="h-[600px] mt-3">
|
<div class="h-[calc(100%-95px)] mt-3">
|
||||||
<div role="tablist" class="tabs tabs-lifted h-full">
|
<div role="tablist" class="tabs tabs-bordered">
|
||||||
<input
|
<input
|
||||||
type="radio"
|
type="radio"
|
||||||
name="my_tabs_2"
|
name="my_tabs_2"
|
||||||
@ -16,14 +14,17 @@
|
|||||||
@change="advancedGenerator = false"
|
@change="advancedGenerator = false"
|
||||||
checked
|
checked
|
||||||
/>
|
/>
|
||||||
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-4">
|
<div role="tabpanel" class="tab-content pt-3">
|
||||||
<div class="h-full">
|
<div class="w-full">
|
||||||
<nav class="breadcrumbs px-3">
|
<nav class="breadcrumbs px-3 pt-0">
|
||||||
<ul>
|
<ul>
|
||||||
<li v-for="(crumb, index) in mediaStore.crumbs" :key="index">
|
<li v-for="(crumb, index) in mediaStore.folderCrumbs" :key="index">
|
||||||
<button
|
<button
|
||||||
v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index"
|
v-if="
|
||||||
@click="mediaStore.getTree(crumb.path)"
|
mediaStore.folderCrumbs.length > 1 &&
|
||||||
|
mediaStore.folderCrumbs.length - 1 > index
|
||||||
|
"
|
||||||
|
@click="mediaStore.getTree(crumb.path, true)"
|
||||||
>
|
>
|
||||||
<i class="bi-folder-fill me-1" />
|
<i class="bi-folder-fill me-1" />
|
||||||
{{ crumb.text }}
|
{{ crumb.text }}
|
||||||
@ -32,15 +33,15 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
<ul class="bg-base-300 h-[500px] overflow-auto m-1 py-1">
|
<ul class="h-[475px] border border-my-gray rounded overflow-auto bg-base-300 m-1 py-1">
|
||||||
<li
|
<li
|
||||||
class="list-group-item browser-item even:bg-base-200 px-2"
|
class="even:bg-base-200 px-2 w-full"
|
||||||
v-for="folder in mediaStore.folderList.folders"
|
v-for="folder in mediaStore.folderList.folders"
|
||||||
:key="folder.uid"
|
:key="folder.uid"
|
||||||
>
|
>
|
||||||
<div class="grid grid-cols-[auto_40px]">
|
<div class="grid grid-cols-[auto_24px]">
|
||||||
<div class="col browser-item-text">
|
|
||||||
<button
|
<button
|
||||||
|
class="truncate text-left"
|
||||||
@click="
|
@click="
|
||||||
;[
|
;[
|
||||||
(selectedFolders = []),
|
(selectedFolders = []),
|
||||||
@ -57,7 +58,6 @@
|
|||||||
<i class="bi-folder-fill" />
|
<i class="bi-folder-fill" />
|
||||||
{{ folder.name }}
|
{{ folder.name }}
|
||||||
</button>
|
</button>
|
||||||
</div>
|
|
||||||
<div v-if="!generateFromAll" class="text-center">
|
<div v-if="!generateFromAll" class="text-center">
|
||||||
<input
|
<input
|
||||||
class="checkbox checkbox-xs rounded"
|
class="checkbox checkbox-xs rounded"
|
||||||
@ -87,62 +87,55 @@
|
|||||||
aria-label="Advanced"
|
aria-label="Advanced"
|
||||||
@change=";(advancedGenerator = true), resetCheckboxes()"
|
@change=";(advancedGenerator = true), resetCheckboxes()"
|
||||||
/>
|
/>
|
||||||
<div role="tabpanel" class="tab-content bg-base-100 border-base-300 rounded-box p-6">
|
<div role="tabpanel" class="tab-content pt-3">
|
||||||
<div>
|
<div class="w-full">
|
||||||
<div class="row">
|
<div class="grid grid-cols-2 px-3 pt-0">
|
||||||
<div class="col col-10">
|
<nav class="breadcrumbs pt-0">
|
||||||
<nav aria-label="breadcrumb">
|
<ul>
|
||||||
<ol class="breadcrumb border-0">
|
<li v-for="(crumb, index) in mediaStore.folderCrumbs" :key="index">
|
||||||
<li
|
<button
|
||||||
class="breadcrumb-item"
|
|
||||||
v-for="(crumb, index) in mediaStore.folderCrumbs"
|
|
||||||
:key="index"
|
|
||||||
:active="index === mediaStore.folderCrumbs.length - 1"
|
|
||||||
@click.prevent="mediaStore.getTree(crumb.path, true)"
|
|
||||||
>
|
|
||||||
<a
|
|
||||||
v-if="
|
v-if="
|
||||||
mediaStore.folderCrumbs.length > 1 &&
|
mediaStore.folderCrumbs.length > 1 &&
|
||||||
mediaStore.folderCrumbs.length - 1 > index
|
mediaStore.folderCrumbs.length - 1 > index
|
||||||
"
|
"
|
||||||
href="#"
|
@click="mediaStore.getTree(crumb.path, true)"
|
||||||
>
|
>
|
||||||
|
<i class="bi-folder-fill me-1" />
|
||||||
{{ crumb.text }}
|
{{ crumb.text }}
|
||||||
</a>
|
</button>
|
||||||
<span v-else>{{ crumb.text }}</span>
|
<span v-else><i class="bi-folder-fill me-1" />{{ crumb.text }}</span>
|
||||||
</li>
|
</li>
|
||||||
</ol>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
</div>
|
<div class="flex justify-end">
|
||||||
<div class="col d-flex justify-content-end">
|
<button
|
||||||
<button type="button" class="btn btn-primary p-2 py-0 m-1" @click="addTemplate()">
|
type="button"
|
||||||
|
class="btn btn-sm btn-primary"
|
||||||
|
title="Add time block"
|
||||||
|
@click="addTemplate()"
|
||||||
|
>
|
||||||
<i class="bi bi-folder-plus"></i>
|
<i class="bi bi-folder-plus"></i>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="row">
|
<div
|
||||||
<div class="col col-5 browser-col">
|
class="h-[475px] border border-my-gray rounded grid grid-cols-[300px_auto] bg-base-300 m-1"
|
||||||
|
>
|
||||||
<Sortable
|
<Sortable
|
||||||
:list="mediaStore.folderList.folders"
|
:list="mediaStore.folderList.folders"
|
||||||
:options="templateBrowserSortOptions"
|
:options="templateBrowserSortOptions"
|
||||||
item-key="uid"
|
item-key="uid"
|
||||||
class="list-group media-browser-scroll browser-div"
|
class="overflow-auto border-e border-my-gray py-1"
|
||||||
tag="ul"
|
tag="ul"
|
||||||
>
|
>
|
||||||
<template #item="{ element, index }">
|
<template #item="{ element, index }">
|
||||||
<li
|
<li
|
||||||
:id="`adv_folder_${index}`"
|
:id="`adv_folder_${index}`"
|
||||||
class="draggable list-group-item browser-item"
|
class="even:bg-base-200 draggable px-2 w-full"
|
||||||
:key="element.uid"
|
:key="element.uid"
|
||||||
>
|
>
|
||||||
<div class="row">
|
<button
|
||||||
<div class="col-1 browser-icons-col">
|
class="w-full truncate text-left"
|
||||||
<i class="bi-folder-fill browser-icons" />
|
|
||||||
</div>
|
|
||||||
<div class="col browser-item-text">
|
|
||||||
<a
|
|
||||||
class="link-light"
|
|
||||||
href="#"
|
|
||||||
@click="
|
@click="
|
||||||
;[
|
;[
|
||||||
(selectedFolders = []),
|
(selectedFolders = []),
|
||||||
@ -156,68 +149,69 @@
|
|||||||
]
|
]
|
||||||
"
|
"
|
||||||
>
|
>
|
||||||
|
<i class="bi-folder-fill" />
|
||||||
{{ element.name }}
|
{{ element.name }}
|
||||||
</a>
|
</button>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
</Sortable>
|
</Sortable>
|
||||||
|
<ul class="overflow-auto p-2">
|
||||||
|
<li
|
||||||
|
v-for="item in template.sources"
|
||||||
|
:key="item.start"
|
||||||
|
class="flex flex-col gap-1 justify-center items-center border border-my-gray rounded p-1"
|
||||||
|
>
|
||||||
|
<div class="grid grid-cols-[50px_67px_70px_67px_50px] join">
|
||||||
|
<div
|
||||||
|
class="input input-sm input-bordered join-item px-2 text-center bg-base-200"
|
||||||
|
>
|
||||||
|
Start:
|
||||||
</div>
|
</div>
|
||||||
<div class="col template-col">
|
|
||||||
<ul class="list-group media-browser-scroll">
|
|
||||||
<li v-for="item in template.sources" :key="item.start" class="list-group-item">
|
|
||||||
<div class="input-group mb-3">
|
|
||||||
<span class="input-group-text">Start</span>
|
|
||||||
<input
|
<input
|
||||||
type="test"
|
type="text"
|
||||||
class="form-control"
|
class="input input-sm input-bordered join-item px-2 text-center"
|
||||||
aria-label="Start"
|
|
||||||
v-model="item.start"
|
v-model="item.start"
|
||||||
/>
|
/>
|
||||||
<span class="input-group-text">Duration</span>
|
<div
|
||||||
|
class="input input-sm input-bordered join-item px-2 text-center bg-base-200"
|
||||||
|
>
|
||||||
|
Duration:
|
||||||
|
</div>
|
||||||
<input
|
<input
|
||||||
type="test"
|
type="text"
|
||||||
class="form-control"
|
class="input input-sm input-bordered join-item px-2 text-center"
|
||||||
aria-label="Duration"
|
|
||||||
v-model="item.duration"
|
v-model="item.duration"
|
||||||
/>
|
/>
|
||||||
<input
|
<button
|
||||||
type="checkbox"
|
class="btn btn-sm input-bordered join-item"
|
||||||
class="btn-check"
|
:class="item.shuffle ? 'bg-base-100' : 'bg-base-300'"
|
||||||
:id="`shuffle-${item.start}`"
|
@click="item.shuffle = !item.shuffle"
|
||||||
autocomplete="off"
|
>
|
||||||
v-model="item.shuffle"
|
{{ item.shuffle ? 'Shuffle' : 'Sorted' }}
|
||||||
/>
|
</button>
|
||||||
<label class="btn btn-outline-primary" :for="`shuffle-${item.start}`">
|
|
||||||
Shuffle
|
|
||||||
</label>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Sortable
|
<Sortable
|
||||||
:list="item.paths"
|
:list="item.paths"
|
||||||
item-key="index"
|
item-key="index"
|
||||||
class="list-group w-100 border"
|
class="w-full border border-my-gray rounded"
|
||||||
:style="`height: ${item.paths ? item.paths.length * 23 + 31 : 300}px`"
|
:style="`height: ${item.paths ? item.paths.length * 23 + 31 : 300}px`"
|
||||||
tag="ul"
|
tag="ul"
|
||||||
:options="templateTargetSortOptions"
|
:options="templateTargetSortOptions"
|
||||||
@add="addFolderToTemplate($event, item)"
|
@add="addFolderToTemplate($event, item)"
|
||||||
>
|
>
|
||||||
<template #item="{ element, index }">
|
<template #item="{ element, index }">
|
||||||
<li
|
<li :id="`path_${index}`" class="draggable grabbing py-0 even:bg-base-200 px-2" :key="index">
|
||||||
:id="`path_${index}`"
|
<i class="bi-folder-fill" />
|
||||||
class="draggable grabbing list-group-item py-0"
|
|
||||||
:key="index"
|
|
||||||
>
|
|
||||||
{{ element.split(/[\\/]+/).pop() }}
|
{{ element.split(/[\\/]+/).pop() }}
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
</Sortable>
|
</Sortable>
|
||||||
|
|
||||||
<div class="col d-flex justify-content-end">
|
<div class="w-full flex justify-end">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="btn btn-primary p-2 py-0 m-1"
|
class="btn btn-sm bg-base-100"
|
||||||
@click="removeTemplate(item)"
|
@click="removeTemplate(item)"
|
||||||
>
|
>
|
||||||
<i class="bi-trash" />
|
<i class="bi-trash" />
|
||||||
@ -230,20 +224,23 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex h-14 pt-6 justify-end items-center">
|
<div class="flex h-14 pt-6 justify-end items-center">
|
||||||
<div v-if="!advancedGenerator" class="form-control">
|
<div v-if="!advancedGenerator" class="form-control">
|
||||||
<label class="label cursor-pointer w-12">
|
<label class="label cursor-pointer w-12">
|
||||||
<span class="label-text">All</span>
|
<span class="label-text">All</span>
|
||||||
<input type="checkbox" v-model="generateFromAll" class="checkbox checkbox-xs rounded" @change="resetCheckboxes()" />
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
v-model="generateFromAll"
|
||||||
|
class="checkbox checkbox-xs rounded"
|
||||||
|
@change="resetCheckboxes()"
|
||||||
|
/>
|
||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
<div class="join ms-2">
|
<div class="join ms-2">
|
||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="btn btn-sm btn-primary join-item"
|
class="btn btn-sm btn-primary join-item"
|
||||||
data-bs-dismiss="modal"
|
|
||||||
@click="resetCheckboxes(), resetTemplate(), close()"
|
@click="resetCheckboxes(), resetTemplate(), close()"
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
@ -251,7 +248,6 @@
|
|||||||
<button
|
<button
|
||||||
type="button"
|
type="button"
|
||||||
class="btn btn-sm btn-primary join-item"
|
class="btn btn-sm btn-primary join-item"
|
||||||
data-bs-dismiss="modal"
|
|
||||||
@click="generatePlaylist(), close()"
|
@click="generatePlaylist(), close()"
|
||||||
>
|
>
|
||||||
Ok
|
Ok
|
||||||
@ -262,6 +258,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
const { $dayjs } = useNuxtApp()
|
||||||
|
|
||||||
const authStore = useAuth()
|
const authStore = useAuth()
|
||||||
const configStore = useConfig()
|
const configStore = useConfig()
|
||||||
const indexStore = useIndex()
|
const indexStore = useIndex()
|
||||||
@ -281,7 +279,6 @@ defineProps({
|
|||||||
})
|
})
|
||||||
|
|
||||||
const advancedGenerator = ref(false)
|
const advancedGenerator = ref(false)
|
||||||
const playlistIsLoading = ref(false)
|
|
||||||
const selectedFolders = ref([] as string[])
|
const selectedFolders = ref([] as string[])
|
||||||
const generateFromAll = ref(false)
|
const generateFromAll = ref(false)
|
||||||
const template = ref({
|
const template = ref({
|
||||||
@ -299,7 +296,7 @@ const templateTargetSortOptions = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
async function generatePlaylist() {
|
async function generatePlaylist() {
|
||||||
playlistIsLoading.value = true
|
playlistStore.isLoading = true
|
||||||
let body = null as BodyObject | null
|
let body = null as BodyObject | null
|
||||||
|
|
||||||
if (selectedFolders.value.length > 0 && !generateFromAll.value) {
|
if (selectedFolders.value.length > 0 && !generateFromAll.value) {
|
||||||
@ -326,17 +323,17 @@ async function generatePlaylist() {
|
|||||||
response.program,
|
response.program,
|
||||||
false
|
false
|
||||||
)
|
)
|
||||||
indexStore.msgAlert('alert-success', 'Generate Playlist done...', 2)
|
indexStore.msgAlert('success', 'Generate Playlist done...', 2)
|
||||||
})
|
})
|
||||||
.catch((e: any) => {
|
.catch((e: any) => {
|
||||||
indexStore.msgAlert('alert-error', e.data ? e.data : e, 4)
|
indexStore.msgAlert('error', e.data ? e.data : e, 4)
|
||||||
})
|
})
|
||||||
|
|
||||||
// reset selections
|
// reset selections
|
||||||
resetCheckboxes()
|
resetCheckboxes()
|
||||||
resetTemplate()
|
resetTemplate()
|
||||||
|
|
||||||
playlistIsLoading.value = false
|
playlistStore.isLoading = false
|
||||||
}
|
}
|
||||||
|
|
||||||
function setSelectedFolder(event: any, folder: string) {
|
function setSelectedFolder(event: any, folder: string) {
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left">
|
<div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow">
|
||||||
<div class="p-4 bg-base-100">
|
<div class="p-4 bg-base-100">
|
||||||
<span class="text-3xl">{{ sysStat.system.name }} {{ sysStat.system.version }}</span>
|
<span class="text-3xl">{{ sysStat.system.name }} {{ sysStat.system.version }}</span>
|
||||||
<span v-if="sysStat.system.kernel">
|
<span v-if="sysStat.system.kernel">
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="min-h-screen bg-base-200">
|
<div class="min-h-screen bg-base-200">
|
||||||
<div v-if="authStore.isLogin && route.name !== 'index'">
|
<div v-if="authStore.isLogin && route.name !== 'index'" class="sticky top-0 z-10">
|
||||||
<Menu />
|
<Menu />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -18,12 +18,5 @@ const authStore = useAuth()
|
|||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
// @ts-ignore
|
|
||||||
// new $bootstrap.Tooltip(document.body, {
|
|
||||||
// selector: "[data-tooltip=tooltip]",
|
|
||||||
// container: "body"
|
|
||||||
// })
|
|
||||||
})
|
|
||||||
await configStore.nuxtClientInit()
|
await configStore.nuxtClientInit()
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -61,13 +61,6 @@ export default defineNuxtConfig({
|
|||||||
},
|
},
|
||||||
|
|
||||||
vite: {
|
vite: {
|
||||||
css: {
|
|
||||||
preprocessorOptions: {
|
|
||||||
scss: {
|
|
||||||
additionalData: '@import "@/assets/scss/_variables.scss";',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
build: {
|
build: {
|
||||||
chunkSizeWarningLimit: 800000,
|
chunkSizeWarningLimit: 800000,
|
||||||
},
|
},
|
||||||
|
|||||||
24
package-lock.json
generated
24
package-lock.json
generated
@ -13,6 +13,7 @@
|
|||||||
"@nuxtjs/color-mode": "^3.3.3",
|
"@nuxtjs/color-mode": "^3.3.3",
|
||||||
"@pinia/nuxt": "^0.5.1",
|
"@pinia/nuxt": "^0.5.1",
|
||||||
"@popperjs/core": "^2.11.8",
|
"@popperjs/core": "^2.11.8",
|
||||||
|
"@vuepic/vue-datepicker": "^8.4.0",
|
||||||
"@vueuse/nuxt": "^10.9.0",
|
"@vueuse/nuxt": "^10.9.0",
|
||||||
"bootstrap-icons": "^1.11.3",
|
"bootstrap-icons": "^1.11.3",
|
||||||
"cookie-universal-nuxt": "^2.2.2",
|
"cookie-universal-nuxt": "^2.2.2",
|
||||||
@ -4801,6 +4802,20 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz",
|
||||||
"integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
|
"integrity": "sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@vuepic/vue-datepicker": {
|
||||||
|
"version": "8.4.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/@vuepic/vue-datepicker/-/vue-datepicker-8.4.0.tgz",
|
||||||
|
"integrity": "sha512-Twgvqwd5GrQf3JT2DvAQ/Ku0+sM51zsH1OkQKoRwYqJyF+EugItS8I0CveYmcI3Gbu92RZ9C3DMutvkaiuDzAQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"date-fns": "^3.6.0"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": ">=18.12.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": ">=3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@vueuse/components": {
|
"node_modules/@vueuse/components": {
|
||||||
"version": "10.9.0",
|
"version": "10.9.0",
|
||||||
"resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.9.0.tgz",
|
"resolved": "https://registry.npmjs.org/@vueuse/components/-/components-10.9.0.tgz",
|
||||||
@ -6711,6 +6726,15 @@
|
|||||||
"url": "https://github.com/sponsors/ljharb"
|
"url": "https://github.com/sponsors/ljharb"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/date-fns": {
|
||||||
|
"version": "3.6.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
|
||||||
|
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
|
||||||
|
"funding": {
|
||||||
|
"type": "github",
|
||||||
|
"url": "https://github.com/sponsors/kossnocorp"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/dayjs": {
|
"node_modules/dayjs": {
|
||||||
"version": "1.11.10",
|
"version": "1.11.10",
|
||||||
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
|
"resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz",
|
||||||
|
|||||||
@ -17,6 +17,7 @@
|
|||||||
"@nuxtjs/color-mode": "^3.3.3",
|
"@nuxtjs/color-mode": "^3.3.3",
|
||||||
"@pinia/nuxt": "^0.5.1",
|
"@pinia/nuxt": "^0.5.1",
|
||||||
"@popperjs/core": "^2.11.8",
|
"@popperjs/core": "^2.11.8",
|
||||||
|
"@vuepic/vue-datepicker": "^8.4.0",
|
||||||
"@vueuse/nuxt": "^10.9.0",
|
"@vueuse/nuxt": "^10.9.0",
|
||||||
"bootstrap-icons": "^1.11.3",
|
"bootstrap-icons": "^1.11.3",
|
||||||
"cookie-universal-nuxt": "^2.2.2",
|
"cookie-universal-nuxt": "^2.2.2",
|
||||||
|
|||||||
@ -15,6 +15,21 @@
|
|||||||
Configure
|
Configure
|
||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
<button class="btn join-item btn-primary" @click="logout()">Logout</button>
|
<button class="btn join-item btn-primary" @click="logout()">Logout</button>
|
||||||
|
<label class="join-item btn btn-primary swap swap-rotate me-2">
|
||||||
|
<input type="checkbox" @change="toggleDarkTheme" :checked="indexStore.darkMode" />
|
||||||
|
|
||||||
|
<svg class="swap-on fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
|
||||||
|
<path
|
||||||
|
d="M5.64,17l-.71.71a1,1,0,0,0,0,1.41,1,1,0,0,0,1.41,0l.71-.71A1,1,0,0,0,5.64,17ZM5,12a1,1,0,0,0-1-1H3a1,1,0,0,0,0,2H4A1,1,0,0,0,5,12Zm7-7a1,1,0,0,0,1-1V3a1,1,0,0,0-2,0V4A1,1,0,0,0,12,5ZM5.64,7.05a1,1,0,0,0,.7.29,1,1,0,0,0,.71-.29,1,1,0,0,0,0-1.41l-.71-.71A1,1,0,0,0,4.93,6.34Zm12,.29a1,1,0,0,0,.7-.29l.71-.71a1,1,0,1,0-1.41-1.41L17,5.64a1,1,0,0,0,0,1.41A1,1,0,0,0,17.66,7.34ZM21,11H20a1,1,0,0,0,0,2h1a1,1,0,0,0,0-2Zm-9,8a1,1,0,0,0-1,1v1a1,1,0,0,0,2,0V20A1,1,0,0,0,12,19ZM18.36,17A1,1,0,0,0,17,18.36l.71.71a1,1,0,0,0,1.41,0,1,1,0,0,0,0-1.41ZM12,6.5A5.5,5.5,0,1,0,17.5,12,5.51,5.51,0,0,0,12,6.5Zm0,9A3.5,3.5,0,1,1,15.5,12,3.5,3.5,0,0,1,12,15.5Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
|
||||||
|
<svg class="swap-off fill-current w-5 h-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 22 22">
|
||||||
|
<path
|
||||||
|
d="M21.64,13a1,1,0,0,0-1.05-.14,8.05,8.05,0,0,1-3.37.73A8.15,8.15,0,0,1,9.08,5.49a8.59,8.59,0,0,1,.25-2A1,1,0,0,0,8,2.36,10.14,10.14,0,1,0,22,14.05,1,1,0,0,0,21.64,13Zm-9.5,6.69A8.14,8.14,0,0,1,7.08,5.22v.27A10.15,10.15,0,0,0,17.22,15.63a9.79,9.79,0,0,0,2.1-.22A8.11,8.11,0,0,1,12.14,19.73Z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="w-96 min-w-full flex flex-col justify-center items-center px-4">
|
<div v-else class="w-96 min-w-full flex flex-col justify-center items-center px-4">
|
||||||
@ -45,7 +60,7 @@
|
|||||||
<div
|
<div
|
||||||
v-if="showLoginError"
|
v-if="showLoginError"
|
||||||
role="alert"
|
role="alert"
|
||||||
class="alert alert-error w-auto rounded z-2 h-12 p-[0.7rem]"
|
class="alert error w-auto rounded z-2 h-12 p-[0.7rem]"
|
||||||
>
|
>
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
@ -70,8 +85,10 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
const colorMode = useColorMode()
|
||||||
const authStore = useAuth()
|
const authStore = useAuth()
|
||||||
const configStore = useConfig()
|
const configStore = useConfig()
|
||||||
|
const indexStore = useIndex()
|
||||||
|
|
||||||
const formError = ref('')
|
const formError = ref('')
|
||||||
const showLoginError = ref(false)
|
const showLoginError = ref(false)
|
||||||
@ -103,6 +120,16 @@ async function login() {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleDarkTheme() {
|
||||||
|
indexStore.darkMode = !indexStore.darkMode
|
||||||
|
|
||||||
|
if (indexStore.darkMode) {
|
||||||
|
colorMode.preference = 'dark'
|
||||||
|
} else {
|
||||||
|
colorMode.preference = 'light'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
async function logout() {
|
async function logout() {
|
||||||
try {
|
try {
|
||||||
authStore.removeToken()
|
authStore.removeToken()
|
||||||
|
|||||||
@ -1,7 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="flex justify-end p-3 h-14">
|
<div class="flex justify-end p-3 h-14">
|
||||||
<div>
|
<div>
|
||||||
<input type="date" class="input input-sm input-bordered w-full max-w-xs" v-model="listDate" />
|
<VueDatePicker
|
||||||
|
v-model="listDate"
|
||||||
|
:clearable="false"
|
||||||
|
:hide-navigation="['time']"
|
||||||
|
:action-row="{ showCancel: false, showSelect: false, showPreview: false }"
|
||||||
|
:format="calendarFormat"
|
||||||
|
model-type="yyyy-MM-dd"
|
||||||
|
auto-apply
|
||||||
|
:dark="colorMode.value === 'dark'"
|
||||||
|
input-class-name="input input-sm !input-bordered !w-[230px] text-right !pe-3"
|
||||||
|
required
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="px-3 inline-block h-[calc(100vh-140px)] text-[13px]">
|
<div class="px-3 inline-block h-[calc(100vh-140px)] text-[13px]">
|
||||||
@ -12,6 +23,8 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
|
|
||||||
|
const colorMode = useColorMode()
|
||||||
|
|
||||||
useHead({
|
useHead({
|
||||||
title: 'Logging | ffplayout',
|
title: 'Logging | ffplayout',
|
||||||
})
|
})
|
||||||
@ -33,6 +46,10 @@ watch([listDate, configID], () => {
|
|||||||
getLog()
|
getLog()
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const calendarFormat = (date: Date) => {
|
||||||
|
return $dayjs(date).format('dddd DD. MMM YYYY')
|
||||||
|
}
|
||||||
|
|
||||||
async function getLog() {
|
async function getLog() {
|
||||||
let date = listDate.value
|
let date = listDate.value
|
||||||
|
|
||||||
@ -54,49 +71,49 @@ async function getLog() {
|
|||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style>
|
||||||
.log-time {
|
.log-time {
|
||||||
color: $log-time;
|
color: #666864;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-number {
|
.log-number {
|
||||||
color: $log-number;
|
color: #e2c317;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-addr {
|
.log-addr {
|
||||||
color: $log-addr;
|
color: #ad7fa8;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-cmd {
|
.log-cmd {
|
||||||
color: $log-cmd;
|
color: #6c95c2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-info {
|
.log-info {
|
||||||
color: $log-info;
|
color: #8ae234;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-warning {
|
.log-warning {
|
||||||
color: $log-warning;
|
color: #ff8700;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-error {
|
.log-error {
|
||||||
color: $log-error;
|
color: #d32828;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-debug {
|
.log-debug {
|
||||||
color: $log-debug;
|
color: #6e99c7;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-decoder {
|
.log-decoder {
|
||||||
color: $log-decoder;
|
color: #56efff;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-encoder {
|
.log-encoder {
|
||||||
color: $log-encoder;
|
color: #45ccee;
|
||||||
}
|
}
|
||||||
|
|
||||||
.log-server {
|
.log-server {
|
||||||
color: $log-server;
|
color: #23cbdd;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -21,15 +21,15 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
<div class="h-[calc(100%-34px)] bg-base-100">
|
<div class="relative h-[calc(100%-34px)] min-h-[300px] bg-base-100">
|
||||||
<div
|
<div
|
||||||
v-if="mediaStore.isLoading"
|
v-if="mediaStore.isLoading"
|
||||||
class="w-[calc(100%-16px)] h-[calc(100%-174px)] absolute z-10 flex justify-center bg-base-100/70"
|
class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
|
||||||
>
|
>
|
||||||
<span class="loading loading-spinner loading-lg"></span>
|
<span class="loading loading-spinner loading-lg"></span>
|
||||||
</div>
|
</div>
|
||||||
<splitpanes :horizontal="horizontal" class="border border-my-gray rounded">
|
<splitpanes :horizontal="horizontal" class="border border-my-gray rounded shadow">
|
||||||
<pane min-size="14" max-size="80" size="24" class="h-full pb-1">
|
<pane min-size="14" max-size="80" size="20" class="h-full pb-1 !bg-base-300" :class="horizontal ? 'rounded-t' : 'rounded-s'">
|
||||||
<ul v-if="mediaStore.folderTree.parent" class="overflow-auto h-full m-1" v-on:dragover.prevent>
|
<ul v-if="mediaStore.folderTree.parent" class="overflow-auto h-full m-1" v-on:dragover.prevent>
|
||||||
<li
|
<li
|
||||||
v-if="mediaStore.folderTree.parent_folders.length > 0"
|
v-if="mediaStore.folderTree.parent_folders.length > 0"
|
||||||
@ -69,7 +69,7 @@
|
|||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
</pane>
|
</pane>
|
||||||
<pane class="h-full pb-1">
|
<pane class="h-full pb-1 !bg-base-300" :class="horizontal ? 'rounded-b' : 'rounded-e'">
|
||||||
<ul v-if="mediaStore.folderTree.parent" class="h-full overflow-auto m-1" v-on:dragover.prevent>
|
<ul v-if="mediaStore.folderTree.parent" class="h-full overflow-auto m-1" v-on:dragover.prevent>
|
||||||
<li
|
<li
|
||||||
class="grid grid-cols-[auto_28px] px-2 gap-1"
|
class="grid grid-cols-[auto_28px] px-2 gap-1"
|
||||||
@ -155,8 +155,8 @@
|
|||||||
</pane>
|
</pane>
|
||||||
</splitpanes>
|
</splitpanes>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="flex justify-end pe-10 mt-7">
|
<div class="flex justify-end py-4 pe-2">
|
||||||
<div class="join">
|
<div class="join">
|
||||||
<button class="btn btn-sm btn-primary join-item" title="Create Folder" @click="showCreateModal = true">
|
<button class="btn btn-sm btn-primary join-item" title="Create Folder" @click="showCreateModal = true">
|
||||||
<i class="bi-folder-plus" />
|
<i class="bi-folder-plus" />
|
||||||
@ -166,6 +166,7 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<Modal
|
<Modal
|
||||||
:show="showDeleteModal"
|
:show="showDeleteModal"
|
||||||
@ -366,7 +367,7 @@ async function handleDrop(event: any, targetFolder: any, isParent: boolean | nul
|
|||||||
mediaStore.getTree(mediaStore.folderTree.source)
|
mediaStore.getTree(mediaStore.folderTree.source)
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
indexStore.msgAlert('alert-error', `Delete error: ${e}`, 3)
|
indexStore.msgAlert('error', `Delete error: ${e}`, 3)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -428,12 +429,12 @@ async function deleteFileOrFolder(del: boolean) {
|
|||||||
})
|
})
|
||||||
.then(async (response) => {
|
.then(async (response) => {
|
||||||
if (response.status !== 200) {
|
if (response.status !== 200) {
|
||||||
indexStore.msgAlert('alert-error', `${await response.text()}`, 5)
|
indexStore.msgAlert('error', `${await response.text()}`, 5)
|
||||||
}
|
}
|
||||||
mediaStore.getTree(mediaStore.folderTree.source)
|
mediaStore.getTree(mediaStore.folderTree.source)
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
indexStore.msgAlert('alert-error', `Delete error: ${e}`, 5)
|
indexStore.msgAlert('error', `Delete error: ${e}`, 5)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -461,7 +462,7 @@ async function renameFile(ren: boolean) {
|
|||||||
mediaStore.getTree(mediaStore.folderTree.source)
|
mediaStore.getTree(mediaStore.folderTree.source)
|
||||||
})
|
})
|
||||||
.catch((e) => {
|
.catch((e) => {
|
||||||
indexStore.msgAlert('alert-error', `Delete error: ${e}`, 3)
|
indexStore.msgAlert('error', `Delete error: ${e}`, 3)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -482,7 +483,7 @@ async function createFolder(create: boolean) {
|
|||||||
lastPath.value = mediaStore.folderTree.source
|
lastPath.value = mediaStore.folderTree.source
|
||||||
|
|
||||||
if (mediaStore.folderTree.folders.includes(folderName.value)) {
|
if (mediaStore.folderTree.folders.includes(folderName.value)) {
|
||||||
indexStore.msgAlert('alert-warning', `Folder "${folderName.value.name}" exists already!`, 2)
|
indexStore.msgAlert('warning', `Folder "${folderName.value.name}" exists already!`, 2)
|
||||||
|
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
@ -493,11 +494,11 @@ async function createFolder(create: boolean) {
|
|||||||
body: JSON.stringify({ source: path }),
|
body: JSON.stringify({ source: path }),
|
||||||
})
|
})
|
||||||
.then(() => {
|
.then(() => {
|
||||||
indexStore.msgAlert('alert-success', 'Folder create done...', 2)
|
indexStore.msgAlert('success', 'Folder create done...', 2)
|
||||||
})
|
})
|
||||||
.catch((e: string) => {
|
.catch((e: string) => {
|
||||||
indexStore.msgAlert('alert-error', `Folder create error: ${e}`, 3)
|
indexStore.msgAlert('error', `Folder create error: ${e}`, 3)
|
||||||
indexStore.alertVariant = 'alert-error'
|
indexStore.alertVariant = 'error'
|
||||||
})
|
})
|
||||||
|
|
||||||
mediaStore.getTree(lastPath.value)
|
mediaStore.getTree(lastPath.value)
|
||||||
@ -536,7 +537,7 @@ async function upload(file: any): Promise<null | undefined> {
|
|||||||
}
|
}
|
||||||
|
|
||||||
xhr.value.upload.onerror = () => {
|
xhr.value.upload.onerror = () => {
|
||||||
indexStore.msgAlert('alert-error', `Upload error: ${xhr.value.status}`, 3)
|
indexStore.msgAlert('error', `Upload error: ${xhr.value.status}`, 3)
|
||||||
|
|
||||||
resolve(undefined)
|
resolve(undefined)
|
||||||
}
|
}
|
||||||
@ -563,7 +564,7 @@ async function uploadFiles(upl: boolean) {
|
|||||||
currentNumber.value = i + 1
|
currentNumber.value = i + 1
|
||||||
|
|
||||||
if (mediaStore.folderTree.files.find((f) => f.name === file.name)) {
|
if (mediaStore.folderTree.files.find((f) => f.name === file.name)) {
|
||||||
indexStore.msgAlert('alert-warning', 'File exists already!', 3)
|
indexStore.msgAlert('warning', 'File exists already!', 3)
|
||||||
} else {
|
} else {
|
||||||
await upload(file)
|
await upload(file)
|
||||||
}
|
}
|
||||||
|
|||||||
@ -352,9 +352,9 @@ async function savePreset() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
indexStore.msgAlert('alert-success', 'Save Preset done!', 2)
|
indexStore.msgAlert('success', 'Save Preset done!', 2)
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', 'Save Preset failed!', 2)
|
indexStore.msgAlert('error', 'Save Preset failed!', 2)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -390,10 +390,10 @@ async function createNewPreset() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
indexStore.msgAlert('alert-success', 'Save Preset done!', 2)
|
indexStore.msgAlert('success', 'Save Preset done!', 2)
|
||||||
getPreset(-1)
|
getPreset(-1)
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', 'Save Preset failed!', 2)
|
indexStore.msgAlert('error', 'Save Preset failed!', 2)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -431,9 +431,9 @@ async function submitMessage() {
|
|||||||
})
|
})
|
||||||
|
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
indexStore.msgAlert('alert-success', 'Sending success...', 2)
|
indexStore.msgAlert('success', 'Sending success...', 2)
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', 'Sending failed...', 2)
|
indexStore.msgAlert('error', 'Sending failed...', 2)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
235
pages/player.vue
235
pages/player.vue
@ -3,15 +3,31 @@
|
|||||||
<Control />
|
<Control />
|
||||||
<div class="flex justify-end p-1">
|
<div class="flex justify-end p-1">
|
||||||
<div>
|
<div>
|
||||||
<input type="date" class="input input-sm input-bordered w-full max-w-xs" v-model="listDate" />
|
<VueDatePicker
|
||||||
|
v-model="listDate"
|
||||||
|
:clearable="false"
|
||||||
|
:hide-navigation="['time']"
|
||||||
|
:action-row="{ showCancel: false, showSelect: false, showPreview: false }"
|
||||||
|
:format="calendarFormat"
|
||||||
|
model-type="yyyy-MM-dd"
|
||||||
|
auto-apply
|
||||||
|
:dark="colorMode.value === 'dark'"
|
||||||
|
input-class-name="input input-sm !input-bordered !w-[230px] text-right !pe-3"
|
||||||
|
required
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-1 min-h-[500px] h-[calc(100vh-800px)] xl:h-[calc(100vh-480px)]">
|
<div class="p-1 min-h-[260px] h-[calc(100vh-800px)] xl:h-[calc(100vh-480px)]">
|
||||||
<splitpanes class="border border-my-gray rounded">
|
<splitpanes class="border border-my-gray rounded shadow">
|
||||||
<pane class="h-full" min-size="0" max-size="80" size="20">
|
<pane
|
||||||
|
class="relative h-full !bg-base-300 rounded-s"
|
||||||
|
min-size="0"
|
||||||
|
max-size="80"
|
||||||
|
:size="width > 768 ? '20' : '0'"
|
||||||
|
>
|
||||||
<div
|
<div
|
||||||
v-if="mediaStore.isLoading"
|
v-if="mediaStore.isLoading"
|
||||||
class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
|
class="h-full w-full absolute z-10 flex justify-center bg-base-100/70"
|
||||||
>
|
>
|
||||||
<span class="loading loading-spinner loading-lg" />
|
<span class="loading loading-spinner loading-lg" />
|
||||||
</div>
|
</div>
|
||||||
@ -34,7 +50,7 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<ul class="h-[calc(100%-40px)] overflow-auto m-1">
|
<ul class="h-[calc(100%-48px)] overflow-auto m-1">
|
||||||
<li class="flex px-1" v-for="folder in mediaStore.folderTree.folders" :key="folder.uid">
|
<li class="flex px-1" v-for="folder in mediaStore.folderTree.folders" :key="folder.uid">
|
||||||
<button
|
<button
|
||||||
class="truncate"
|
class="truncate"
|
||||||
@ -48,10 +64,11 @@
|
|||||||
<template #item="{ element, index }">
|
<template #item="{ element, index }">
|
||||||
<li
|
<li
|
||||||
:id="`file_${index}`"
|
:id="`file_${index}`"
|
||||||
class="draggable px-1 grid grid-cols-[auto_110px]"
|
class="px-1 grid grid-cols-[auto_110px]"
|
||||||
|
:class="{ 'grabbing cursor-grab': width > 768 }"
|
||||||
:key="element.name"
|
:key="element.name"
|
||||||
>
|
>
|
||||||
<div class="truncate cursor-grab">
|
<div class="truncate">
|
||||||
<i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
|
<i v-if="mediaType(element.name) === 'audio'" class="bi-music-note-beamed" />
|
||||||
<i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
|
<i v-else-if="mediaType(element.name) === 'video'" class="bi-film" />
|
||||||
<i
|
<i
|
||||||
@ -77,9 +94,15 @@
|
|||||||
</ul>
|
</ul>
|
||||||
</pane>
|
</pane>
|
||||||
<pane>
|
<pane>
|
||||||
<div class="w-full h-full">
|
<div class="relative w-full h-full !bg-base-300 rounded-e">
|
||||||
<div
|
<div
|
||||||
class="grid grid-cols-[70px_auto_50px_70px_70px_70px_30px_60px_80px] bg-base-100 py-2 px-3 border-b border-my-gray"
|
v-if="playlistStore.isLoading"
|
||||||
|
class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
|
||||||
|
>
|
||||||
|
<span class="loading loading-spinner loading-lg" />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-[70px_auto_50px_70px_45px] md:grid-cols-[70px_auto_50px_70px_70px_70px_30px_45px_50px] bg-base-100 rounded-tr-lg py-2 px-3 border-b border-my-gray"
|
||||||
>
|
>
|
||||||
<div>Start</div>
|
<div>Start</div>
|
||||||
<div>File</div>
|
<div>File</div>
|
||||||
@ -91,19 +114,12 @@
|
|||||||
<div class="text-center">Edit</div>
|
<div class="text-center">Edit</div>
|
||||||
<div class="hidden md:flex justify-center">Delete</div>
|
<div class="hidden md:flex justify-center">Delete</div>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div id="scroll-container" class="h-[calc(100%-44px)] overflow-auto">
|
||||||
v-if="playlistIsLoading"
|
|
||||||
class="w-full h-full absolute z-10 flex justify-center bg-base-100/70"
|
|
||||||
>
|
|
||||||
<span class="loading loading-spinner loading-lg" />
|
|
||||||
</div>
|
|
||||||
<div id="scroll-container" class="h-full overflow-auto">
|
|
||||||
<Sortable
|
<Sortable
|
||||||
:list="playlistStore.playlist"
|
:list="playlistStore.playlist"
|
||||||
item-key="uid"
|
item-key="uid"
|
||||||
class=""
|
|
||||||
:style="`height: ${
|
:style="`height: ${
|
||||||
playlistStore.playlist ? playlistStore.playlist.length * 38 + 76 : 300
|
playlistStore.playlist ? playlistStore.playlist.length * 38 + 38 : 300
|
||||||
}px`"
|
}px`"
|
||||||
tag="ul"
|
tag="ul"
|
||||||
:options="playlistSortOptions"
|
:options="playlistSortOptions"
|
||||||
@ -113,16 +129,18 @@
|
|||||||
<template #item="{ element, index }">
|
<template #item="{ element, index }">
|
||||||
<li
|
<li
|
||||||
:id="`clip_${index}`"
|
:id="`clip_${index}`"
|
||||||
class="draggable bg-base-300 even:bg-base-100 grid grid-cols-[70px_auto_50px_70px_70px_70px_30px_60px_80px] h-[38px] px-3 py-[8px]"
|
class="draggable grid grid-cols-[70px_auto_50px_70px_45px] md:grid-cols-[70px_auto_50px_70px_70px_70px_30px_45px_50px] h-[38px] px-3 py-[8px]"
|
||||||
:class="
|
:class="
|
||||||
index === playlistStore.currentClipIndex && listDate === todayDate
|
index === playlistStore.currentClipIndex && listDate === todayDate
|
||||||
? 'active-playlist-clip'
|
? 'bg-lime-500/30'
|
||||||
: ''
|
: 'bg-base-300 even:bg-base-100'
|
||||||
"
|
"
|
||||||
:key="element.uid"
|
:key="element.uid"
|
||||||
>
|
>
|
||||||
<div>{{ secondsToTime(element.begin) }}</div>
|
<div>{{ secondsToTime(element.begin) }}</div>
|
||||||
<div class="grabbing truncate cursor-grab">{{ filename(element.source) }}</div>
|
<div class="truncate" :class="{ 'grabbing cursor-grab': width > 768 }">
|
||||||
|
{{ filename(element.source) }}
|
||||||
|
</div>
|
||||||
<div class="text-center">
|
<div class="text-center">
|
||||||
<button @click=";(showPreviewModal = true), setPreviewData(element.source)">
|
<button @click=";(showPreviewModal = true), setPreviewData(element.source)">
|
||||||
<i class="bi-play-fill" />
|
<i class="bi-play-fill" />
|
||||||
@ -148,7 +166,9 @@
|
|||||||
<i class="bi-pencil-square" />
|
<i class="bi-pencil-square" />
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="text-center hidden md:flex justify-center">
|
<div
|
||||||
|
class="text-center hidden md:flex justify-center hover:text-base-content/70"
|
||||||
|
>
|
||||||
<button @click="deletePlaylistItem(index)">
|
<button @click="deletePlaylistItem(index)">
|
||||||
<i class="bi-x-circle-fill" />
|
<i class="bi-x-circle-fill" />
|
||||||
</button>
|
</button>
|
||||||
@ -162,7 +182,7 @@
|
|||||||
</splitpanes>
|
</splitpanes>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="join flex justify-end m-3">
|
<div class="h-16 join flex justify-end p-3">
|
||||||
<button class="btn btn-sm btn-primary join-item" title="Copy Playlist" @click="showCopyModal = true">
|
<button class="btn btn-sm btn-primary join-item" title="Copy Playlist" @click="showCopyModal = true">
|
||||||
<i class="bi-files" />
|
<i class="bi-files" />
|
||||||
</button>
|
</button>
|
||||||
@ -209,7 +229,12 @@
|
|||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Modal :show="showPreviewModal" :title="`Preview: ${previewName}`" :modal-action="closePlayer">
|
<Modal
|
||||||
|
:show="showPreviewModal"
|
||||||
|
:title="`Preview: ${previewName}`"
|
||||||
|
:hide-buttons="true"
|
||||||
|
:modal-action="closePlayer"
|
||||||
|
>
|
||||||
<div class="w-[1024px] max-w-full aspect-video">
|
<div class="w-[1024px] max-w-full aspect-video">
|
||||||
<VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
|
<VideoPlayer v-if="isVideo && previewOpt" reference="previewPlayer" :options="previewOpt" />
|
||||||
<img v-else :src="previewUrl" class="img-fluid" :alt="previewName" />
|
<img v-else :src="previewUrl" class="img-fluid" :alt="previewName" />
|
||||||
@ -300,7 +325,9 @@
|
|||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { storeToRefs } from 'pinia'
|
import { storeToRefs } from 'pinia'
|
||||||
|
|
||||||
|
const colorMode = useColorMode()
|
||||||
const { $_, $dayjs } = useNuxtApp()
|
const { $_, $dayjs } = useNuxtApp()
|
||||||
|
const { width } = useWindowSize({ initialWidth: 800 })
|
||||||
const { secToHMS, filename, secondsToTime, toMin, mediaType } = stringFormatter()
|
const { secToHMS, filename, secondsToTime, toMin, mediaType } = stringFormatter()
|
||||||
const { processPlaylist, genUID } = playlistOperations()
|
const { processPlaylist, genUID } = playlistOperations()
|
||||||
const contentType = { 'content-type': 'application/json;charset=UTF-8' }
|
const contentType = { 'content-type': 'application/json;charset=UTF-8' }
|
||||||
@ -319,7 +346,6 @@ const { configID } = storeToRefs(useConfig())
|
|||||||
const { listDate } = storeToRefs(usePlaylist())
|
const { listDate } = storeToRefs(usePlaylist())
|
||||||
|
|
||||||
const fileImport = ref()
|
const fileImport = ref()
|
||||||
const playlistIsLoading = ref(false)
|
|
||||||
const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
|
const todayDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
|
||||||
const targetDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
|
const targetDate = ref($dayjs().utcOffset(configStore.utcOffset).format('YYYY-MM-DD'))
|
||||||
const editId = ref(-1)
|
const editId = ref(-1)
|
||||||
@ -339,6 +365,7 @@ const isVideo = ref(false)
|
|||||||
|
|
||||||
const browserSortOptions = {
|
const browserSortOptions = {
|
||||||
group: { name: 'playlist', pull: 'clone', put: false },
|
group: { name: 'playlist', pull: 'clone', put: false },
|
||||||
|
handle: '.grabbing',
|
||||||
sort: false,
|
sort: false,
|
||||||
}
|
}
|
||||||
const playlistSortOptions = {
|
const playlistSortOptions = {
|
||||||
@ -382,10 +409,14 @@ function scrollTo(index: number) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const calendarFormat = (date: Date) => {
|
||||||
|
return $dayjs(date).format('dddd DD. MMM YYYY')
|
||||||
|
}
|
||||||
|
|
||||||
async function getPlaylist() {
|
async function getPlaylist() {
|
||||||
playlistIsLoading.value = true
|
playlistStore.isLoading = true
|
||||||
await playlistStore.getPlaylist(listDate.value)
|
await playlistStore.getPlaylist(listDate.value)
|
||||||
playlistIsLoading.value = false
|
playlistStore.isLoading = false
|
||||||
|
|
||||||
if (listDate.value === todayDate.value) {
|
if (listDate.value === todayDate.value) {
|
||||||
scrollTo(playlistStore.currentClipIndex)
|
scrollTo(playlistStore.currentClipIndex)
|
||||||
@ -607,11 +638,11 @@ async function importPlaylist(imp: boolean) {
|
|||||||
const formData = new FormData()
|
const formData = new FormData()
|
||||||
formData.append(textFile.value[0].name, textFile.value[0])
|
formData.append(textFile.value[0].name, textFile.value[0])
|
||||||
|
|
||||||
playlistIsLoading.value = true
|
playlistStore.isLoading = true
|
||||||
await $fetch(
|
await $fetch(
|
||||||
`/api/file/${configStore.configGui[configStore.configID].id}/import/?file=${
|
`/api/file/${configStore.configGui[configStore.configID].id}/import/?file=${
|
||||||
textFile.value[0].name
|
textFile.value[0].name
|
||||||
}&date=${listDate}`,
|
}&date=${listDate.value}`,
|
||||||
{
|
{
|
||||||
method: 'PUT',
|
method: 'PUT',
|
||||||
headers: authStore.authHeader,
|
headers: authStore.authHeader,
|
||||||
@ -619,15 +650,15 @@ async function importPlaylist(imp: boolean) {
|
|||||||
}
|
}
|
||||||
)
|
)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
indexStore.msgAlert('alert-success', 'Import success!', 2)
|
indexStore.msgAlert('success', 'Import success!', 2)
|
||||||
playlistStore.getPlaylist(listDate.value)
|
playlistStore.getPlaylist(listDate.value)
|
||||||
})
|
})
|
||||||
.catch((e: string) => {
|
.catch((e: string) => {
|
||||||
indexStore.msgAlert('alert-error', e, 4)
|
indexStore.msgAlert('error', e, 4)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
playlistIsLoading.value = false
|
playlistStore.isLoading = false
|
||||||
textFile.value = null
|
textFile.value = null
|
||||||
fileImport.value.value = null
|
fileImport.value.value = null
|
||||||
}
|
}
|
||||||
@ -658,13 +689,13 @@ async function savePlaylist(save: boolean) {
|
|||||||
}),
|
}),
|
||||||
})
|
})
|
||||||
.then((response: any) => {
|
.then((response: any) => {
|
||||||
indexStore.msgAlert('alert-success', response, 2)
|
indexStore.msgAlert('success', response, 2)
|
||||||
})
|
})
|
||||||
.catch((e: any) => {
|
.catch((e: any) => {
|
||||||
if (e.status === 409) {
|
if (e.status === 409) {
|
||||||
indexStore.msgAlert('alert-warning', e.data, 2)
|
indexStore.msgAlert('warning', e.data, 2)
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', e, 4)
|
indexStore.msgAlert('error', e, 4)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
@ -674,140 +705,14 @@ async function deletePlaylist(del: boolean) {
|
|||||||
showDeleteModal.value = false
|
showDeleteModal.value = false
|
||||||
|
|
||||||
if (del) {
|
if (del) {
|
||||||
await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/${listDate}`, {
|
await $fetch(`/api/playlist/${configStore.configGui[configStore.configID].id}/${listDate.value}`, {
|
||||||
method: 'DELETE',
|
method: 'DELETE',
|
||||||
headers: { ...contentType, ...authStore.authHeader },
|
headers: { ...contentType, ...authStore.authHeader },
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
playlistStore.playlist = []
|
playlistStore.playlist = []
|
||||||
|
|
||||||
indexStore.msgAlert('alert-warning', 'Playlist deleted...', 2)
|
indexStore.msgAlert('warning', 'Playlist deleted...', 2)
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
|
||||||
.filename,
|
|
||||||
.browser-item {
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loading-overlay {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
height: calc(100% - 140px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist-container {
|
|
||||||
height: 100%;
|
|
||||||
border: 1px solid $border-color;
|
|
||||||
border-top: none;
|
|
||||||
border-left: none;
|
|
||||||
border-radius: $b-radius;
|
|
||||||
}
|
|
||||||
|
|
||||||
.player-container .media-browser-scroll {
|
|
||||||
height: calc(100% - 39px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-playlist-clip {
|
|
||||||
background-color: #565e6a !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-row {
|
|
||||||
height: calc(100% - 480px);
|
|
||||||
min-height: 300px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pane-row {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timecode {
|
|
||||||
min-width: 65px;
|
|
||||||
max-width: 90px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist-input {
|
|
||||||
min-width: 42px;
|
|
||||||
max-width: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist-list-group,
|
|
||||||
#playlist-group {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist-item {
|
|
||||||
height: 38px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist-item:nth-of-type(odd) {
|
|
||||||
background-color: #3b424a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.playlist-item:hover {
|
|
||||||
background-color: #1c1e22;
|
|
||||||
}
|
|
||||||
|
|
||||||
.overLength {
|
|
||||||
background-color: #ed890641 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
#generateModal .modal-body {
|
|
||||||
height: 600px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.browser-col,
|
|
||||||
.template-col {
|
|
||||||
height: 532px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#generateModal {
|
|
||||||
--bs-modal-width: 800px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#generateModal .media-browser-scroll {
|
|
||||||
height: calc(100% - 35px);
|
|
||||||
}
|
|
||||||
|
|
||||||
#generateModal .browser-div li:nth-of-type(odd) {
|
|
||||||
background-color: #3b424a;
|
|
||||||
}
|
|
||||||
|
|
||||||
.select-all-div {
|
|
||||||
margin-right: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active-playlist-clip {
|
|
||||||
background-color: #405f51 !important;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<style>
|
|
||||||
@media (max-width: 575px) {
|
|
||||||
.mobile-hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/*.splitpanes__splitter {
|
|
||||||
display: none !important;
|
|
||||||
}*/
|
|
||||||
|
|
||||||
.playlist-pane {
|
|
||||||
width: 100% !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -1,8 +1,15 @@
|
|||||||
import dayjs from 'dayjs'
|
import dayjs from 'dayjs'
|
||||||
import customParseFormat from 'dayjs/plugin/customParseFormat.js'
|
import customParseFormat from 'dayjs/plugin/customParseFormat.js'
|
||||||
|
import LocalizedFormat from 'dayjs/plugin/localizedFormat.js'
|
||||||
import timezone from 'dayjs/plugin/timezone.js'
|
import timezone from 'dayjs/plugin/timezone.js'
|
||||||
import utc from 'dayjs/plugin/utc.js'
|
import utc from 'dayjs/plugin/utc.js'
|
||||||
|
|
||||||
|
// import 'dayjs/locale/de'
|
||||||
|
// import 'dayjs/locale/en'
|
||||||
|
// import 'dayjs/locale/es'
|
||||||
|
// import 'dayjs/locale/pt'
|
||||||
|
// import 'dayjs/locale/ru'
|
||||||
|
|
||||||
declare module '#app' {
|
declare module '#app' {
|
||||||
interface NuxtApp {
|
interface NuxtApp {
|
||||||
$dayjs(date?: dayjs.ConfigType): dayjs.Dayjs
|
$dayjs(date?: dayjs.ConfigType): dayjs.Dayjs
|
||||||
@ -16,6 +23,7 @@ declare module '@vue/runtime-core' {
|
|||||||
|
|
||||||
export default defineNuxtPlugin((nuxtApp) => {
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
dayjs.extend(customParseFormat)
|
dayjs.extend(customParseFormat)
|
||||||
|
dayjs.extend(LocalizedFormat)
|
||||||
dayjs.extend(timezone)
|
dayjs.extend(timezone)
|
||||||
dayjs.extend(utc)
|
dayjs.extend(utc)
|
||||||
|
|
||||||
|
|||||||
6
plugins/vue-datepicker.client.ts
Normal file
6
plugins/vue-datepicker.client.ts
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import VueDatePicker from '@vuepic/vue-datepicker';
|
||||||
|
import '@vuepic/vue-datepicker/dist/main.css'
|
||||||
|
|
||||||
|
export default defineNuxtPlugin((nuxtApp) => {
|
||||||
|
nuxtApp.vueApp.component('VueDatePicker', VueDatePicker)
|
||||||
|
})
|
||||||
@ -74,7 +74,7 @@ export const useConfig = defineStore('config', {
|
|||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
indexStore.msgAlert('alert-error', e, 3)
|
indexStore.msgAlert('error', e, 3)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
@ -143,7 +143,7 @@ export const useConfig = defineStore('config', {
|
|||||||
this.configPlayout = data
|
this.configPlayout = data
|
||||||
})
|
})
|
||||||
.catch(() => {
|
.catch(() => {
|
||||||
indexStore.msgAlert('alert-error', 'No playout config found!', 3)
|
indexStore.msgAlert('error', 'No playout config found!', 3)
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|||||||
@ -4,7 +4,7 @@ export const useIndex = defineStore('index', {
|
|||||||
state: () => ({
|
state: () => ({
|
||||||
darkMode: false,
|
darkMode: false,
|
||||||
showAlert: false,
|
showAlert: false,
|
||||||
alertVariant: 'alert-success',
|
alertVariant: 'success',
|
||||||
alertMsg: '',
|
alertMsg: '',
|
||||||
}),
|
}),
|
||||||
|
|
||||||
@ -17,9 +17,9 @@ export const useIndex = defineStore('index', {
|
|||||||
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
this.showAlert = false
|
this.showAlert = false
|
||||||
this.alertVariant = 'alert-success'
|
this.alertVariant = 'success'
|
||||||
this.alertMsg = ''
|
this.alertMsg = ''
|
||||||
}, seconds * 1000);
|
}, seconds * 1000)
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|||||||
@ -15,7 +15,10 @@ export const useMedia = defineStore('media', {
|
|||||||
getters: {},
|
getters: {},
|
||||||
actions: {
|
actions: {
|
||||||
async getTree(path: string, foldersOnly: boolean = false) {
|
async getTree(path: string, foldersOnly: boolean = false) {
|
||||||
|
if (!foldersOnly) {
|
||||||
this.isLoading = true
|
this.isLoading = true
|
||||||
|
}
|
||||||
|
|
||||||
const authStore = useAuth()
|
const authStore = useAuth()
|
||||||
const configStore = useConfig()
|
const configStore = useConfig()
|
||||||
const indexStore = useIndex()
|
const indexStore = useIndex()
|
||||||
@ -30,11 +33,10 @@ export const useMedia = defineStore('media', {
|
|||||||
body: JSON.stringify({ source: path, folders_only: foldersOnly }),
|
body: JSON.stringify({ source: path, folders_only: foldersOnly }),
|
||||||
})
|
})
|
||||||
.then((response) => {
|
.then((response) => {
|
||||||
|
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
return response.json()
|
return response.json()
|
||||||
} else {
|
} else {
|
||||||
indexStore.msgAlert('alert-error', 'Storage not exist!', 3)
|
indexStore.msgAlert('error', 'Storage not exist!', 3)
|
||||||
|
|
||||||
return {
|
return {
|
||||||
source: '',
|
source: '',
|
||||||
|
|||||||
@ -13,6 +13,7 @@ const { processPlaylist } = playlistOperations()
|
|||||||
export const usePlaylist = defineStore('playlist', {
|
export const usePlaylist = defineStore('playlist', {
|
||||||
state: () => ({
|
state: () => ({
|
||||||
playlist: [] as PlaylistItem[],
|
playlist: [] as PlaylistItem[],
|
||||||
|
isLoading: false,
|
||||||
listDate: dayjs().format('YYYY-MM-DD'),
|
listDate: dayjs().format('YYYY-MM-DD'),
|
||||||
progressValue: 0,
|
progressValue: 0,
|
||||||
currentClip: 'No clip is playing',
|
currentClip: 'No clip is playing',
|
||||||
|
|||||||
@ -6,7 +6,7 @@ module.exports = {
|
|||||||
},
|
},
|
||||||
boxShadow: {
|
boxShadow: {
|
||||||
'3xl': '0 1em 5em rgba(0, 0, 0, 0.3)',
|
'3xl': '0 1em 5em rgba(0, 0, 0, 0.3)',
|
||||||
'glow': '0 0 20px rgba(0, 0, 0, 0.3)',
|
'glow': '0 0 10px rgba(0, 0, 0, 0.3)',
|
||||||
},
|
},
|
||||||
colors: {
|
colors: {
|
||||||
'my-gray': 'var(--my-gray)',
|
'my-gray': 'var(--my-gray)',
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user