client/src/standalone/videos/embed.html

   1 <!DOCTYPE html>
   2 <html>
   3   <head>
   4     <title>PeerTube</title>
   5
   6     <meta charset="UTF-8">
   7     <meta name="viewport" content="width=device-width, initial-scale=1">
   8
   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>
  52
  53   <body>
  54
  55   <video id="video-container" class="video-js vjs-default-skin vjs-big-play-centered">
  56   </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.protocol + '//' + videoInfos.podHost + 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
 147   </script>
 148   </body>
 149 </html