Audio files now work with the embedded player

master
Bobby Wibowo 2 years ago
parent daa2a2f1fa
commit bffc9c88e5
No known key found for this signature in database
GPG Key ID: 51C3A1E1E22D26CF
  1. 6
      public/libs/fontello/config.json
  2. BIN
      public/libs/fontello/fontello.eot
  3. 2
      public/libs/fontello/fontello.svg
  4. BIN
      public/libs/fontello/fontello.ttf
  5. BIN
      public/libs/fontello/fontello.woff
  6. BIN
      public/libs/fontello/fontello.woff2
  7. 36
      src/js/dashboard.js
  8. 4
      src/js/player.js
  9. 1
      src/libs/fontello/fontello.css
  10. 2
      src/versions.json

@ -247,6 +247,12 @@
"css": "exchange",
"code": 61676,
"src": "fontawesome"
},
{
"uid": "81db033e704eb7c586a365559d7c0f36",
"css": "audio",
"code": 61895,
"src": "fontawesome"
}
]
}

Binary file not shown.

@ -70,6 +70,8 @@
<glyph glyph-name="doc-inv" unicode="&#xf15b;" d="M571 564v264q13-8 21-16l227-228q8-7 16-20h-264z m-71-18q0-22 16-37t38-16h303v-589q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h446v-304z" horiz-adv-x="857.1" />
<glyph glyph-name="audio" unicode="&#xf1c7;" d="M819 638q16-16 27-42t11-50v-642q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h500q22 0 49-11t42-27z m-248 136v-210h210q-5 17-12 23l-175 175q-6 7-23 12z m215-853v572h-232q-23 0-38 16t-16 37v233h-429v-858h715z m-440 455q11-5 11-17v-304q0-12-11-16-4-1-7-1-6 0-12 5l-93 93h-73q-8 0-13 5t-5 13v107q0 8 5 13t13 5h73l93 93q8 8 19 4z m233-385q17 0 28 14 72 88 72 202t-72 203q-9 11-24 13t-27-8q-11-9-13-24t8-26q56-69 56-158t-56-157q-9-12-8-27t13-23q10-9 23-9z m-118 83q15 0 26 11 49 52 49 122t-49 122q-10 11-25 12t-26-10-11-25 10-26q29-32 29-73t-29-73q-10-11-10-26t11-25q12-9 25-9z" horiz-adv-x="857.1" />
<glyph glyph-name="paper-plane" unicode="&#xf1d8;" d="M984 844q19-13 15-36l-142-857q-3-16-18-25-8-5-18-5-6 0-13 3l-253 104-135-165q-10-13-27-13-7 0-12 2-11 4-17 13t-7 21v195l482 590-596-516-221 91q-20 8-22 30-1 23 18 33l928 536q9 5 18 5 11 0 20-6z" horiz-adv-x="1000" />
<glyph glyph-name="chrome" unicode="&#xf268;" d="M498 850q134 1 252-67 130-75 196-208l-414 22q-89 5-164-41t-103-128l-154 236q72 89 174 137t213 49z m-416-226l188-370q40-80 117-121t164-25l-129-252q-118 19-214 88t-152 176-56 230q0 149 82 274z m885-94q32-84 33-174t-27-170-86-152-137-117q-128-74-278-66l226 347q49 73 46 162t-59 155z m-467-11q70 0 119-50t50-119-50-119-119-49-119 49-49 119 49 119 119 50z" horiz-adv-x="1000" />

Before

Width:  |  Height:  |  Size: 16 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

