From d4f3fea659163749f9ea879a5e1dd313106353c6 Mon Sep 17 00:00:00 2001 From: Chocobozzz Date: Thu, 19 Apr 2018 18:06:59 +0200 Subject: Handle errors in embed --- client/src/standalone/videos/embed.html | 6 +++++ client/src/standalone/videos/embed.scss | 45 +++++++++++++++++++++++++++++++++ client/src/standalone/videos/embed.ts | 44 ++++++++++++++++++++++++++++---- 3 files changed, 90 insertions(+), 5 deletions(-) (limited to 'client/src/standalone') diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html index a359255da..b60b03a22 100644 --- a/client/src/standalone/videos/embed.html +++ b/client/src/standalone/videos/embed.html @@ -11,6 +11,12 @@ +

Sorry

+ +

diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss index fc7135d64..37c1df6c4 100644 --- a/client/src/standalone/videos/embed.scss +++ b/client/src/standalone/videos/embed.scss @@ -4,6 +4,16 @@ @import '~videojs-dock/dist/videojs-dock.css'; @import '../../sass/video-js-custom.scss'; +[hidden] { + display: none !important; +} + +body { + font-family: $main-fonts; + font-weight: $font-regular; + color: #000; +} + video { 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; + } + } +} + diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts index a99bc586f..aa418d2d4 100644 --- a/client/src/standalone/videos/embed.ts +++ b/client/src/standalone/videos/embed.ts @@ -9,19 +9,53 @@ function getVideoUrl (id: string) { return window.location.origin + '/api/v1/videos/' + id } -async function loadVideoInfo (videoId: string): Promise { - const response = await fetch(getVideoUrl(videoId)) - return response.json() +function loadVideoInfo (videoId: string): Promise { + return fetch(getVideoUrl(videoId)) +} + +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 videoId = urlParts[urlParts.length - 1] loadVideoInfo(videoId) - .then(videoInfo => { + .then(async response => { const videoContainerId = 'video-container' - 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 startTime = 0 -- cgit v1.2.3