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

fix empty audio input value, add audio only support

Browse Source
This commit is contained in:
jb-alvarado 2023-02-02 09:53:26 +01:00
parent fe022a7a59
commit 0a7efd76a1
8 changed files with 102 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -33,3 +33,5 @@ Videos/
.vscode/ .vscode/
home home
home/ home/
live1
live1/

19
components/Browser.vue
View File

@ -96,7 +96,19 @@
> >
<div class="row"> <div class="row">
<div class="col-1 browser-icons-col"> <div class="col-1 browser-icons-col">
<i class="bi-film browser-icons" /> <i
v-if="mediaType(element.name) === 'audio'"
class="bi-music-note-beamed browser-icons"
/>
<i
v-else-if="mediaType(element.name) === 'video'"
class="bi-film browser-icons"
/>
<i
v-else-if="mediaType(element.name) === 'image'"
class="bi-file-earmark-image browser-icons"
/>
<i v-else class="bi-file-binary browser-icons" />
</div> </div>
<div class="col browser-item-text grabbing"> <div class="col browser-item-text grabbing">
{{ element.name }} {{ element.name }}
@ -251,7 +263,7 @@ const authStore = useAuth()
const configStore = useConfig() const configStore = useConfig()
const indexStore = useIndex() const indexStore = useIndex()
const mediaStore = useMedia() const mediaStore = useMedia()
const { toMin } = stringFormatter() const { toMin, mediaType } = stringFormatter()
const contentType = { 'content-type': 'application/json;charset=UTF-8' } const contentType = { 'content-type': 'application/json;charset=UTF-8' }
const browserIsLoading = ref(false) const browserIsLoading = ref(false)
@ -288,6 +300,7 @@ function setPreviewData(path: string) {
previewUrl.value = encodeURIComponent(`${fullPath}`).replace(/%2F/g, '/') previewUrl.value = encodeURIComponent(`${fullPath}`).replace(/%2F/g, '/')
const ext = previewName.value.split('.').slice(-1)[0].toLowerCase() const ext = previewName.value.split('.').slice(-1)[0].toLowerCase()
const fileType = (mediaType(previewName.value) === 'audio') ? `audio/${ext}` : `video/${ext}`
if (configStore.configPlayout.storage.extensions.includes(`${ext}`)) { if (configStore.configPlayout.storage.extensions.includes(`${ext}`)) {
isVideo.value = true isVideo.value = true
@ -299,7 +312,7 @@ function setPreviewData(path: string) {
preload: 'auto', preload: 'auto',
sources: [ sources: [
{ {
type: `video/${ext}`, type: fileType,
src: previewUrl.value, src: previewUrl.value,
}, },
], ],

23
composables/helper.ts
View File

@ -63,10 +63,29 @@ export const stringFormatter = () => {
} }
function secondsToTime(sec: number) { function secondsToTime(sec: number) {
return new Date(sec * 1000).toISOString().substr(11, 8) return new Date(sec * 1000).toISOString().substring(11, 8)
} }
return { formatLog, timeToSeconds, secToHMS, numberToHex, hexToNumber, filename, toMin, secondsToTime } function mediaType(path: string) {
const videoType = ['avi', 'flv', 'm2v', 'm4v', 'mkv', 'mov', 'mp4', 'mpeg', 'mpg', 'mts', 'mxf', 'ts', 'vob','ogv', 'webm', 'wmv']
const audioType = ['aac', 'aiff', 'flac', 'm4a', 'mp2', 'mp3', 'ogg', 'opus', 'wav', 'wma']
const imageType = ['apng', 'avif', 'bmp', 'exr', 'gif', 'jpeg', 'jpg', 'png', 'psd', 'tga', 'tif', 'tiff', 'webp']
const ext = path.split('.').pop()
if (ext) {
if (videoType.includes(ext)) {
return 'video'
} else if (audioType.includes(ext)) {
return 'audio'
} else if (imageType.includes(ext)) {
return 'image'
}
}
return null
}
return { formatLog, timeToSeconds, secToHMS, numberToHex, hexToNumber, filename, toMin, secondsToTime, mediaType }
} }
export const playlistOperations = () => { export const playlistOperations = () => {

72
package-lock.json generated
View File

@ -1,18 +1,18 @@
{ {
"name": "ffplayout-frontend", "name": "ffplayout-frontend",
"version": "0.1.3", "version": "0.2.0",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "ffplayout-frontend", "name": "ffplayout-frontend",
"version": "0.1.3", "version": "0.2.0",
"hasInstallScript": true, "hasInstallScript": true,
"dependencies": { "dependencies": {
"@nuxt/types": "^2.15.8", "@nuxt/types": "^2.15.8",
"@pinia/nuxt": "^0.4.6", "@pinia/nuxt": "^0.4.6",
"@popperjs/core": "^2.11.6", "@popperjs/core": "^2.11.6",
"@vueuse/core": "^9.11.1", "@vueuse/core": "^9.12.0",
"bootstrap": "^5.3.0-alpha1", "bootstrap": "^5.3.0-alpha1",
"bootstrap-icons": "^1.10.3", "bootstrap-icons": "^1.10.3",
"cookie-universal-nuxt": "^2.2.2", "cookie-universal-nuxt": "^2.2.2",
@ -32,11 +32,11 @@
"@types/bootstrap": "^5.2.6", "@types/bootstrap": "^5.2.6",
"@types/lodash": "^4.14.191", "@types/lodash": "^4.14.191",
"@types/splitpanes": "^2.2.1", "@types/splitpanes": "^2.2.1",
"@types/video.js": "^7.3.50", "@types/video.js": "^7.3.51",
"eslint": "^8.32.0", "eslint": "^8.33.0",
"eslint-plugin-nuxt": "^4.0.0", "eslint-plugin-nuxt": "^4.0.0",
"nuxt": "3.1.1", "nuxt": "3.1.1",
"sass": "^1.57.1", "sass": "^1.58.0",
"sass-loader": "^13.2.0" "sass-loader": "^13.2.0"
} }
}, },
@ -2184,9 +2184,9 @@
} }
}, },
"node_modules/@types/video.js": { "node_modules/@types/video.js": {
"version": "7.3.50", "version": "7.3.51",
"resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.50.tgz", "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.51.tgz",
"integrity": "sha512-xG0xoeyLGuWhtWMBBLRVhTEOfT2n6AjhNoWhFWVbpa6A8hSMi4eNvttuHYXsn6NslITu7IUdKPDRQ2bAWgXKDA==", "integrity": "sha512-xLlt/ZfCuWYBvG2MRn018RvaEplcK6dI63aOiVUeeAWFyjx3Br1hL749ndFgbrvNdY4m9FoHG1FQ/PB6IpfSAQ==",
"dev": true "dev": true
}, },
"node_modules/@types/web-bluetooth": { "node_modules/@types/web-bluetooth": {
@ -2391,9 +2391,9 @@
} }
}, },
"node_modules/@videojs/http-streaming": { "node_modules/@videojs/http-streaming": {
"version": "2.15.1", "version": "2.16.0",
"resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.15.1.tgz", "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.16.0.tgz",
"integrity": "sha512-/uuN3bVkEeJAdrhu5Hyb19JoUo3CMys7yf2C1vUjeL1wQaZ4Oe8JrZzRrnWZ0rjvPgKfNLPXQomsRtgrMoRMJQ==", "integrity": "sha512-mGNTqjENzP86XGM6HSWdWVO/KAsDlf5+idW2W7dL1+NkzWpwZlSEYhrdEVVnhoOb0A6E7JW6LM611/JA7Jn/3A==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@videojs/vhs-utils": "3.0.5", "@videojs/vhs-utils": "3.0.5",
@ -2645,13 +2645,13 @@
"integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==" "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg=="
}, },
"node_modules/@vueuse/core": { "node_modules/@vueuse/core": {
"version": "9.11.1", "version": "9.12.0",
"resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.11.1.tgz", "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.12.0.tgz",
"integrity": "sha512-E/cizD1w9ILkq4axYjZrXLkKaBfzloaby2n3NMjUfd6yI/jkfTVgc6iwy/Cw2e++Ld4LphGbO+3MhzizvwUslQ==", "integrity": "sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==",
"dependencies": { "dependencies": {
"@types/web-bluetooth": "^0.0.16", "@types/web-bluetooth": "^0.0.16",
"@vueuse/metadata": "9.11.1", "@vueuse/metadata": "9.12.0",
"@vueuse/shared": "9.11.1", "@vueuse/shared": "9.12.0",
"vue-demi": "*" "vue-demi": "*"
}, },
"funding": { "funding": {
@ -2699,17 +2699,17 @@
} }
}, },
"node_modules/@vueuse/metadata": { "node_modules/@vueuse/metadata": {
"version": "9.11.1", "version": "9.12.0",
"resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.11.1.tgz", "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.12.0.tgz",
"integrity": "sha512-ABjkrG+VXggNhjfGyw5e/sekxTZfXTwjrYXkkWQmQ7Biyv+Gq9UD6IDNfeGvQZEINI0Qzw6nfuO2UFCd3hlrxQ==", "integrity": "sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ==",
"funding": { "funding": {
"url": "https://github.com/sponsors/antfu" "url": "https://github.com/sponsors/antfu"
} }
}, },
"node_modules/@vueuse/shared": { "node_modules/@vueuse/shared": {
"version": "9.11.1", "version": "9.12.0",
"resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.11.1.tgz", "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.12.0.tgz",
"integrity": "sha512-UTZYGAjT96hWn4buf4wstZbeheBVNcKPQuej6qpoSkjF1atdaeCD6kqm9uGL2waHfisSgH9mq0qCRiBOk5C/2w==", "integrity": "sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==",
"dependencies": { "dependencies": {
"vue-demi": "*" "vue-demi": "*"
}, },
@ -4668,9 +4668,9 @@
} }
}, },
"node_modules/eslint": { "node_modules/eslint": {
"version": "8.32.0", "version": "8.33.0",
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz", "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz",
"integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==", "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@eslint/eslintrc": "^1.4.1", "@eslint/eslintrc": "^1.4.1",
@ -6879,9 +6879,9 @@
"integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==" "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
}, },
"node_modules/keycode": { "node_modules/keycode": {
"version": "2.2.1", "version": "2.2.0",
"resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz", "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
"integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==" "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A=="
}, },
"node_modules/klona": { "node_modules/klona": {
"version": "2.0.6", "version": "2.0.6",
@ -9461,9 +9461,9 @@
"dev": true "dev": true
}, },
"node_modules/sass": { "node_modules/sass": {
"version": "1.57.1", "version": "1.58.0",
"resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.0.tgz",
"integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", "integrity": "sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==",
"devOptional": true, "devOptional": true,
"dependencies": { "dependencies": {
"chokidar": ">=3.0.0 <4.0.0", "chokidar": ">=3.0.0 <4.0.0",
@ -10515,12 +10515,12 @@
} }
}, },
"node_modules/video.js": { "node_modules/video.js": {
"version": "7.21.1", "version": "7.21.2",
"resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.1.tgz", "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.2.tgz",
"integrity": "sha512-AvHfr14ePDHCfW5Lx35BvXk7oIonxF6VGhSxocmTyqotkQpxwYdmt4tnQSV7MYzNrYHb0GI8tJMt20NDkCQrxg==", "integrity": "sha512-Zbo23oT4CbtIxeAtfTvzdl7OlN/P34ir7hDzXFtLZB+BtJsaLy0Rgh/06dBMJSGEjQCDo4MUS6uPonuX0Nl3Kg==",
"dependencies": { "dependencies": {
"@babel/runtime": "^7.12.5", "@babel/runtime": "^7.12.5",
"@videojs/http-streaming": "2.15.1", "@videojs/http-streaming": "2.16.0",
"@videojs/vhs-utils": "^3.0.4", "@videojs/vhs-utils": "^3.0.4",
"@videojs/xhr": "2.6.0", "@videojs/xhr": "2.6.0",
"aes-decrypter": "3.1.3", "aes-decrypter": "3.1.3",

10
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ffplayout-frontend", "name": "ffplayout-frontend",
"version": "0.1.3", "version": "0.2.0",
"description": "Web GUI for ffplayout", "description": "Web GUI for ffplayout",
"author": "Jonathan Baecker", "author": "Jonathan Baecker",
"private": true, "private": true,
@ -15,7 +15,7 @@
"@nuxt/types": "^2.15.8", "@nuxt/types": "^2.15.8",
"@pinia/nuxt": "^0.4.6", "@pinia/nuxt": "^0.4.6",
"@popperjs/core": "^2.11.6", "@popperjs/core": "^2.11.6",
"@vueuse/core": "^9.11.1", "@vueuse/core": "^9.12.0",
"bootstrap": "^5.3.0-alpha1", "bootstrap": "^5.3.0-alpha1",
"bootstrap-icons": "^1.10.3", "bootstrap-icons": "^1.10.3",
"cookie-universal-nuxt": "^2.2.2", "cookie-universal-nuxt": "^2.2.2",
@ -35,11 +35,11 @@
"@types/bootstrap": "^5.2.6", "@types/bootstrap": "^5.2.6",
"@types/lodash": "^4.14.191", "@types/lodash": "^4.14.191",
"@types/splitpanes": "^2.2.1", "@types/splitpanes": "^2.2.1",
"@types/video.js": "^7.3.50", "@types/video.js": "^7.3.51",
"eslint": "^8.32.0", "eslint": "^8.33.0",
"eslint-plugin-nuxt": "^4.0.0", "eslint-plugin-nuxt": "^4.0.0",
"nuxt": "3.1.1", "nuxt": "3.1.1",
"sass": "^1.57.1", "sass": "^1.58.0",
"sass-loader": "^13.2.0" "sass-loader": "^13.2.0"
} }
} }

