interesting
/
PeerTube
mirror of https://github.com/Chocobozzz/PeerTube.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Handle errors in embed

This commit is contained in:
Chocobozzz 2018-04-19 18:06:59 +02:00
parent 76434ec8e3
commit d4f3fea659
No known key found for this signature in database
GPG Key ID: 583A612D890159BE
3 changed files with 90 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/standalone/videos/embed.html
View File

@ -11,6 +11,12 @@
<body> <body>
<div id="error-block">
<h1 id="error-title">Sorry</h1>
<div id="error-content"></div>
</div>
<video id="video-container" class="video-js vjs-peertube-skin"> <video id="video-container" class="video-js vjs-peertube-skin">
</video> </video>

45
client/src/standalone/videos/embed.scss
View File

@ -4,6 +4,16 @@
@import '~videojs-dock/dist/videojs-dock.css'; @import '~videojs-dock/dist/videojs-dock.css';
@import '../../sass/video-js-custom.scss'; @import '../../sass/video-js-custom.scss';
[hidden] {
display: none !important;
}
body {
font-family: $main-fonts;
font-weight: $font-regular;
color: #000;
}
video { video {
width: 99%; width: 99%;
} }
@ -43,3 +53,38 @@ html, body {
} }
} }
} }
#error-block {
display: none;
flex-direction: column;
align-content: center;
justify-content: center;
text-align: center;
background-color: #141313;
width: 100%;
height: 100%;
color: white;
box-sizing: border-box;
font-family: sans-serif;
#error-title {
font-size: 45px;
margin-bottom: 5px;
}
#error-content {
font-size: 24px;
}
}
@media screen and (max-width: 300px) {
#error-block {
font-size: 36px;
#error-content {
font-size: 14px;
}
}
}

44
client/src/standalone/videos/embed.ts
View File

@ -9,19 +9,53 @@ function getVideoUrl (id: string) {
return window.location.origin + '/api/v1/videos/' + id return window.location.origin + '/api/v1/videos/' + id
} }
async function loadVideoInfo (videoId: string): Promise<VideoDetails> { function loadVideoInfo (videoId: string): Promise<Response> {
const response = await fetch(getVideoUrl(videoId)) return fetch(getVideoUrl(videoId))
return response.json() }
function removeElement (element: HTMLElement) {
element.parentElement.removeChild(element)
}
function displayError (videoElement: HTMLVideoElement, text: string) {
// Remove video element
removeElement(videoElement)
document.title = 'Sorry - ' + text
const errorBlock = document.getElementById('error-block')
errorBlock.style.display = 'flex'
const errorText = document.getElementById('error-content')
errorText.innerHTML = text
}
function videoNotFound (videoElement: HTMLVideoElement) {
const text = 'This video does not exist.'
displayError(videoElement, text)
}
function videoFetchError (videoElement: HTMLVideoElement) {
const text = 'We cannot fetch the video. Please try again later.'
displayError(videoElement, text)
} }
const urlParts = window.location.href.split('/') const urlParts = window.location.href.split('/')
const videoId = urlParts[urlParts.length - 1] const videoId = urlParts[urlParts.length - 1]
loadVideoInfo(videoId) loadVideoInfo(videoId)
.then(videoInfo => { .then(async response => {
const videoContainerId = 'video-container' const videoContainerId = 'video-container'
const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
if (!response.ok) {
if (response.status === 404) return videoNotFound(videoElement)
return videoFetchError(videoElement)
}
const videoInfo: VideoDetails = await response.json()
let autoplay = false let autoplay = false
let startTime = 0 let startTime = 0