@ -91,9 +91,9 @@ const page = {
clipboardJS: null,
lazyLoad: null,
imageExts: ['.webp', '.jpg', '.jpeg', '.gif', '.png', '.tiff', '.tif', '.svg'],
// TODO: Disable "Load original" button with non-streamable extensions
videoExts: ['.webm', '.mp4', '.wmv', '.avi', '.mov', '.mkv', '.m4v', '.m2ts'],
imageExts: ['.gif', '.jpeg', '.jpg', '.png', '.svg', '.tif', '.tiff', '.webp'],
videoExts: ['.3g2', '.3gp', '.asf', '.avchd', '.avi', '.divx', '.evo', '.flv', '.h264', '.h265', '.hevc', '.m2p', '.m2ts', '.m4v', '.mk3d', '.mkv', '.mov', '.mp4', '.mpeg', '.mpg', '.mxf', '.ogg', '.ogv', '.ps', '.qt', '.rmvb', '.ts', '.vob', '.webm', '.wmv'],
audioExts: ['.flac', '.mp3', '.wma'],
isSomethingLoading: false,
fadingIn: null,
@ -677,15 +677,20 @@ page.getUploads = (params = {}) => {
files[i].type = 'picture'
} else if (page.videoExts.includes(extname)) {
files[i].type = 'video'
} else if (page.audioExts.includes(extname)) {
files[i].type = 'audio'
}
files[i].previewable = files[i].thumb || files[i].type === 'audio'
// Cache bare minimum data for thumbnails viewer
page.cache[files[i].id] = {
name: files[i].name,
original: files[i].original,
thumb: files[i].thumb,
file: files[i].file,
type: files[i].type
type: files[i].type,
previewable: files[i].previewable
}
// Prettify
@ -743,7 +748,7 @@ page.getUploads = (params = {}) => {
div.innerHTML += `
<input type="checkbox" class="checkbox" title="Select" data-index="${i}" data-action="select"${upload.selected ? ' checked' : ''}>
<div class="controls">
${upload.thumb
${upload.previewable
? `<a class="button is-small is-primary" title="Display preview" data-action="display-preview">
<span class="icon">
<i class="${upload.type !== 'other' ? `icon-${upload.type}` : 'icon-doc-inv'}"></i>
@ -827,7 +832,7 @@ page.getUploads = (params = {}) => {
<td class="prettydate">${upload.prettyDate}</td>
${hasExpiryDateColumn ? `<td class="prettyexpirydate">${upload.prettyExpiryDate || '-'}</td>` : ''}
<td class="controls has-text-right">
<a class="button is-small is-primary is-outlined" title="${upload.thumb ? 'Display preview' : 'File can\'t be previewed'}" data-action="display-preview"${upload.thumb ? '' : ' disabled'}>
<a class="button is-small is-primary is-outlined" title="${upload.previewable ? 'Display preview' : 'File can\'t be previewed'}" data-action="display-preview"${upload.previewable ? '' : ' disabled'}>
<span class="icon">
<i class="${upload.type !== 'other' ? `icon-${upload.type}` : 'icon-doc-inv'}"></i>
</span>
@ -917,7 +922,7 @@ page.toggleOriginalNames = element => {
page.displayPreview = id => {
const file = page.cache[id]
if (!file.thumb) return
if (!file.previewable) return
const div = document.createElement('div')
div.innerHTML = `
@ -926,9 +931,11 @@ page.displayPreview = id => {
<div class="has-text-weight-bold">${file.name}</div>
<div>${file.original}</div>
</p>
<p class="swal-display-thumb-container">
${file.thumb
? `<p class="swal-display-thumb-container">
<img id="swalThumb" src="${file.thumb}">
</p>
</p>`
: ''}
</div>
`
@ -937,14 +944,15 @@ page.displayPreview = id => {
const extname = exec && exec[0] ? exec[0].toLowerCase() : null
const isimage = page.imageExts.includes(extname)
const isvideo = !isimage && page.videoExts.includes(extname)
const isaudio = !isimage && !isvideo && page.audioExts.includes(extname)
if (isimage || isvideo) {
if (isimage || isvideo || isaudio) {
div.innerHTML += `
<div class="field has-text-centered">
<div class="controls">
<a id="swalOriginal" type="button" class="button is-info">
<span class="icon">
<i class="icon-${isimage ? 'arrows-cw' : 'video'}"></i>
<i class="icon-${file.type}"></i>
</span>
<span>${isimage ? 'Load original' : 'Play in embedded player'}</span>
</a>
@ -976,7 +984,7 @@ page.displayPreview = id => {
`
}
})
} else {
} else if (isvideo || isaudio) {
const match = file.file.match(/.*\/(.*)$/)
console.log(file.file, match)
if (match || match[1]) {
@ -991,10 +999,6 @@ page.displayPreview = id => {
content: div,
buttons: false
}).then(() => {
// Destroy video, if necessary
const video = div.querySelector('#swalVideo')
if (video) video.remove()
// Restore modal size
document.body.querySelector('.swal-overlay .swal-modal').classList.remove('is-expanded')
})

@ -66,9 +66,9 @@ page.reloadVideo = () => {
return page.onAxiosError(response)
}
if (!response.headers['content-type'].startsWith('video/')) {
if (!/^(video|audio)\//.test(response.headers['content-type'])) {
page.toggleReloadBtn(true)
return swal('An error occurred!', 'The requested upload does not appear to be a video file.', 'error')
return swal('An error occurred!', 'The requested upload does not appear to be a media file.', 'error')
}
if (page.player) {

@ -93,6 +93,7 @@
.icon-docs::before { content: '\f0c5' } /* '' */
.icon-exchange:before { content: '\f0ec'; } /* '' */
.icon-doc-inv::before { content: '\f15b' } /* '' */
.icon-audio:before { content: '\f1c7'; } /* '' */
.icon-paper-plane::before { content: '\f1d8' } /* '' */
.icon-chrome::before { content: '\f268' } /* '' */
.icon-firefox::before { content: '\f269' } /* '' */

@ -3,5 +3,5 @@
"2": "1602515119",
"3": "1602515119",
"4": "1602515119",
"5": "1602515119"
"5": "1604412502"
}

Loading…
Cancel
Save