27
pages/player.vue
View File

@ -64,7 +64,19 @@
> >
<div class="row"> <div class="row">
<div class="col-1 browser-icons-col"> <div class="col-1 browser-icons-col">
<i class="bi-film browser-icons" /> <i
v-if="mediaType(element.name) === 'audio'"
class="bi-music-note-beamed browser-icons"
/>
<i
v-else-if="mediaType(element.name) === 'video'"
class="bi-film browser-icons"
/>
<i
v-else-if="mediaType(element.name) === 'image'"
class="bi-file-earmark-image browser-icons"
/>
<i v-else class="bi-file-binary browser-icons" />
</div> </div>
<div class="col browser-item-text grabbing"> <div class="col browser-item-text grabbing">
{{ element.name }} {{ element.name }}
@ -491,12 +503,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<div class="form-check select-all-div"> <div class="form-check select-all-div">
<input <input id="checkAll" class="form-check-input" type="checkbox" v-model="generateFromAll" />
id="checkAll"
class="form-check-input"
type="checkbox"
v-model="generateFromAll"
/>
<label class="form-check-label" for="checkAll">All</label> <label class="form-check-label" for="checkAll">All</label>
</div> </div>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cancel</button> <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Cancel</button>
@ -526,7 +533,7 @@ import { useMedia } from '~/stores/media'
import { usePlaylist } from '~/stores/playlist' import { usePlaylist } from '~/stores/playlist'
const { $_, $dayjs } = useNuxtApp() const { $_, $dayjs } = useNuxtApp()
const { secToHMS, filename, secondsToTime, toMin } = 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' }
@ -575,6 +582,7 @@ const newSource = ref({
category: '', category: '',
custom_filter: '', custom_filter: '',
source: '', source: '',
audio: '',
uid: '', uid: '',
} as PlaylistItem) } as PlaylistItem)
@ -726,6 +734,7 @@ function processSource(evt: any) {
category: '', category: '',
custom_filter: '', custom_filter: '',
source: '', source: '',
audio: '',
uid: '', uid: '',
} }
} }
@ -740,6 +749,7 @@ function clearNewSource() {
category: '', category: '',
custom_filter: '', custom_filter: '',
source: '', source: '',
audio: '',
uid: genUID(), uid: genUID(),
} }
} }
@ -755,6 +765,7 @@ function editPlaylistItem(i: number) {
category: playlistStore.playlist[i].category, category: playlistStore.playlist[i].category,
custom_filter: playlistStore.playlist[i].custom_filter, custom_filter: playlistStore.playlist[i].custom_filter,
source: playlistStore.playlist[i].source, source: playlistStore.playlist[i].source,
audio: playlistStore.playlist[i].audio,
uid: playlistStore.playlist[i].uid, uid: playlistStore.playlist[i].uid,
} }
} }

1
public/Musik Symbolic link
View File

@ -0,0 +1 @@
/home/jonathan/Musik

4
types/intex.ts → types/index.ts
View File

@ -1,7 +1,7 @@
export {} export { }
declare global { declare global {
interface Crumb { interface Crumb {
text: string text: string
path: string path: string
} }