Skip to content
This repository has been archived by the owner on May 28, 2024. It is now read-only.

NMC 554 Guest view video thumbnail #249

Closed
wants to merge 5 commits into from
Closed

NMC 554 Guest view video thumbnail #249

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e1fcf3d
Thumbnail generated for guest video
TSI-sangramdesai Aug 30, 2021
e3d0f50
Spacing corrected
TSI-sangramdesai Sep 3, 2021
affee02
Spacing corrected
TSI-sangramdesai Sep 3, 2021
6822a23
spacing corrected
TSI-sangramdesai Sep 3, 2021
9fbac42
Merge branch 'NMC-554' of https://github.com/nextmcloud/files_videopl…
TSI-sangramdesai Sep 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 11 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -238,3 +238,14 @@ video-js.vjs-ended .vjs-big-play-button,.video-js.vjs-paused .vjs-big-play-butto
min-width: 300px;
max-width: 100% !important;
}

/** video thumbanil black border removed **/

#my_video_1_html5_api {
background-color: #FFFF !important;
}

.video-js,
.vjs-poster {
background: none !important;
}
369 changes: 189 additions & 180 deletions src/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,183 +19,192 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/

import escapeHTML from 'escape-html'

__webpack_nonce__ = btoa(OC.requestToken)
__webpack_public_path__ = OC.filePath('files_videoplayer', '', 'js/')

let videojs = null

const videoViewer = {
UI: {
show() {

const source = document.createElement('source')
source.src = escapeHTML(videoViewer.location).replace('&amp;', '&')

if (videoViewer.mime) {
source.type = escapeHTML(videoViewer.mime)
}

const playerView = document.createElement('video')
playerView.id = 'my_video_1'
playerView.classList.add('video-js')
playerView.classList.add('vjs-fill')
playerView.classList.add('vjs-big-play-centered')
playerView.controls = true
playerView.preload = 'auto'
playerView.width = '100%'
playerView.height = '100%'
playerView.poster = OC.filePath('files_videoplayer', '', 'img') + '/poster.png'
playerView.setAttribute('data-setup', '{"techOrder": ["html5"]}')
playerView.appendChild(source)

if (videoViewer.inline === null) {
const overlay = document.createElement('div')
overlay.id = 'videoplayer_overlay'

const outerContainer = document.createElement('div')
outerContainer.id = 'videoplayer_outerContainer'

const container = document.createElement('div')
container.id = 'videoplayer_container'

const player = document.createElement('div')
player.id = 'videoplayer'

container.appendChild(player)
outerContainer.appendChild(container)
overlay.appendChild(outerContainer)

player.appendChild(playerView)
document.body.appendChild(overlay)

// close when clicking on the overlay
overlay.addEventListener('click', function(e) {
if (e.target === this) {
videoViewer.hidePlayer()
}
})

setTimeout(() => { overlay.className = 'show' }, 0)
} else {
const wrapper = document.createElement('div')
wrapper.id = 'videoplayer_view'
wrapper.appendChild(playerView)
videoViewer.inline.appendChild(wrapper)
}
// initialize player
videojs('my_video_1', {
fill: true,
}).ready(function() {
videoViewer.player = this
if (videoViewer.inline === null) {
// append close button to video element
const closeButton = document.createElement('a')
closeButton.className = 'icon-view-close'
closeButton.id = 'box-close'
closeButton.href = '#'
closeButton.addEventListener('click', function() {
videoViewer.hidePlayer()
})
document.getElementById('my_video_1').appendChild(closeButton)
}
// autoplay
if (document.getElementById('body-public') === null) {
videoViewer.player.play()
}
})

},
hide() {
const overlay = document.getElementById('videoplayer_overlay')
overlay.className = ''
setTimeout(() => {
overlay.parentElement.removeChild(overlay)
}, 500)
},
},
mime: null,
file: null,
location: null,
player: null,
inline: null,
mimeTypes: [
'video/mp4',
'video/x-m4v',
'video/webm',
'video/x-flv',
'video/ogg',
'video/quicktime',
'video/x-matroska',
],
mimeTypeAliasses: {
'video/x-matroska': 'video/webm', // mkv support for Chrome. webm uses the same container format
},
onView(file, data) {
videoViewer.file = file
videoViewer.dir = data.dir
videoViewer.location = data.fileList.getDownloadUrl(file, videoViewer.dir)
videoViewer.mime = data.$file.attr('data-mime')
if (Object.prototype.hasOwnProperty.call(videoViewer.mimeTypeAliasses, videoViewer.mime)) {
videoViewer.mime = videoViewer.mimeTypeAliasses[videoViewer.mime]
}
videoViewer.showPlayer()
},
onViewInline(element, file, mime) {
videoViewer.location = file
videoViewer.mime = mime
if (Object.prototype.hasOwnProperty.call(videoViewer.mimeTypeAliasses, videoViewer.mime)) {
videoViewer.mime = videoViewer.mimeTypeAliasses[videoViewer.mime]
}
videoViewer.inline = element
videoViewer.showPlayer()
},
showPlayer() {
import('video.js').then((_videojs) => {
videojs = _videojs.default
Promise.all([
import('../css/style.css'),
// eslint-disable-next-line import/no-webpack-loader-syntax
import('video.js/dist/video-js.css'),
]).then(() => {
videoViewer.UI.show()
})
})
},
hidePlayer() {
if (videoViewer.player !== null && videoViewer.player !== false && videoViewer.inline === null) {
videoViewer.player.dispose()
videoViewer.player = false
videoViewer.UI.hide()
}
},
log(message) {
// eslint-disable-next-line no-console
console.log(message)
},
}

