Handle errors in embed

author: Chocobozzz <me@florianbigard.com> 2018-04-19 18:06:59 +0200
committer: Chocobozzz <me@florianbigard.com> 2018-04-19 18:06:59 +0200
commit: d4f3fea659163749f9ea879a5e1dd313106353c6 (patch)
tree: 354cc82693d16cdbd2c033e99109a49470ef565a /client/src
parent: 76434ec8e3877a62eae5bb1c26a26d2a2d619a51 (diff)
download: PeerTube-d4f3fea659163749f9ea879a5e1dd313106353c6.tar.gz
PeerTube-d4f3fea659163749f9ea879a5e1dd313106353c6.tar.zst
PeerTube-d4f3fea659163749f9ea879a5e1dd313106353c6.zip
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 @@
  <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>
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<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 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
author	Chocobozzz <me@florianbigard.com>	2018-04-19 18:06:59 +0200
committer	Chocobozzz <me@florianbigard.com>	2018-04-19 18:06:59 +0200
commit	d4f3fea659163749f9ea879a5e1dd313106353c6 (patch)
tree	354cc82693d16cdbd2c033e99109a49470ef565a /client/src
parent	76434ec8e3877a62eae5bb1c26a26d2a2d619a51 (diff)
download	PeerTube-d4f3fea659163749f9ea879a5e1dd313106353c6.tar.gz PeerTube-d4f3fea659163749f9ea879a5e1dd313106353c6.tar.zst PeerTube-d4f3fea659163749f9ea879a5e1dd313106353c6.zip

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
		11	body {
		12	font-family: $main-fonts;
		13	font-weight: $font-regular;
		14	color: #000;
		15	}
		16
7	video {	17	video {
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
12	async function loadVideoInfo (videoId: string): Promise<VideoDetails> {	12	function loadVideoInfo (videoId: string): Promise<Response> {
13	const response = await fetch(getVideoUrl(videoId))	13	return fetch(getVideoUrl(videoId))
14	return response.json()	14	}
		15
		16	function removeElement (element: HTMLElement) {
		17	element.parentElement.removeChild(element)
		18	}
		19
		20	function 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
		33	function videoNotFound (videoElement: HTMLVideoElement) {
		34	const text = 'This video does not exist.'
		35	displayError(videoElement, text)
		36	}
		37
		38	function videoFetchError (videoElement: HTMLVideoElement) {
		39	const text = 'We cannot fetch the video. Please try again later.'
		40	displayError(videoElement, text)
15	}	41	}
16		42
17	const urlParts = window.location.href.split('/')	43	const urlParts = window.location.href.split('/')
18	const videoId = urlParts[urlParts.length - 1]	44	const videoId = urlParts[urlParts.length - 1]
19		45
20	loadVideoInfo(videoId)	46	loadVideoInfo(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