Torrent Viewer: support fullscreen

app/extensions.js

@@ -162,6 +162,7 @@ let generateBraveManifest = () => {
 let generateTorrentManifest = () => {
   let cspDirectives = {
     'default-src': '\'self\'',
+    'media-src': '\'self\' http://localhost:*',
     'frame-src': 'http://localhost:*',
     'form-action': '\'none\'',
     'referrer': 'no-referrer',

app/filtering.js

@@ -358,6 +358,13 @@ function registerPermissionHandler (session, partition) {
       return
     }
 
+    // The Torrent Viewer extension is always allowed to show fullscreen media
+    if (permission === 'fullscreen' &&
+      origin.startsWith('chrome-extension://' + config.torrentExtensionId)) {
+      cb(true)
+      return
+    }
+
     // The Brave extension and PDFJS are always allowed to open files in an external app
     if (permission === 'openExternal' && (
       origin.startsWith('chrome-extension://' + config.PDFJSExtensionId) ||

js/webtorrent/components/mediaViewer.js

@@ -1,15 +1,54 @@
 const React = require('react')
 
-class MediaViewer extends React.Component {
+const SUPPORTED_VIDEO_EXTENSIONS = [
+  'm4v',
+  'mkv',
+  'mov',
+  'mp4',
+  'ogv',
+  'webm'
+]
+
+const SUPPORTED_AUDIO_EXTENSIONS = [
+  'aac',
+  'mp3',
+  'ogg',
+  'wav',
+  'm4a'
+]
+
+module.exports = class MediaViewer extends React.Component {
   render () {
     const torrent = this.props.torrent
     const ix = this.props.ix
+    const file = torrent.files[ix]
+    const fileExt = file && getExtension(file.name)
+    const isVideo = SUPPORTED_VIDEO_EXTENSIONS.includes(fileExt)
+    const isAudio = SUPPORTED_AUDIO_EXTENSIONS.includes(fileExt)
 
     let content
-    if (torrent.serverURL != null) {
-      content = <iframe src={torrent.serverURL + '/' + ix} sandbox='allow-same-origin' />
-    } else {
+    if (torrent.serverURL == null) {
       content = <div data-l10n-id='torrentLoadingMedia' />
+    } else if (isVideo) {
+      content = (
+        <video
+          src={torrent.serverURL + '/' + ix}
+          autoplay='true'
+          controls='true' />
+      )
+    } else if (isAudio) {
+      content = (
+        <audio
+          src={torrent.serverURL + '/' + ix}
+          autoplay='true'
+          controls='true' />
+      )
+    } else {
+      content = (
+        <iframe
+          src={torrent.serverURL + '/' + ix}
+          sandbox='allow-same-origin' />
+      )
     }
 
     return (
@@ -20,4 +59,11 @@ class MediaViewer extends React.Component {
   }
 }
 
-module.exports = MediaViewer
+// Given 'foo.txt', returns 'txt'
+// Given eg. null, undefined, '', or 'README', returns null
+function getExtension (filename) {
+  if (!filename) return null
+  const ix = filename.lastIndexOf('.')
+  if (ix < 0) return null
+  return filename.substring(ix + 1)
+}

less/webtorrent.less

@@ -99,7 +99,9 @@ html,
   height: 100%;
 }
 
-iframe {
+iframe,
+video,
+audio {
   border: 0;
   width: 100%;
   height: 100%;