From 0a7efd76a1e7aa586953e72eec4b04354a09bae0 Mon Sep 17 00:00:00 2001 From: jb-alvarado Date: Thu, 2 Feb 2023 09:53:26 +0100 Subject: [PATCH] fix empty audio input value, add audio only support --- .gitignore | 2 + components/Browser.vue | 19 ++++++++-- composables/helper.ts | 23 +++++++++++- package-lock.json | 72 ++++++++++++++++++------------------ package.json | 10 ++--- pages/player.vue | 27 ++++++++++---- public/Musik | 1 + types/{intex.ts => index.ts} | 4 +- 8 files changed, 102 insertions(+), 56 deletions(-) create mode 120000 public/Musik rename types/{intex.ts => index.ts} (96%) diff --git a/.gitignore b/.gitignore index 6b0a2448..78052462 100644 --- a/.gitignore +++ b/.gitignore @@ -33,3 +33,5 @@ Videos/ .vscode/ home home/ +live1 +live1/ diff --git a/components/Browser.vue b/components/Browser.vue index 4daa2033..7c19f090 100644 --- a/components/Browser.vue +++ b/components/Browser.vue @@ -96,7 +96,19 @@ >
- + + + +
{{ element.name }} @@ -251,7 +263,7 @@ const authStore = useAuth() const configStore = useConfig() const indexStore = useIndex() const mediaStore = useMedia() -const { toMin } = stringFormatter() +const { toMin, mediaType } = stringFormatter() const contentType = { 'content-type': 'application/json;charset=UTF-8' } const browserIsLoading = ref(false) @@ -288,6 +300,7 @@ function setPreviewData(path: string) { previewUrl.value = encodeURIComponent(`${fullPath}`).replace(/%2F/g, '/') 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}`)) { isVideo.value = true @@ -299,7 +312,7 @@ function setPreviewData(path: string) { preload: 'auto', sources: [ { - type: `video/${ext}`, + type: fileType, src: previewUrl.value, }, ], diff --git a/composables/helper.ts b/composables/helper.ts index 4c1f71a8..8128be3e 100644 --- a/composables/helper.ts +++ b/composables/helper.ts @@ -63,10 +63,29 @@ export const stringFormatter = () => { } 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 = () => { diff --git a/package-lock.json b/package-lock.json index ff429ef2..6cc9aaef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,18 +1,18 @@ { "name": "ffplayout-frontend", - "version": "0.1.3", + "version": "0.2.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "ffplayout-frontend", - "version": "0.1.3", + "version": "0.2.0", "hasInstallScript": true, "dependencies": { "@nuxt/types": "^2.15.8", "@pinia/nuxt": "^0.4.6", "@popperjs/core": "^2.11.6", - "@vueuse/core": "^9.11.1", + "@vueuse/core": "^9.12.0", "bootstrap": "^5.3.0-alpha1", "bootstrap-icons": "^1.10.3", "cookie-universal-nuxt": "^2.2.2", @@ -32,11 +32,11 @@ "@types/bootstrap": "^5.2.6", "@types/lodash": "^4.14.191", "@types/splitpanes": "^2.2.1", - "@types/video.js": "^7.3.50", - "eslint": "^8.32.0", + "@types/video.js": "^7.3.51", + "eslint": "^8.33.0", "eslint-plugin-nuxt": "^4.0.0", "nuxt": "3.1.1", - "sass": "^1.57.1", + "sass": "^1.58.0", "sass-loader": "^13.2.0" } }, @@ -2184,9 +2184,9 @@ } }, "node_modules/@types/video.js": { - "version": "7.3.50", - "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.50.tgz", - "integrity": "sha512-xG0xoeyLGuWhtWMBBLRVhTEOfT2n6AjhNoWhFWVbpa6A8hSMi4eNvttuHYXsn6NslITu7IUdKPDRQ2bAWgXKDA==", + "version": "7.3.51", + "resolved": "https://registry.npmjs.org/@types/video.js/-/video.js-7.3.51.tgz", + "integrity": "sha512-xLlt/ZfCuWYBvG2MRn018RvaEplcK6dI63aOiVUeeAWFyjx3Br1hL749ndFgbrvNdY4m9FoHG1FQ/PB6IpfSAQ==", "dev": true }, "node_modules/@types/web-bluetooth": { @@ -2391,9 +2391,9 @@ } }, "node_modules/@videojs/http-streaming": { - "version": "2.15.1", - "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.15.1.tgz", - "integrity": "sha512-/uuN3bVkEeJAdrhu5Hyb19JoUo3CMys7yf2C1vUjeL1wQaZ4Oe8JrZzRrnWZ0rjvPgKfNLPXQomsRtgrMoRMJQ==", + "version": "2.16.0", + "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-2.16.0.tgz", + "integrity": "sha512-mGNTqjENzP86XGM6HSWdWVO/KAsDlf5+idW2W7dL1+NkzWpwZlSEYhrdEVVnhoOb0A6E7JW6LM611/JA7Jn/3A==", "dependencies": { "@babel/runtime": "^7.12.5", "@videojs/vhs-utils": "3.0.5", @@ -2645,13 +2645,13 @@ "integrity": "sha512-Ewzq5Yhimg7pSztDV+RH1UDKBzmtqieXQlpTVm2AwraoRL/Rks96mvd8Vgi7Lj+h+TH8dv7mXD3FRZR3TUvbSg==" }, "node_modules/@vueuse/core": { - "version": "9.11.1", - "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.11.1.tgz", - "integrity": "sha512-E/cizD1w9ILkq4axYjZrXLkKaBfzloaby2n3NMjUfd6yI/jkfTVgc6iwy/Cw2e++Ld4LphGbO+3MhzizvwUslQ==", + "version": "9.12.0", + "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.12.0.tgz", + "integrity": "sha512-h/Di8Bvf6xRcvS/PvUVheiMYYz3U0tH3X25YxONSaAUBa841ayMwxkuzx/DGUMCW/wHWzD8tRy2zYmOC36r4sg==", "dependencies": { "@types/web-bluetooth": "^0.0.16", - "@vueuse/metadata": "9.11.1", - "@vueuse/shared": "9.11.1", + "@vueuse/metadata": "9.12.0", + "@vueuse/shared": "9.12.0", "vue-demi": "*" }, "funding": { @@ -2699,17 +2699,17 @@ } }, "node_modules/@vueuse/metadata": { - "version": "9.11.1", - "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.11.1.tgz", - "integrity": "sha512-ABjkrG+VXggNhjfGyw5e/sekxTZfXTwjrYXkkWQmQ7Biyv+Gq9UD6IDNfeGvQZEINI0Qzw6nfuO2UFCd3hlrxQ==", + "version": "9.12.0", + "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.12.0.tgz", + "integrity": "sha512-9oJ9MM9lFLlmvxXUqsR1wLt1uF7EVbP5iYaHJYqk+G2PbMjY6EXvZeTjbdO89HgoF5cI6z49o2zT/jD9SVoNpQ==", "funding": { "url": "https://github.com/sponsors/antfu" } }, "node_modules/@vueuse/shared": { - "version": "9.11.1", - "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.11.1.tgz", - "integrity": "sha512-UTZYGAjT96hWn4buf4wstZbeheBVNcKPQuej6qpoSkjF1atdaeCD6kqm9uGL2waHfisSgH9mq0qCRiBOk5C/2w==", + "version": "9.12.0", + "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.12.0.tgz", + "integrity": "sha512-TWuJLACQ0BVithVTRbex4Wf1a1VaRuSpVeyEd4vMUWl54PzlE0ciFUshKCXnlLuD0lxIaLK4Ypj3NXYzZh4+SQ==", "dependencies": { "vue-demi": "*" }, @@ -4668,9 +4668,9 @@ } }, "node_modules/eslint": { - "version": "8.32.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.32.0.tgz", - "integrity": "sha512-nETVXpnthqKPFyuY2FNjz/bEd6nbosRgKbkgS/y1C7LJop96gYHWpiguLecMHQ2XCPxn77DS0P+68WzG6vkZSQ==", + "version": "8.33.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.33.0.tgz", + "integrity": "sha512-WjOpFQgKK8VrCnAtl8We0SUOy/oVZ5NHykyMiagV1M9r8IFpIJX7DduK6n1mpfhlG7T1NLWm2SuD8QB7KFySaA==", "dev": true, "dependencies": { "@eslint/eslintrc": "^1.4.1", @@ -6879,9 +6879,9 @@ "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A==" }, "node_modules/keycode": { - "version": "2.2.1", - "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz", - "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==" + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz", + "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A==" }, "node_modules/klona": { "version": "2.0.6", @@ -9461,9 +9461,9 @@ "dev": true }, "node_modules/sass": { - "version": "1.57.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.57.1.tgz", - "integrity": "sha512-O2+LwLS79op7GI0xZ8fqzF7X2m/m8WFfI02dHOdsK5R2ECeS5F62zrwg/relM1rjSLy7Vd/DiMNIvPrQGsA0jw==", + "version": "1.58.0", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.58.0.tgz", + "integrity": "sha512-PiMJcP33DdKtZ/1jSjjqVIKihoDc6yWmYr9K/4r3fVVIEDAluD0q7XZiRKrNJcPK3qkLRF/79DND1H5q1LBjgg==", "devOptional": true, "dependencies": { "chokidar": ">=3.0.0 <4.0.0", @@ -10515,12 +10515,12 @@ } }, "node_modules/video.js": { - "version": "7.21.1", - "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.1.tgz", - "integrity": "sha512-AvHfr14ePDHCfW5Lx35BvXk7oIonxF6VGhSxocmTyqotkQpxwYdmt4tnQSV7MYzNrYHb0GI8tJMt20NDkCQrxg==", + "version": "7.21.2", + "resolved": "https://registry.npmjs.org/video.js/-/video.js-7.21.2.tgz", + "integrity": "sha512-Zbo23oT4CbtIxeAtfTvzdl7OlN/P34ir7hDzXFtLZB+BtJsaLy0Rgh/06dBMJSGEjQCDo4MUS6uPonuX0Nl3Kg==", "dependencies": { "@babel/runtime": "^7.12.5", - "@videojs/http-streaming": "2.15.1", + "@videojs/http-streaming": "2.16.0", "@videojs/vhs-utils": "^3.0.4", "@videojs/xhr": "2.6.0", "aes-decrypter": "3.1.3", diff --git a/package.json b/package.json index ec909fd1..d23a2920 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ffplayout-frontend", - "version": "0.1.3", + "version": "0.2.0", "description": "Web GUI for ffplayout", "author": "Jonathan Baecker", "private": true, @@ -15,7 +15,7 @@ "@nuxt/types": "^2.15.8", "@pinia/nuxt": "^0.4.6", "@popperjs/core": "^2.11.6", - "@vueuse/core": "^9.11.1", + "@vueuse/core": "^9.12.0", "bootstrap": "^5.3.0-alpha1", "bootstrap-icons": "^1.10.3", "cookie-universal-nuxt": "^2.2.2", @@ -35,11 +35,11 @@ "@types/bootstrap": "^5.2.6", "@types/lodash": "^4.14.191", "@types/splitpanes": "^2.2.1", - "@types/video.js": "^7.3.50", - "eslint": "^8.32.0", + "@types/video.js": "^7.3.51", + "eslint": "^8.33.0", "eslint-plugin-nuxt": "^4.0.0", "nuxt": "3.1.1", - "sass": "^1.57.1", + "sass": "^1.58.0", "sass-loader": "^13.2.0" } } diff --git a/pages/player.vue b/pages/player.vue index baa2e12e..66548101 100644 --- a/pages/player.vue +++ b/pages/player.vue @@ -64,7 +64,19 @@ >
- + + + +
{{ element.name }} @@ -491,12 +503,7 @@
- +
@@ -526,7 +533,7 @@ import { useMedia } from '~/stores/media' import { usePlaylist } from '~/stores/playlist' const { $_, $dayjs } = useNuxtApp() -const { secToHMS, filename, secondsToTime, toMin } = stringFormatter() +const { secToHMS, filename, secondsToTime, toMin, mediaType } = stringFormatter() const { processPlaylist, genUID } = playlistOperations() const contentType = { 'content-type': 'application/json;charset=UTF-8' } @@ -575,6 +582,7 @@ const newSource = ref({ category: '', custom_filter: '', source: '', + audio: '', uid: '', } as PlaylistItem) @@ -726,6 +734,7 @@ function processSource(evt: any) { category: '', custom_filter: '', source: '', + audio: '', uid: '', } } @@ -740,6 +749,7 @@ function clearNewSource() { category: '', custom_filter: '', source: '', + audio: '', uid: genUID(), } } @@ -755,6 +765,7 @@ function editPlaylistItem(i: number) { category: playlistStore.playlist[i].category, custom_filter: playlistStore.playlist[i].custom_filter, source: playlistStore.playlist[i].source, + audio: playlistStore.playlist[i].audio, uid: playlistStore.playlist[i].uid, } } diff --git a/public/Musik b/public/Musik new file mode 120000 index 00000000..5ba7b3a7 --- /dev/null +++ b/public/Musik @@ -0,0 +1 @@ +/home/jonathan/Musik \ No newline at end of file diff --git a/types/intex.ts b/types/index.ts similarity index 96% rename from types/intex.ts rename to types/index.ts index a6308507..c4f12dd7 100644 --- a/types/intex.ts +++ b/types/index.ts @@ -1,7 +1,7 @@ -export {} +export { } declare global { - interface Crumb { + interface Crumb { text: string path: string }