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

possibility to preview live/html sources

Browse Source
This commit is contained in:
jb-alvarado 2023-12-07 22:00:05 +01:00
parent fdba746ea3
commit 5102ff8780
6 changed files with 218 additions and 627 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
composables/helper.ts
View File

@ -94,6 +94,7 @@ export const stringFormatter = () => {
} }
function mediaType(path: string) { function mediaType(path: string) {
const liveType = ['m3u8']
const videoType = [ const videoType = [
'avi', 'avi',
'flv', 'flv',
@ -131,7 +132,9 @@ export const stringFormatter = () => {
const ext = path.split('.').pop() const ext = path.split('.').pop()
if (ext) { if (ext) {
if (videoType.includes(ext)) { if (liveType.includes(ext)) {
return 'live'
} else if (videoType.includes(ext)) {
return 'video' return 'video'
} else if (audioType.includes(ext)) { } else if (audioType.includes(ext)) {
return 'audio' return 'audio'

2
nuxt.config.ts
View File

@ -9,6 +9,8 @@ export default defineNuxtConfig({
devProxy: { devProxy: {
'/api': { target: 'http://127.0.0.1:8787/api' }, '/api': { target: 'http://127.0.0.1:8787/api' },
'/auth': { target: 'http://127.0.0.1:8787/auth' }, '/auth': { target: 'http://127.0.0.1:8787/auth' },
'/live': { target: 'http://127.0.0.1:8787/live' },
'/file': { target: 'http://127.0.0.1:8787/file' },
}, },
}, },

777
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "ffplayout-frontend", "name": "ffplayout-frontend",
"version": "0.6.2", "version": "0.6.3",
"description": "Web GUI for ffplayout", "description": "Web GUI for ffplayout",
"author": "Jonathan Baecker", "author": "Jonathan Baecker",
"private": true, "private": true,
@ -16,7 +16,7 @@
"@nuxt/types": "^2.17.2", "@nuxt/types": "^2.17.2",
"@pinia/nuxt": "^0.5.1", "@pinia/nuxt": "^0.5.1",
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"@vueuse/core": "^10.6.1", "@vueuse/core": "^10.7.0",
"bootstrap": "^5.3.2", "bootstrap": "^5.3.2",
"bootstrap-icons": "^1.11.2", "bootstrap-icons": "^1.11.2",
"cookie-universal-nuxt": "^2.2.2", "cookie-universal-nuxt": "^2.2.2",

35
pages/media.vue
View File

@ -13,10 +13,7 @@
:active="index === mediaStore.crumbs.length - 1" :active="index === mediaStore.crumbs.length - 1"
@click="getPath(crumb.path)" @click="getPath(crumb.path)"
> >
<a <a v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index" href="#">
v-if="mediaStore.crumbs.length > 1 && mediaStore.crumbs.length - 1 > index"
href="#"
>
{{ crumb.text }} {{ crumb.text }}
</a> </a>
<span v-else>{{ crumb.text }}</span> <span v-else>{{ crumb.text }}</span>
@ -70,7 +67,8 @@
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#deleteModal" data-bs-target="#deleteModal"
@click=" @click="
deleteName = `/${mediaStore.folderTree.source}/${folder.name}`.replace( deleteName =
`/${mediaStore.folderTree.source}/${folder.name}`.replace(
/\/[/]+/g, /\/[/]+/g,
'/' '/'
) )
@ -272,7 +270,7 @@
type="button" type="button"
class="btn btn-primary" class="btn btn-primary"
title="Create Folder" title="Create Folder"
data-tooltip=tooltip data-tooltip="tooltip"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#folderModal" data-bs-target="#folderModal"
> >
@ -282,7 +280,7 @@
type="button" type="button"
class="btn btn-primary" class="btn btn-primary"
title="Upload File" title="Upload File"
data-tooltip=tooltip data-tooltip="tooltip"
data-bs-toggle="modal" data-bs-toggle="modal"
data-bs-target="#uploadModal" data-bs-target="#uploadModal"
> >
@ -446,10 +444,7 @@ onMounted(async () => {
extra_extensions = extra_extensions.split(',') extra_extensions = extra_extensions.split(',')
} }
const exts = [ const exts = [...config_extensions, ...extra_extensions].map((ext) => {
...config_extensions,
...extra_extensions,
].map((ext) => {
return `.${ext}` return `.${ext}`
}) })
@ -482,10 +477,18 @@ function setPreviewData(path: string) {
} }
previewName.value = fullPath.split('/').slice(-1)[0] previewName.value = fullPath.split('/').slice(-1)[0]
previewUrl.value = encodeURIComponent(`/file/${configStore.configGui[configStore.configID].id}${fullPath}`).replace(/%2F/g, '/') previewUrl.value = encodeURIComponent(`/file/${configStore.configGui[configStore.configID].id}${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}` const fileType =
mediaType(previewName.value) === 'audio'
? `audio/${ext}`
: mediaType(previewName.value) === 'live'
? 'application/x-mpegURL'
: `video/${ext}`
if (configStore.configPlayout.storage.extensions.includes(`${ext}`)) { if (configStore.configPlayout.storage.extensions.includes(`${ext}`)) {
isVideo.value = true isVideo.value = true
@ -634,7 +637,7 @@ function upload(file: any): Promise<null | undefined> {
formData.append(file.name, file) formData.append(file.name, file)
xhr.value = new XMLHttpRequest() xhr.value = new XMLHttpRequest()
return new Promise(resolve => { return new Promise((resolve) => {
xhr.value.open( xhr.value.open(
'PUT', 'PUT',
`/api/file/${configStore.configGui[configStore.configID].id}/upload/?path=${encodeURIComponent( `/api/file/${configStore.configGui[configStore.configID].id}/upload/?path=${encodeURIComponent(
@ -662,7 +665,7 @@ function upload(file: any): Promise<null | undefined> {
} }
xhr.value.send(formData) xhr.value.send(formData)
}); })
} }
async function onSubmitUpload(evt: any) { async function onSubmitUpload(evt: any) {
@ -727,7 +730,7 @@ function onResetUpload(evt: any) {
} }
#deleteModal strong { #deleteModal strong {
display:inline-block; display: inline-block;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;

14
pages/player.vue
View File

@ -980,10 +980,22 @@ function setPreviewData(path: string) {
} }
previewName.value = fullPath.split('/').slice(-1)[0] previewName.value = fullPath.split('/').slice(-1)[0]
if (path.match(/^http/)) {
previewUrl.value = path
} else {
previewUrl.value = encodeURIComponent(`/file/${configStore.configGui[configStore.configID].id}${fullPath}`).replace(/%2F/g, '/') previewUrl.value = encodeURIComponent(`/file/${configStore.configGui[configStore.configID].id}${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}`
: mediaType(previewName.value) === 'live'
? 'application/x-mpegURL'
: `video/${ext}`
if (configStore.configPlayout.storage.extensions.includes(`${ext}`)) { if (configStore.configPlayout.storage.extensions.includes(`${ext}`)) {
isVideo.value = true isVideo.value = true
previewOpt.value = { previewOpt.value = {
@ -994,7 +1006,7 @@ function setPreviewData(path: string) {
preload: 'auto', preload: 'auto',
sources: [ sources: [
{ {
type: `video/${ext}`, type: fileType,
src: previewUrl.value, src: previewUrl.value,
}, },
], ],