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

fine tune responsive layout, move dev instruction, cleanups

Browse Source
This commit is contained in:
jb-alvarado 2024-09-24 15:02:54 +02:00
parent 64cf3e9bdf
commit a534598fb1
10 changed files with 70 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
.ignore Normal file
View File

@ -0,0 +1,8 @@
assets/
debian/
docker/
docs/
frontend/
migrations/
scripts/
tests/

39
docs/developer.md
View File

@ -68,3 +68,42 @@ cargo deb --no-build --target=aarch64-unknown-linux-gnu --variant=arm64 -p ffpla
# for rhel based systems: # for rhel based systems:
cargo generate-rpm --target=x86_64-unknown-linux-musl cargo generate-rpm --target=x86_64-unknown-linux-musl
``` ```
## Setup Frontend
Make sure to install the dependencies:
```bash
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install --shamefully-hoist
```
## Development Server
Start the development server on http://localhost:3000
```bash
npm run dev
```
## Production
Build the application for production:
```bash
npm run build
```
Locally preview production build:
```bash
npm run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

41
frontend/README.md
View File

@ -1,8 +1,6 @@
ffplayout-frontend ffplayout-frontend
===== =====
This web application is used to manage the [ffplayout](https://github.com/ffplayout/ffplayout).
The interface is mostly designed for 24/7 streaming. Other scenarios like streaming in folder mode or playlists with no start time will work but will not be displayed correctly. The interface is mostly designed for 24/7 streaming. Other scenarios like streaming in folder mode or playlists with no start time will work but will not be displayed correctly.
For a better understanding of the functionality, take a look at the screenshots below. For a better understanding of the functionality, take a look at the screenshots below.
@ -27,42 +25,3 @@ For a better understanding of the functionality, take a look at the screenshots
### Configuration Page ### Configuration Page
![config-gui](/docs/images/config-gui.png) ![config-gui](/docs/images/config-gui.png)
## Setup
Make sure to install the dependencies:
```bash
# yarn
yarn install
# npm
npm install
# pnpm
pnpm install --shamefully-hoist
```
## Development Server
Start the development server on http://localhost:3000
```bash
npm run dev
```
## Production
Build the application for production:
```bash
npm run build
```
Locally preview production build:
```bash
npm run preview
```
Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

3
frontend/components/SystemStats.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<!-- <div v-if="data">{{ systemStatus(data) }}</div> --> <div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow min-w-[320px] max-w-[960px] mt-5 xs:mt-0">
<div class="grid grid-cols-1 xs:grid-cols-2 border-4 rounded-md border-primary text-left shadow min-w-[728px] max-w-[960px]">
<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">

2
frontend/eslint.config.mjs
View File

@ -1,4 +1,4 @@
import withNuxt from './.nuxt/eslint.config.mjs' import withNuxt from './frontend/.nuxt/eslint.config.mjs'
export default withNuxt( export default withNuxt(
// your custom flat configs go here, for example: // your custom flat configs go here, for example:

24
frontend/package-lock.json generated
View File

@ -1,11 +1,11 @@
{ {
"name": "ffplayout-frontend", "name": "frontend",
"version": "0.12.1", "version": "0.12.1",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "ffplayout-frontend", "name": "frontend",
"version": "0.12.1", "version": "0.12.1",
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
@ -4930,9 +4930,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/bare-events": { "node_modules/bare-events": {
"version": "2.4.2", "version": "2.5.0",
"resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.4.2.tgz", "resolved": "https://registry.npmjs.org/bare-events/-/bare-events-2.5.0.tgz",
"integrity": "sha512-qMKFd2qG/36aA4GwvKq8MxnPgCQAmBWmSyLWsJcbn8v03wvIPQ/hG1Ms8bPzndZxMDoHpxez5VOS+gC9Yi24/Q==", "integrity": "sha512-/E8dDe9dsbLyh2qrZ64PEPadOQ0F4gbl1sUJOrmph7xOiIxfY8vwab/4bFLh4Y88/Hk/ujKcrQKc+ps0mv873A==",
"license": "Apache-2.0", "license": "Apache-2.0",
"optional": true "optional": true
}, },
@ -6346,9 +6346,9 @@
"license": "MIT" "license": "MIT"
}, },
"node_modules/electron-to-chromium": { "node_modules/electron-to-chromium": {
"version": "1.5.27", "version": "1.5.28",
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.27.tgz", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.28.tgz",
"integrity": "sha512-o37j1vZqCoEgBuWWXLHQgTN/KDKe7zwpiY5CPeq2RvUqOyJw9xnrULzZAEVQ5p4h+zjMk7hgtOoPdnLxr7m/jw==", "integrity": "sha512-VufdJl+rzaKZoYVUijN13QcXVF5dWPZANeFTLNy+OSpHdDL5ynXTF35+60RSBbaQYB1ae723lQXHCrf4pyLsMw==",
"license": "ISC" "license": "ISC"
}, },
"node_modules/emoji-regex": { "node_modules/emoji-regex": {
@ -14791,12 +14791,12 @@
} }
}, },
"node_modules/vue-bundle-renderer": { "node_modules/vue-bundle-renderer": {
"version": "2.1.0", "version": "2.1.1",
"resolved": "https://registry.npmjs.org/vue-bundle-renderer/-/vue-bundle-renderer-2.1.0.tgz", "resolved": "https://registry.npmjs.org/vue-bundle-renderer/-/vue-bundle-renderer-2.1.1.tgz",
"integrity": "sha512-uZ+5ZJdZ/b43gMblWtcpikY6spJd0nERaM/1RtgioXNfWFbjKlUwrS8HlrddN6T2xtptmOouWclxLUkpgcVX3Q==", "integrity": "sha512-+qALLI5cQncuetYOXp4yScwYvqh8c6SMXee3B+M7oTZxOgtESP0l4j/fXdEJoZ+EdMxkGWIj+aSEyjXkOdmd7g==",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"ufo": "^1.5.3" "ufo": "^1.5.4"
} }
}, },
"node_modules/vue-devtools-stub": { "node_modules/vue-devtools-stub": {

2
frontend/package.json
View File

@ -1,5 +1,5 @@
{ {
"name": "ffplayout-frontend", "name": "frontend",
"version": "0.12.1", "version": "0.12.1",
"description": "Web GUI for ffplayout", "description": "Web GUI for ffplayout",
"author": "Jonathan Baecker", "author": "Jonathan Baecker",

4
frontend/pages/logging.vue
View File

@ -22,7 +22,7 @@
auto-apply auto-apply
:locale="locale" :locale="locale"
:dark="colorMode.value === 'dark'" :dark="colorMode.value === 'dark'"
:ui="{ input: 'join-item input !input-sm !input-bordered !w-[300px] text-right !pe-3' }" :ui="{ input: 'join-item input !input-sm !input-bordered !w-[170px] text-right !pe-3' }"
required required
/> />
<button class="btn btn-sm btn-primary join-item" :title="t('log.download')" @click="downloadLog"> <button class="btn btn-sm btn-primary join-item" :title="t('log.download')" @click="downloadLog">
@ -85,7 +85,7 @@ watch([listDate, id], () => {
}) })
const calendarFormat = (date: Date) => { const calendarFormat = (date: Date) => {
return $dayjs(date).locale(locale.value).format('dddd - LL') return $dayjs(date).locale(locale.value).format('ddd L')
} }
function filterLogsBySeverity(logString: string, minSeverity: string): string { function filterLogsBySeverity(logString: string, minSeverity: string): string {

12
frontend/pages/media.vue
View File

@ -55,7 +55,7 @@
@dragleave="handleDragLeave" @dragleave="handleDragLeave"
> >
<td class="px-2 py-1.5 truncate"> <td class="px-2 py-1.5 truncate">
<span <a
class="cursor-pointer" class="cursor-pointer"
@click=" @click="
mediaStore.getTree( mediaStore.getTree(
@ -65,7 +65,7 @@
> >
<i class="bi-folder-fill" /> <i class="bi-folder-fill" />
{{ folder.name }} {{ folder.name }}
</span> </a>
</td> </td>
<td class="px-2 py-1.5 text-center"> <td class="px-2 py-1.5 text-center">
@ -105,13 +105,13 @@
<tr <tr
v-for="folder in mediaStore.folderTree.folders" v-for="folder in mediaStore.folderTree.folders"
:key="folder.uid" :key="folder.uid"
class="grid grid-cols-[auto_170px] border-b border-base-content/20" class="grid grid-cols-[auto_40px] border-b border-base-content/20"
@drop="handleDrop($event, folder, false)" @drop="handleDrop($event, folder, false)"
@dragover="handleDragOver" @dragover="handleDragOver"
@dragleave="handleDragLeave" @dragleave="handleDragLeave"
> >
<td class="px-2 py-1.5"> <td class="px-2 py-1.5 truncate cursor-pointer">
<button <a
class="truncate" class="truncate"
@click=" @click="
mediaStore.getTree( mediaStore.getTree(
@ -121,7 +121,7 @@
> >
<i class="bi-folder-fill" /> <i class="bi-folder-fill" />
{{ folder.name }} {{ folder.name }}
</button> </a>
</td> </td>
<td class="ps-2 pe-[14px] py-1.5 text-right"> <td class="ps-2 pe-[14px] py-1.5 text-right">
<button <button

4
scripts/build.sh
View File

@ -3,10 +3,6 @@
source $(dirname "$0")/man_create.sh source $(dirname "$0")/man_create.sh
target=$1 target=$1
if [ ! -f 'frontend/package.json' ]; then
git submodule update --init
fi
if [[ -n $target ]]; then if [[ -n $target ]]; then
targets=($target) targets=($target)
else else