update packages, fix css on mobile, close mobil menu correctly
This commit is contained in:
jb-alvarado
parent
865b302697
commit
c897226188
@ -3,20 +3,25 @@
|
||||
<NuxtLink class="navbar-brand min-w-[46px] p-2" href="/">
|
||||
<img src="~/assets/images/ffplayout-small.png" class="img-fluid" alt="Logo" width="30" height="30" />
|
||||
</NuxtLink>
|
||||
<EventStatus v-if="route.name?.toString().includes('player__')" class="z-10"/>
|
||||
<EventStatus v-if="route.name?.toString().includes('player__')" class="z-10" />
|
||||
<div class="navbar-end w-1/5 grow">
|
||||
<label class="swap swap-rotate me-2 md:hidden">
|
||||
<label class="swap swap-rotate me-2 2sm:hidden">
|
||||
<input type="checkbox" :checked="indexStore.darkMode" @change="toggleDarkTheme" />
|
||||
<SvgIcon name="swap-on" classes="w-5 h-5" />
|
||||
<SvgIcon name="swap-off" classes="w-5 h-5" />
|
||||
</label>
|
||||
<div class="dropdown dropdown-end z-50">
|
||||
<div tabindex="0" role="button" class="btn btn-ghost md:hidden">
|
||||
<details ref="menuDropdown" tabindex="0" class="dropdown dropdown-end z-50">
|
||||
<summary class="btn btn-ghost 2sm:hidden" @click="clickMenu()" @blur="blurMenu()">
|
||||
<SvgIcon name="burger" classes="w-5 h-5" />
|
||||
</div>
|
||||
</summary>
|
||||
<ul class="menu menu-sm dropdown-content mt-1 z-[1] p-2 shadow bg-base-100 rounded-box w-52">
|
||||
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md">
|
||||
<NuxtLink :to="item.link" class="h-[27px] text-base" exact-active-class="is-active">
|
||||
<NuxtLink
|
||||
:to="item.link"
|
||||
class="h-[27px] text-base"
|
||||
exact-active-class="is-active"
|
||||
@click="closeMenu()"
|
||||
>
|
||||
<span>
|
||||
{{ item.name }}
|
||||
</span>
|
||||
@ -32,7 +37,7 @@
|
||||
<ul class="p-2">
|
||||
<li v-for="(channel, index) in configStore.channels" :key="index">
|
||||
<span>
|
||||
<a class="dropdown-item" @click="selectChannel(index)">{{ channel.name }}</a>
|
||||
<a class="dropdown-item cursor-pointer" @click="selectChannel(index)">{{ channel.name }}</a>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
@ -44,9 +49,9 @@
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
<div class="navbar-end hidden md:flex w-4/5 min-w-[750px]">
|
||||
<div class="navbar-end hidden 2sm:flex w-4/5 min-w-[750px]">
|
||||
<ul class="menu menu-sm menu-horizontal px-1">
|
||||
<li v-for="item in menuItems" :key="item.name" class="bg-base-100 rounded-md p-0">
|
||||
<NuxtLink
|
||||
@ -68,7 +73,7 @@
|
||||
</summary>
|
||||
<ul class="p-2 bg-base-100 rounded-md !mt-1 w-36" tabindex="0">
|
||||
<li v-for="(channel, index) in configStore.channels" :key="index">
|
||||
<a class="dropdown-item" @click="selectChannel(index)">
|
||||
<a class="dropdown-item cursor-pointer" @click="selectChannel(index)">
|
||||
{{ channel.name }}
|
||||
</a>
|
||||
</li>
|
||||
@ -103,6 +108,9 @@ const authStore = useAuth()
|
||||
const configStore = useConfig()
|
||||
const indexStore = useIndex()
|
||||
|
||||
const menuDropdown = ref()
|
||||
const isOpen = ref(false)
|
||||
|
||||
const menuItems = ref([
|
||||
{ name: t('button.home'), link: localePath({ name: 'index' }) },
|
||||
{ name: t('button.player'), link: localePath({ name: 'player' }) },
|
||||
@ -116,6 +124,33 @@ if (colorMode.value === 'dark') {
|
||||
indexStore.darkMode = true
|
||||
}
|
||||
|
||||
function closeMenu() {
|
||||
setTimeout(() => {
|
||||
isOpen.value = false
|
||||
menuDropdown.value.removeAttribute('open')
|
||||
console.log('close')
|
||||
}, 200)
|
||||
}
|
||||
|
||||
function clickMenu() {
|
||||
console.log('close')
|
||||
isOpen.value = !isOpen.value
|
||||
|
||||
if (!isOpen.value) {
|
||||
menuDropdown.value.removeAttribute('open')
|
||||
}
|
||||
}
|
||||
|
||||
function blurMenu() {
|
||||
if (isOpen.value) {
|
||||
isOpen.value = !isOpen.value
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
menuDropdown.value.removeAttribute('open')
|
||||
}, 200)
|
||||
}
|
||||
}
|
||||
|
||||
function closeDropdown($event: any) {
|
||||
setTimeout(() => {
|
||||
$event.target.parentNode.removeAttribute('open')
|
||||
|
||||
@ -170,26 +170,26 @@
|
||||
:key="item.start"
|
||||
class="flex flex-col gap-1 justify-center items-center border border-my-gray rounded mt-1 p-1"
|
||||
>
|
||||
<div class="grid grid-cols-[60px_67px_70px_67px_70px] join">
|
||||
<div class="flex flex-wrap xs:grid xs:grid-cols-[58px_64px_67px_64px_67px] xs:join">
|
||||
<div
|
||||
class="input input-sm input-bordered join-item px-2 text-center bg-base-200 leading-7"
|
||||
class="input input-sm input-bordered join-item px-1 text-center bg-base-200 leading-7"
|
||||
>
|
||||
{{ t('player.start') }}:
|
||||
</div>
|
||||
<input
|
||||
v-model="item.start"
|
||||
type="text"
|
||||
class="input input-sm input-bordered join-item px-2 text-center"
|
||||
class="input input-sm input-bordered join-item px-1 text-center"
|
||||
/>
|
||||
<div
|
||||
class="input input-sm input-bordered join-item px-2 text-center bg-base-200 leading-7"
|
||||
class="input input-sm input-bordered join-item px-1 text-center bg-base-200 leading-7"
|
||||
>
|
||||
{{ t('player.duration') }}:
|
||||
</div>
|
||||
<input
|
||||
v-model="item.duration"
|
||||
type="text"
|
||||
class="input input-sm input-bordered join-item px-2 text-center"
|
||||
class="input input-sm input-bordered join-item px-1 text-center"
|
||||
/>
|
||||
<button
|
||||
class="btn btn-sm input-bordered join-item"
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
{{ t('player.play') }}
|
||||
</div>
|
||||
</th>
|
||||
<th class="w-[85px] p-0 text-center">
|
||||
<th class="w-[85px] p-0 text-center hidden md:table-cell">
|
||||
<div class="border-b border-my-gray px-4 py-3 -mb-[2px]">
|
||||
{{ t('player.duration') }}
|
||||
</div>
|
||||
@ -92,7 +92,7 @@
|
||||
<i class="bi-play-fill" />
|
||||
</button>
|
||||
</td>
|
||||
<td class="py-2 text-center">{{ secToHMS(element.duration) }}</td>
|
||||
<td class="py-2 text-center hidden md:table-cell">{{ secToHMS(element.duration) }}</td>
|
||||
<td class="py-2 text-center hidden xl:table-cell">
|
||||
{{ secToHMS(element.in) }}
|
||||
</td>
|
||||
|
||||
287
nuxt.config.ts
287
nuxt.config.ts
@ -1,155 +1,162 @@
|
||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||
export default defineNuxtConfig({
|
||||
devServer: {
|
||||
port: 3000, // default: 3000
|
||||
host: '127.0.0.1', // default: localhost
|
||||
},
|
||||
devServer: {
|
||||
port: 3000, // default: 3000
|
||||
host: '127.0.0.1', // default: localhost
|
||||
},
|
||||
|
||||
nitro: {
|
||||
devProxy: {
|
||||
'/api': { target: 'http://127.0.0.1:8787/api' },
|
||||
'/auth': { target: 'http://127.0.0.1:8787/auth' },
|
||||
'/data': { target: 'http://127.0.0.1:8787/data' },
|
||||
'/live': { target: 'http://127.0.0.1:8787/live' },
|
||||
'/1/live': { target: 'http://127.0.0.1:8787/1/live' },
|
||||
'/file': { target: 'http://127.0.0.1:8787/file' },
|
||||
'/hls': { target: 'http://127.0.0.1:8787/hls' },
|
||||
},
|
||||
},
|
||||
nitro: {
|
||||
devProxy: {
|
||||
'/api': { target: 'http://127.0.0.1:8787/api' },
|
||||
'/auth': { target: 'http://127.0.0.1:8787/auth' },
|
||||
'/data': { target: 'http://127.0.0.1:8787/data' },
|
||||
'/live': { target: 'http://127.0.0.1:8787/live' },
|
||||
'/1/live': { target: 'http://127.0.0.1:8787/1/live' },
|
||||
'/file': { target: 'http://127.0.0.1:8787/file' },
|
||||
'/hls': { target: 'http://127.0.0.1:8787/hls' },
|
||||
},
|
||||
},
|
||||
|
||||
ignore: ['**/public/tv-media**', '**/public/Videos**', '**/public/live**', '**/public/home**'],
|
||||
ssr: false,
|
||||
ignore: ['**/public/tv-media**', '**/public/Videos**', '**/public/live**', '**/public/home**'],
|
||||
ssr: false,
|
||||
|
||||
// debug: true,
|
||||
// debug: true,
|
||||
|
||||
app: {
|
||||
head: {
|
||||
title: 'ffplayout',
|
||||
meta: [
|
||||
{
|
||||
charset: 'utf-8',
|
||||
},
|
||||
{
|
||||
name: 'viewport',
|
||||
content: 'width=device-width, initial-scale=1',
|
||||
},
|
||||
{
|
||||
hid: 'description',
|
||||
name: 'description',
|
||||
content: 'Frontend for ffplayout, the 24/7 Rust and playlist based streaming solution.',
|
||||
},
|
||||
],
|
||||
link: [
|
||||
{
|
||||
rel: 'icon',
|
||||
type: 'image/x-icon',
|
||||
href: '/favicon.ico',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
app: {
|
||||
head: {
|
||||
title: 'ffplayout',
|
||||
meta: [
|
||||
{
|
||||
charset: 'utf-8',
|
||||
},
|
||||
{
|
||||
name: 'viewport',
|
||||
content: 'width=device-width, initial-scale=1',
|
||||
},
|
||||
{
|
||||
hid: 'description',
|
||||
name: 'description',
|
||||
content: 'Frontend for ffplayout, the 24/7 Rust and playlist based streaming solution.',
|
||||
},
|
||||
],
|
||||
link: [
|
||||
{
|
||||
rel: 'icon',
|
||||
type: 'image/x-icon',
|
||||
href: '/favicon.ico',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
|
||||
modules: [
|
||||
'@nuxt/eslint',
|
||||
'@nuxtjs/color-mode',
|
||||
'@nuxtjs/tailwindcss',
|
||||
'@nuxtjs/i18n',
|
||||
'@pinia/nuxt',
|
||||
'@vueuse/nuxt',
|
||||
],
|
||||
modules: [
|
||||
'@nuxt/eslint',
|
||||
'@nuxtjs/color-mode',
|
||||
'@nuxtjs/tailwindcss',
|
||||
'@nuxtjs/i18n',
|
||||
'@pinia/nuxt',
|
||||
'@vueuse/nuxt',
|
||||
],
|
||||
|
||||
css: ['@/assets/scss/main.scss'],
|
||||
css: ['@/assets/scss/main.scss'],
|
||||
|
||||
colorMode: {
|
||||
preference: 'dark', // default value of $colorMode.preference
|
||||
fallback: 'system', // fallback value if not system preference found
|
||||
hid: 'nuxt-color-mode-script',
|
||||
globalName: '__NUXT_COLOR_MODE__',
|
||||
componentName: 'ColorScheme',
|
||||
classPrefix: '',
|
||||
classSuffix: '',
|
||||
dataValue: 'theme',
|
||||
storageKey: 'theme',
|
||||
},
|
||||
colorMode: {
|
||||
preference: 'dark', // default value of $colorMode.preference
|
||||
fallback: 'system', // fallback value if not system preference found
|
||||
hid: 'nuxt-color-mode-script',
|
||||
globalName: '__NUXT_COLOR_MODE__',
|
||||
componentName: 'ColorScheme',
|
||||
classPrefix: '',
|
||||
classSuffix: '',
|
||||
dataValue: 'theme',
|
||||
storageKey: 'theme',
|
||||
},
|
||||
|
||||
i18n: {
|
||||
locales: [
|
||||
{
|
||||
code: 'de',
|
||||
name: 'Deutsch',
|
||||
file: 'de-DE.js',
|
||||
},
|
||||
{
|
||||
code: 'en',
|
||||
name: 'English',
|
||||
file: 'en-US.js',
|
||||
},
|
||||
{
|
||||
code: 'pt-br',
|
||||
name: 'Português (BR)',
|
||||
file: 'pt-BR.js',
|
||||
},
|
||||
{
|
||||
code: 'ru',
|
||||
name: 'Русский язык (RU)',
|
||||
file: 'ru-RU.js',
|
||||
},
|
||||
],
|
||||
customRoutes: 'config',
|
||||
pages: {
|
||||
player: {
|
||||
de: '/wiedergabe',
|
||||
en: '/player',
|
||||
'pt-br': '/player',
|
||||
ru: '/player',
|
||||
},
|
||||
media: {
|
||||
de: '/medien',
|
||||
en: '/media',
|
||||
'pt-br': '/armazenamento',
|
||||
ru: '/media',
|
||||
},
|
||||
message: {
|
||||
de: '/nachrichten',
|
||||
en: '/message',
|
||||
'pt-br': '/legenda',
|
||||
ru: '/message',
|
||||
},
|
||||
logging: {
|
||||
de: '/protokollierung',
|
||||
en: '/logging',
|
||||
'pt-br': '/registro',
|
||||
ru: '/logging',
|
||||
},
|
||||
configure: {
|
||||
de: '/einstellungen',
|
||||
en: '/configure',
|
||||
'pt-br': '/configurar',
|
||||
ru: '/configure',
|
||||
},
|
||||
},
|
||||
detectBrowserLanguage: {
|
||||
useCookie: true,
|
||||
alwaysRedirect: true,
|
||||
},
|
||||
// debug: true,
|
||||
langDir: 'i18n/locales',
|
||||
defaultLocale: 'en',
|
||||
i18n: {
|
||||
locales: [
|
||||
{
|
||||
code: 'de',
|
||||
name: 'Deutsch',
|
||||
file: 'de-DE.js',
|
||||
},
|
||||
{
|
||||
code: 'en',
|
||||
name: 'English',
|
||||
file: 'en-US.js',
|
||||
},
|
||||
{
|
||||
code: 'pt-br',
|
||||
name: 'Português (BR)',
|
||||
file: 'pt-BR.js',
|
||||
},
|
||||
{
|
||||
code: 'ru',
|
||||
name: 'Русский язык (RU)',
|
||||
file: 'ru-RU.js',
|
||||
},
|
||||
],
|
||||
customRoutes: 'config',
|
||||
pages: {
|
||||
player: {
|
||||
de: '/wiedergabe',
|
||||
en: '/player',
|
||||
'pt-br': '/player',
|
||||
ru: '/player',
|
||||
},
|
||||
media: {
|
||||
de: '/medien',
|
||||
en: '/media',
|
||||
'pt-br': '/armazenamento',
|
||||
ru: '/media',
|
||||
},
|
||||
message: {
|
||||
de: '/nachrichten',
|
||||
en: '/message',
|
||||
'pt-br': '/legenda',
|
||||
ru: '/message',
|
||||
},
|
||||
logging: {
|
||||
de: '/protokollierung',
|
||||
en: '/logging',
|
||||
'pt-br': '/registro',
|
||||
ru: '/logging',
|
||||
},
|
||||
configure: {
|
||||
de: '/einstellungen',
|
||||
en: '/configure',
|
||||
'pt-br': '/configurar',
|
||||
ru: '/configure',
|
||||
},
|
||||
},
|
||||
detectBrowserLanguage: {
|
||||
useCookie: true,
|
||||
alwaysRedirect: true,
|
||||
},
|
||||
// debug: true,
|
||||
langDir: 'i18n/locales',
|
||||
defaultLocale: 'en',
|
||||
|
||||
compilation: {
|
||||
strictMessage: false,
|
||||
},
|
||||
},
|
||||
compilation: {
|
||||
strictMessage: false,
|
||||
},
|
||||
},
|
||||
|
||||
vite: {
|
||||
build: {
|
||||
chunkSizeWarningLimit: 800000,
|
||||
},
|
||||
},
|
||||
vite: {
|
||||
build: {
|
||||
chunkSizeWarningLimit: 800000,
|
||||
},
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
scss: {
|
||||
silenceDeprecations: ['legacy-js-api'],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
experimental: {
|
||||
payloadExtraction: false,
|
||||
},
|
||||
experimental: {
|
||||
payloadExtraction: false,
|
||||
},
|
||||
|
||||
compatibilityDate: '2024-07-10',
|
||||
compatibilityDate: '2024-07-10',
|
||||
})
|
||||
|
||||
963
package-lock.json
generated
963
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
22
package.json
22
package.json
@ -13,17 +13,17 @@
|
||||
"postinstall": "nuxt prepare"
|
||||
},
|
||||
"dependencies": {
|
||||
"@nuxtjs/color-mode": "^3.4.4",
|
||||
"@nuxtjs/color-mode": "^3.5.1",
|
||||
"@pinia/nuxt": "^0.5.4",
|
||||
"@vueform/multiselect": "^2.6.9",
|
||||
"@vueform/multiselect": "^2.6.10",
|
||||
"@vuepic/vue-datepicker": "^9.0.3",
|
||||
"@vueuse/nuxt": "^11.0.3",
|
||||
"@vueuse/nuxt": "^11.1.0",
|
||||
"bootstrap-icons": "^1.11.3",
|
||||
"dayjs": "^1.11.13",
|
||||
"jwt-decode": "^4.0.0",
|
||||
"lodash": "^4.17.21",
|
||||
"mpegts.js": "^1.7.3",
|
||||
"nuxt": "3.13.1",
|
||||
"nuxt": "3.13.2",
|
||||
"pinia": "^2.2.2",
|
||||
"sortablejs-vue3": "^1.2.11",
|
||||
"splitpanes": "^3.1.5",
|
||||
@ -31,17 +31,17 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@nuxt/eslint": "^0.5.7",
|
||||
"@nuxtjs/i18n": "^8.5.3",
|
||||
"@nuxtjs/i18n": "^8.5.5",
|
||||
"@nuxtjs/tailwindcss": "^6.12.1",
|
||||
"@types/lodash": "^4.17.7",
|
||||
"@types/lodash": "^4.17.9",
|
||||
"@types/video.js": "^7.3.58",
|
||||
"daisyui": "^4.12.10",
|
||||
"mini-svg-data-uri": "^1.4.4",
|
||||
"postcss": "^8.4.45",
|
||||
"postcss": "^8.4.47",
|
||||
"postcss-loader": "^8.1.1",
|
||||
"sass": "^1.78.0",
|
||||
"sass-loader": "^16.0.1",
|
||||
"vue": "^3.5.4",
|
||||
"vue-router": "^4.4.4"
|
||||
"sass": "^1.79.3",
|
||||
"sass-loader": "^16.0.2",
|
||||
"vue": "^3.5.8",
|
||||
"vue-router": "^4.4.5"
|
||||
}
|
||||
}
|
||||
|
||||
@ -2,8 +2,8 @@
|
||||
<div class="h-full">
|
||||
<PlayerControl />
|
||||
<div class="flex justify-end p-1">
|
||||
<div class="h-[32px] grid grid-cols-2">
|
||||
<div class="text-warning flex justify-end p-2">
|
||||
<div class="h-[32px] flex">
|
||||
<div class="text-warning flex-none flex justify-end p-2">
|
||||
<div
|
||||
v-if="firstLoad && beforeDayStart"
|
||||
class="tooltip tooltip-right tooltip-warning"
|
||||
|
||||
@ -1,3 +1,4 @@
|
||||
import daisyui from 'daisyui'
|
||||
import svgToDataUri from 'mini-svg-data-uri'
|
||||
|
||||
module.exports = {
|
||||
@ -120,5 +121,5 @@ module.exports = {
|
||||
},
|
||||
],
|
||||
},
|
||||
plugins: [require('daisyui')],
|
||||
plugins: [daisyui],
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user