aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
authorChocobozzz <me@florianbigard.com>2018-04-19 18:06:59 +0200
committerChocobozzz <me@florianbigard.com>2018-04-19 18:06:59 +0200
commitd4f3fea659163749f9ea879a5e1dd313106353c6 (patch)
tree354cc82693d16cdbd2c033e99109a49470ef565a
parent76434ec8e3877a62eae5bb1c26a26d2a2d619a51 (diff)
downloadPeerTube-d4f3fea659163749f9ea879a5e1dd313106353c6.tar.gz
PeerTube-d4f3fea659163749f9ea879a5e1dd313106353c6.tar.zst
PeerTube-d4f3fea659163749f9ea879a5e1dd313106353c6.zip
Handle errors in embed
-rw-r--r--client/src/standalone/videos/embed.html6
-rw-r--r--client/src/standalone/videos/embed.scss45
-rw-r--r--client/src/standalone/videos/embed.ts44
3 files changed, 90 insertions, 5 deletions
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 @@
11 11
12 <body> 12 <body>
13 13
14 <div id="error-block">
15 <h1 id="error-title">Sorry</h1>
16
17 <div id="error-content"></div>
18 </div>
19
14 <video id="video-container" class="video-js vjs-peertube-skin"> 20 <video id="video-container" class="video-js vjs-peertube-skin">
15 </video> 21 </video>
16 22
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 @@
4@import '~videojs-dock/dist/videojs-dock.css'; 4@import '~videojs-dock/dist/videojs-dock.css';
5@import '../../sass/video-js-custom.scss'; 5@import '../../sass/video-js-custom.scss';
6 6
7[hidden] {
8 display: none !important;
9}
10
11body {
12 font-family: $main-fonts;
13 font-weight: $font-regular;
14 color: #000;
15}
16
7video { 17video {
8 width: 99%; 18 width: 99%;
9} 19}
@@ -43,3 +53,38 @@ html, body {
43 } 53 }
44 } 54 }
45} 55}
56
57#error-block {
58 display: none;
59
60 flex-direction: column;
61 align-content: center;
62 justify-content: center;
63 text-align: center;
64 background-color: #141313;
65 width: 100%;
66 height: 100%;
67 color: white;
68 box-sizing: border-box;
69 font-family: sans-serif;
70
71 #error-title {
72 font-size: 45px;
73 margin-bottom: 5px;
74 }
75
76 #error-content {
77 font-size: 24px;
78 }
79}
80
81@media screen and (max-width: 300px) {
82 #error-block {
83 font-size: 36px;
84
85 #error-content {
86 font-size: 14px;
87 }
88 }
89}
90
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) {
9 return window.location.origin + '/api/v1/videos/' + id 9 return window.location.origin + '/api/v1/videos/' + id
10} 10}
11 11
12async function loadVideoInfo (videoId: string): Promise<VideoDetails> { 12function loadVideoInfo (videoId: string): Promise<Response> {
13 const response = await fetch(getVideoUrl(videoId)) 13 return fetch(getVideoUrl(videoId))
14 return response.json() 14}
15
16function removeElement (element: HTMLElement) {
17 element.parentElement.removeChild(element)
18}
19
20function displayError (videoElement: HTMLVideoElement, text: string) {
21 // Remove video element
22 removeElement(videoElement)
23
24 document.title = 'Sorry - ' + text
25
26 const errorBlock = document.getElementById('error-block')
27 errorBlock.style.display = 'flex'
28
29 const errorText = document.getElementById('error-content')
30 errorText.innerHTML = text
31}
32
33function videoNotFound (videoElement: HTMLVideoElement) {
34 const text = 'This video does not exist.'
35 displayError(videoElement, text)
36}
37
38function videoFetchError (videoElement: HTMLVideoElement) {
39 const text = 'We cannot fetch the video. Please try again later.'
40 displayError(videoElement, text)
15} 41}
16 42
17const urlParts = window.location.href.split('/') 43const urlParts = window.location.href.split('/')
18const videoId = urlParts[urlParts.length - 1] 44const videoId = urlParts[urlParts.length - 1]
19 45
20loadVideoInfo(videoId) 46loadVideoInfo(videoId)
21 .then(videoInfo => { 47 .then(async response => {
22 const videoContainerId = 'video-container' 48 const videoContainerId = 'video-container'
23
24 const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement 49 const videoElement = document.getElementById(videoContainerId) as HTMLVideoElement
50
51 if (!response.ok) {
52 if (response.status === 404) return videoNotFound(videoElement)
53
54 return videoFetchError(videoElement)
55 }
56
57 const videoInfo: VideoDetails = await response.json()
58
25 let autoplay = false 59 let autoplay = false
26 let startTime = 0 60 let startTime = 0
27 61