@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%;
}
}
}
}
+
+#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;
+ }
+ }
+}
+
return window.location.origin + '/api/v1/videos/' + id
}
-async function loadVideoInfo (videoId: string): Promise<VideoDetails> {
- const response = await fetch(getVideoUrl(videoId))
- return response.json()
+function loadVideoInfo (videoId: string): Promise<Response> {
+ 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
projects / oweals / peertube.git / commitdiff