From 202e72231750705b1a071d57206424eef1fc5be1 Mon Sep 17 00:00:00 2001
From: Chocobozzz <florian.bigard@gmail.com>
Date: Sun, 23 Jul 2017 14:49:52 +0200
Subject: Process embed in webpack too
---
client/src/standalone/videos/embed.html | 135 +-------------------------------
client/src/standalone/videos/embed.scss | 41 ++++++++++
client/src/standalone/videos/embed.ts | 103 ++++++++++++++++++++++++
3 files changed, 146 insertions(+), 133 deletions(-)
create mode 100644 client/src/standalone/videos/embed.scss
create mode 100644 client/src/standalone/videos/embed.ts
(limited to 'client/src')
diff --git a/client/src/standalone/videos/embed.html b/client/src/standalone/videos/embed.html
index f72080937..627acb5af 100644
--- a/client/src/standalone/videos/embed.html
+++ b/client/src/standalone/videos/embed.html
@@ -7,143 +7,12 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/png" href="/client/assets/favicon.png" />
-
- <link rel="stylesheet" href="/client/assets/video-js/video-js.min.css">
- <link rel="stylesheet" href="/client/assets/video-js/videojs-dock.css">
-
- <script src="/client/assets/webtorrent/webtorrent.min.js"></script>
- <script src="/client/assets/video-js/video.min.js"></script>
- <script src="/client/assets/video-js/videojs-dock.min.js"></script>
-
- <style>
- video {
- width: 99%;
- }
-
- /* fill the entire space */
- html, body {
- height: 100%;
- margin: 0;
- }
-
- .video-js {
- width: 100%;
- height: 100%;
- }
-
- .vjs-poster {
- background-size: 100% auto;
- }
-
- .vjs-peertube-link {
- color: white;
- text-decoration: none;
- font-size: 1.3em;
- line-height: 2.20;
- transition: all .4s;
- }
-
- .vjs-peertube-link:hover {
- text-shadow: 0 0 1em #fff;
- }
-
- </style>
</head>
<body>
- <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered">
- </video>
-
-
- <script>
- function loadVideoInfos (videoId, callback) {
- var xhttp = new XMLHttpRequest()
- xhttp.onreadystatechange = function () {
- if (this.readyState === 4 && this.status === 200) {
- var json = JSON.parse(this.responseText)
- return callback(json)
- }
- }
-
- var url = window.location.origin + '/api/v1/videos/' + videoId
- xhttp.open('GET', url, true)
- xhttp.send()
- }
-
- function loadVideoTorrent (magnetUri, player) {
- console.log('Loading video ' + videoId)
- var client = new window.WebTorrent()
-
- console.log('Adding magnet ' + magnetUri)
- client.add(magnetUri, function (torrent) {
- var file = torrent.files[0]
-
- file.renderTo('video', function (err) {
- if (err) {
- console.error(err)
- return
- }
-
- // Hack to "simulate" src link in video.js >= 6
- // If no, we can't play the video after pausing it
- // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
- player.src = function () { return true }
-
- player.play()
- })
- })
- }
-
- var urlParts = window.location.href.split('/')
- var videoId = urlParts[urlParts.length - 1]
-
- loadVideoInfos(videoId, function (videoInfos) {
- var magnetUri = videoInfos.magnetUri
- var videoContainer = document.getElementById('video-container')
- var previewUrl = window.location.origin + videoInfos.previewPath
- videoContainer.poster = previewUrl
-
- videojs('video-container', { controls: true, autoplay: false }, function () {
- var player = this
-
- var Button = videojs.getComponent('Button')
- var peertubeLinkButton = videojs.extend(Button, {
- constructor: function () {
- Button.apply(this, arguments)
- },
-
- createEl: function () {
- var link = document.createElement('a')
- link.href = window.location.href.replace('embed', 'watch')
- link.innerHTML = 'PeerTube'
- link.title = 'Go to the video page'
- link.className = 'vjs-peertube-link'
- link.target = '_blank'
-
- return link
- },
-
- handleClick: function () {
- player.pause()
- }
- })
- videojs.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
-
- var controlBar = player.getChild('controlBar')
- var addedLink = controlBar.addChild('PeerTubeLinkButton', {})
- controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
-
- player.dock({
- title: videoInfos.name
- })
-
- document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
- loadVideoTorrent(magnetUri, player)
- }, false)
- })
- })
+ <video id="video-container" class="video-js vjs-sublime-skin vjs-big-play-centered">
+ </video>
- </script>
</body>
</html
diff --git a/client/src/standalone/videos/embed.scss b/client/src/standalone/videos/embed.scss
new file mode 100644
index 000000000..a4c44a59b
--- /dev/null
+++ b/client/src/standalone/videos/embed.scss
@@ -0,0 +1,41 @@
+@import '~video.js/dist/video-js.css';
+@import '~videojs-dock/dist/videojs-dock.css';
+@import '../../sass/video-js-custom.scss';
+
+video {
+ width: 99%;
+}
+
+/* fill the entire space */
+html, body {
+ height: 100%;
+ margin: 0;
+}
+
+.video-js {
+ width: 100%;
+ height: 100%;
+}
+
+.vjs-poster {
+ background-size: 100% auto;
+}
+
+.vjs-peertube-link {
+ color: white;
+ text-decoration: none;
+ font-size: 1.3em;
+ line-height: 2.20;
+ transition: all .4s;
+ position: relative;
+ right: 6px;
+}
+
+.vjs-peertube-link:hover {
+ text-shadow: 0 0 1em #fff;
+}
+
+// Fix volume panel because we added a new component (PeerTube link)
+.vjs-volume-panel {
+ margin-right: 90px !important;
+}
diff --git a/client/src/standalone/videos/embed.ts b/client/src/standalone/videos/embed.ts
new file mode 100644
index 000000000..64a0f0798
--- /dev/null
+++ b/client/src/standalone/videos/embed.ts
@@ -0,0 +1,103 @@
+import './embed.scss'
+
+import videojs from 'video.js'
+import 'videojs-dock/dist/videojs-dock.es.js'
+import * as WebTorrent from 'webtorrent'
+import { Video } from '../../../../shared'
+
+// videojs typings don't have some method we need
+const videojsUntyped = videojs as any
+
+function loadVideoInfos (videoId: string, callback: (err: Error, res?: Video) => void) {
+ const xhttp = new XMLHttpRequest()
+ xhttp.onreadystatechange = function () {
+ if (this.readyState === 4 && this.status === 200) {
+ const json = JSON.parse(this.responseText)
+ return callback(null, json)
+ }
+ }
+
+ xhttp.onerror = err => callback(err.error)
+
+ const url = window.location.origin + '/api/v1/videos/' + videoId
+ xhttp.open('GET', url, true)
+ xhttp.send()
+}
+
+function loadVideoTorrent (magnetUri: string, player: videojs.Player) {
+ console.log('Loading video ' + videoId)
+ const client = new WebTorrent()
+
+ console.log('Adding magnet ' + magnetUri)
+ client.add(magnetUri, torrent => {
+ const file = torrent.files[0]
+
+ file.renderTo('video', err => {
+ if (err) {
+ console.error(err)
+ return
+ }
+
+ // Hack to "simulate" src link in video.js >= 6
+ // If no, we can't play the video after pausing it
+ // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
+ (player as any).src = () => true
+
+ player.play()
+ })
+ })
+}
+
+const urlParts = window.location.href.split('/')
+const videoId = urlParts[urlParts.length - 1]
+
+loadVideoInfos(videoId, (err, videoInfos) => {
+ if (err) {
+ console.error(err)
+ return
+ }
+
+ const magnetUri = videoInfos.magnetUri
+ const videoContainer = document.getElementById('video-container') as HTMLVideoElement
+ const previewUrl = window.location.origin + videoInfos.previewPath
+ videoContainer.poster = previewUrl
+
+ videojs('video-container', { controls: true, autoplay: false }, function () {
+ const player = this
+
+ const Button = videojsUntyped.getComponent('Button')
+ const peertubeLinkButton = videojsUntyped.extend(Button, {
+ constructor: function () {
+ Button.apply(this, arguments)
+ },
+
+ createEl: function () {
+ const link = document.createElement('a')
+ link.href = window.location.href.replace('embed', 'watch')
+ link.innerHTML = 'PeerTube'
+ link.title = 'Go to the video page'
+ link.className = 'vjs-peertube-link'
+ link.target = '_blank'
+
+ return link
+ },
+
+ handleClick: function () {
+ player.pause()
+ }
+ })
+ videojsUntyped.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
+
+ const controlBar = player.getChild('controlBar')
+ const addedLink = controlBar.addChild('PeerTubeLinkButton', {})
+ controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
+
+ player.dock({
+ title: videoInfos.name
+ })
+
+ document.querySelector('.vjs-big-play-button').addEventListener('click', () => {
+ loadVideoTorrent(magnetUri, player)
+ }, false)
+ })
+})
--
cgit v1.2.3