aboutsummaryrefslogtreecommitdiffhomepage
path: root/client/src/standalone/videos/embed.html
diff options
context:
space:
mode:
authorChocobozzz <florian.bigard@gmail.com>2017-07-23 14:49:52 +0200
committerChocobozzz <florian.bigard@gmail.com>2017-07-23 15:10:57 +0200
commit202e72231750705b1a071d57206424eef1fc5be1 (patch)
treeaf19fc202d51764132d59cd0e99874c7de356f50 /client/src/standalone/videos/embed.html
parent0c31c33dcb0baaa8d3aeedb63336dfe2ae6e5585 (diff)
downloadPeerTube-202e72231750705b1a071d57206424eef1fc5be1.tar.gz
PeerTube-202e72231750705b1a071d57206424eef1fc5be1.tar.zst
PeerTube-202e72231750705b1a071d57206424eef1fc5be1.zip
Process embed in webpack too
Diffstat (limited to 'client/src/standalone/videos/embed.html')
-rw-r--r--client/src/standalone/videos/embed.html135
1 files changed, 2 insertions, 133 deletions
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 @@
7 <meta name="viewport" content="width=device-width, initial-scale=1"> 7 <meta name="viewport" content="width=device-width, initial-scale=1">
8 8
9 <link rel="icon" type="image/png" href="/client/assets/favicon.png" /> 9 <link rel="icon" type="image/png" href="/client/assets/favicon.png" />
10
11 <link rel="stylesheet" href="/client/assets/video-js/video-js.min.css">
12 <link rel="stylesheet" href="/client/assets/video-js/videojs-dock.css">
13
14 <script src="/client/assets/webtorrent/webtorrent.min.js"></script>
15 <script src="/client/assets/video-js/video.min.js"></script>
16 <script src="/client/assets/video-js/videojs-dock.min.js"></script>
17
18 <style>
19 video {
20 width: 99%;
21 }
22
23 /* fill the entire space */
24 html, body {
25 height: 100%;
26 margin: 0;
27 }
28
29 .video-js {
30 width: 100%;
31 height: 100%;
32 }
33
34 .vjs-poster {
35 background-size: 100% auto;
36 }
37
38 .vjs-peertube-link {
39 color: white;
40 text-decoration: none;
41 font-size: 1.3em;
42 line-height: 2.20;
43 transition: all .4s;
44 }
45
46 .vjs-peertube-link:hover {
47 text-shadow: 0 0 1em #fff;
48 }
49
50 </style>
51 </head> 10 </head>
52 11
53 <body> 12 <body>
54 13
55 <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered"> 14 <video id="video-container" class="video-js vjs-sublime-skin vjs-big-play-centered">
56 </video> 15 </video>
57
58
59 <script>
60 function loadVideoInfos (videoId, callback) {
61 var xhttp = new XMLHttpRequest()
62 xhttp.onreadystatechange = function () {
63 if (this.readyState === 4 && this.status === 200) {
64 var json = JSON.parse(this.responseText)
65 return callback(json)
66 }
67 }
68
69 var url = window.location.origin + '/api/v1/videos/' + videoId
70 xhttp.open('GET', url, true)
71 xhttp.send()
72 }
73
74 function loadVideoTorrent (magnetUri, player) {
75 console.log('Loading video ' + videoId)
76 var client = new window.WebTorrent()
77
78 console.log('Adding magnet ' + magnetUri)
79 client.add(magnetUri, function (torrent) {
80 var file = torrent.files[0]
81
82 file.renderTo('video', function (err) {
83 if (err) {
84 console.error(err)
85 return
86 }
87
88 // Hack to "simulate" src link in video.js >= 6
89 // If no, we can't play the video after pausing it
90 // https://github.com/videojs/video.js/blob/master/src/js/player.js#L1633
91 player.src = function () { return true }
92
93 player.play()
94 })
95 })
96 }
97
98 var urlParts = window.location.href.split('/')
99 var videoId = urlParts[urlParts.length - 1]
100
101 loadVideoInfos(videoId, function (videoInfos) {
102 var magnetUri = videoInfos.magnetUri
103 var videoContainer = document.getElementById('video-container')
104 var previewUrl = window.location.origin + videoInfos.previewPath
105 videoContainer.poster = previewUrl
106
107 videojs('video-container', { controls: true, autoplay: false }, function () {
108 var player = this
109
110 var Button = videojs.getComponent('Button')
111 var peertubeLinkButton = videojs.extend(Button, {
112 constructor: function () {
113 Button.apply(this, arguments)
114 },
115
116 createEl: function () {
117 var link = document.createElement('a')
118 link.href = window.location.href.replace('embed', 'watch')
119 link.innerHTML = 'PeerTube'
120 link.title = 'Go to the video page'
121 link.className = 'vjs-peertube-link'
122 link.target = '_blank'
123
124 return link
125 },
126
127 handleClick: function () {
128 player.pause()
129 }
130 })
131 videojs.registerComponent('PeerTubeLinkButton', peertubeLinkButton)
132
133 var controlBar = player.getChild('controlBar')
134 var addedLink = controlBar.addChild('PeerTubeLinkButton', {})
135 controlBar.el().insertBefore(addedLink.el(), controlBar.fullscreenToggle.el())
136
137 player.dock({
138 title: videoInfos.name
139 })
140
141 document.querySelector('.vjs-big-play-button').addEventListener('click', function () {
142 loadVideoTorrent(magnetUri, player)
143 }, false)
144 })
145 })
146 16
147 </script>
148 </body> 17 </body>
149</html 18</html