document.addEventListener('DOMContentLoaded', function() {

// add event to ESC key
document.addEventListener('keyup', function(e) {
if ((e.key !== undefined && e.key === 'Escape')
|| (e.keyCode !== undefined && e.keyCode === 27)) {
videoViewer.hidePlayer()
}
})

// Public page magic
if (document.getElementById('body-public') && document.getElementById('imgframe')) {
const mimetype = document.getElementById('mimetype').value
for (let j = 0; j < videoViewer.mimeTypes.length; ++j) {
if (videoViewer.mimeTypes[j] === mimetype) {
const videoUrl = window.location.href.split('?')[0] + '/download'
videoViewer.onViewInline(document.getElementById('imgframe'), videoUrl, mimetype)
break
}
}
}

})
import escapeHTML from 'escape-html'
import { generateUrl } from '@nextcloud/router'
import { encodeFilePath } from '../utils/fileUtils'

__webpack_nonce__ = btoa(OC.requestToken)
__webpack_public_path__ = OC.filePath('files_videoplayer', '', 'js/')

let videojs = null

// preview width generation
const previewWidth = 1366
const previewHeight = 668

const videoViewer = {
UI: {
show() {

var sharingTokenVal = $("#sharingToken").val()
var poster = generateUrl(`/apps/files_sharing/publicpreview/${sharingTokenVal}?x=${previewWidth}&y=${previewHeight}&a=1`)

const source = document.createElement('source')
source.src = escapeHTML(videoViewer.location).replace('&amp;', '&')

if (videoViewer.mime) {
source.type = escapeHTML(videoViewer.mime)
}

const playerView = document.createElement('video')
playerView.id = 'my_video_1'
playerView.classList.add('video-js')
playerView.classList.add('vjs-fill')
playerView.classList.add('vjs-big-play-centered')
playerView.controls = true
playerView.preload = 'auto'
playerView.width = '100%'
playerView.height = '100%'
playerView.poster = poster
playerView.setAttribute('data-setup', '{"techOrder": ["html5"]}')
playerView.appendChild(source)

if (videoViewer.inline === null) {
const overlay = document.createElement('div')
overlay.id = 'videoplayer_overlay'

const outerContainer = document.createElement('div')
outerContainer.id = 'videoplayer_outerContainer'

const container = document.createElement('div')
container.id = 'videoplayer_container'

const player = document.createElement('div')
player.id = 'videoplayer'

container.appendChild(player)
outerContainer.appendChild(container)
overlay.appendChild(outerContainer)

player.appendChild(playerView)
document.body.appendChild(overlay)

// close when clicking on the overlay
overlay.addEventListener('click', function(e) {
if (e.target === this) {
videoViewer.hidePlayer()
}
})

setTimeout(() => { overlay.className = 'show' }, 0)
} else {
const wrapper = document.createElement('div')
wrapper.id = 'videoplayer_view'
wrapper.appendChild(playerView)
videoViewer.inline.appendChild(wrapper)
}
// initialize player
videojs('my_video_1', {
fill: true,
}).ready(function() {
videoViewer.player = this
if (videoViewer.inline === null) {
// append close button to video element
const closeButton = document.createElement('a')
closeButton.className = 'icon-view-close'
closeButton.id = 'box-close'
closeButton.href = '#'
closeButton.addEventListener('click', function() {
videoViewer.hidePlayer()
})
document.getElementById('my_video_1').appendChild(closeButton)
}
// autoplay
if (document.getElementById('body-public') === null) {
videoViewer.player.play()
}
})

},
hide() {
const overlay = document.getElementById('videoplayer_overlay')
overlay.className = ''
setTimeout(() => {
overlay.parentElement.removeChild(overlay)
}, 500)
},
},
mime: null,
file: null,
location: null,
player: null,
inline: null,
mimeTypes: [
'video/mp4',
'video/x-m4v',
'video/webm',
'video/x-flv',
'video/ogg',
'video/quicktime',
'video/x-matroska',
],
mimeTypeAliasses: {
'video/x-matroska': 'video/webm', // mkv support for Chrome. webm uses the same container format
},
onView(file, data) {
videoViewer.file = file
videoViewer.dir = data.dir
videoViewer.location = data.fileList.getDownloadUrl(file, videoViewer.dir)
videoViewer.mime = data.$file.attr('data-mime')
if (Object.prototype.hasOwnProperty.call(videoViewer.mimeTypeAliasses, videoViewer.mime)) {
videoViewer.mime = videoViewer.mimeTypeAliasses[videoViewer.mime]
}
videoViewer.showPlayer()
},
onViewInline(element, file, mime) {
videoViewer.location = file
videoViewer.mime = mime
if (Object.prototype.hasOwnProperty.call(videoViewer.mimeTypeAliasses, videoViewer.mime)) {
videoViewer.mime = videoViewer.mimeTypeAliasses[videoViewer.mime]
}
videoViewer.inline = element
videoViewer.showPlayer()
},
showPlayer() {
import('video.js').then((_videojs) => {
videojs = _videojs.default
Promise.all([
import('../css/style.css'),
// eslint-disable-next-line import/no-webpack-loader-syntax
import('video.js/dist/video-js.css'),
]).then(() => {
videoViewer.UI.show()
})
})
},
hidePlayer() {
if (videoViewer.player !== null && videoViewer.player !== false && videoViewer.inline === null) {
videoViewer.player.dispose()
videoViewer.player = false
videoViewer.UI.hide()
}
},
log(message) {
// eslint-disable-next-line no-console
console.log(message)
},
}

document.addEventListener('DOMContentLoaded', function() {

// add event to ESC key
document.addEventListener('keyup', function(e) {
if ((e.key !== undefined && e.key === 'Escape')
|| (e.keyCode !== undefined && e.keyCode === 27)) {
videoViewer.hidePlayer()
}
})

// Public page magic
if (document.getElementById('body-public') && document.getElementById('imgframe')) {
const mimetype = document.getElementById('mimetype').value
for (let j = 0; j < videoViewer.mimeTypes.length; ++j) {
if (videoViewer.mimeTypes[j] === mimetype) {
const videoUrl = window.location.href.split('?')[0] + '/download'
videoViewer.onViewInline(document.getElementById('imgframe'), videoUrl, mimetype)
break
}
}
}

})
Loading