2017-07-23 14:49:52 +02:00
|
|
|
import './embed.scss'
|
|
|
|
|
2017-12-11 17:36:46 +01:00
|
|
|
import * as videojs from 'video.js'
|
2018-01-10 17:18:12 +01:00
|
|
|
import 'videojs-hotkeys'
|
2017-10-06 10:40:09 +02:00
|
|
|
import '../../assets/player/peertube-videojs-plugin'
|
2017-07-23 14:49:52 +02:00
|
|
|
import 'videojs-dock/dist/videojs-dock.es.js'
|
2017-10-25 16:43:19 +02:00
|
|
|
import { VideoDetails } from '../../../../shared'
|
2017-07-23 14:49:52 +02:00
|
|
|
|
2018-02-14 16:02:16 +01:00
|
|
|
async function loadVideoInfo (videoId: string): Promise<VideoDetails> {
|
2018-02-14 11:02:51 +01:00
|
|
|
const response = await fetch(window.location.origin + '/api/v1/videos/' + videoId)
|
2018-02-14 16:02:16 +01:00
|
|
|
return response.json()
|
2017-07-23 14:49:52 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
const urlParts = window.location.href.split('/')
|
|
|
|
const videoId = urlParts[urlParts.length - 1]
|
|
|
|
|
2018-02-14 11:02:51 +01:00
|
|
|
loadVideoInfo(videoId)
|
|
|
|
.then(videoInfo => {
|
|
|
|
const videoElement = document.getElementById('video-container') as HTMLVideoElement
|
|
|
|
const previewUrl = window.location.origin + videoInfo.previewPath
|
|
|
|
videoElement.poster = previewUrl
|
|
|
|
|
|
|
|
const videojsOptions = {
|
|
|
|
controls: true,
|
|
|
|
autoplay: false,
|
|
|
|
plugins: {
|
|
|
|
peertube: {
|
|
|
|
videoFiles: videoInfo.files,
|
|
|
|
playerElement: videoElement,
|
|
|
|
peerTubeLink: true
|
|
|
|
},
|
|
|
|
hotkeys: {
|
|
|
|
enableVolumeScroll: false
|
|
|
|
}
|
2018-01-09 16:30:39 +01:00
|
|
|
}
|
2017-10-06 10:40:09 +02:00
|
|
|
}
|
2018-02-14 11:02:51 +01:00
|
|
|
videojs('video-container', videojsOptions, function () {
|
|
|
|
const player = this
|
2017-07-23 14:49:52 +02:00
|
|
|
|
2018-02-14 11:02:51 +01:00
|
|
|
player.dock({
|
|
|
|
title: videoInfo.name
|
|
|
|
})
|
2017-07-23 14:49:52 +02:00
|
|
|
})
|
|
|
|
})
|
2018-02-14 16:02:16 +01:00
|
|
|
.catch(err => console.error(err))
|