Merge pull request #3005 from brave/webtorrent-fit

WebTorrent: Fit video/audio media to window size
brave · Jul 25, 2019 · fa0b05c · fa0b05c
2 parents 553d4af + 8c37d40
commit fa0b05c
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 12 deletions.
diff --git a/components/brave_webtorrent/extension/components/mediaViewer.tsx b/components/brave_webtorrent/extension/components/mediaViewer.tsx
@@ -5,7 +5,7 @@
 import * as React from 'react'
 
 // Constants
-import { TorrentObj } from '../constants/webtorrentState'
+import { TorrentObj, File } from '../constants/webtorrentState'
 
 const SUPPORTED_VIDEO_EXTENSIONS = ['m4v', 'mkv', 'mov', 'mp4', 'ogv', 'webm']
 
@@ -20,6 +20,26 @@ const getExtension = (filename: string) => {
   return filename.substring(ix + 1)
 }
 
+const getSelectedFile = (torrent: TorrentObj, ix: number) => {
+  return torrent.files
+    ? torrent.files[ix]
+    : null
+}
+
+const fileIsVideo = (file: File | null) => {
+  if (!file) return false
+  const fileExt = getExtension(file.name)
+  if (!fileExt) return false
+  return SUPPORTED_VIDEO_EXTENSIONS.includes(fileExt)
+}
+
+const fileIsAudio = (file: File | null) => {
+  if (!file) return false
+  const fileExt = getExtension(file.name)
+  if (!fileExt) return false
+  return SUPPORTED_AUDIO_EXTENSIONS.includes(fileExt)
+}
+
 interface Props {
   torrent: TorrentObj
   ix: number
@@ -31,22 +51,32 @@ export default class MediaViewer extends React.PureComponent<Props, {}> {
     elem.play().catch(err => console.error('Autoplay failed', err))
   }
 
+  componentWillReceiveProps () {
+    // Set page background to black when video or audio is being viewed
+    const { torrent, ix } = this.props
+    const file = getSelectedFile(torrent, ix)
+    const isMedia = fileIsAudio(file) || fileIsVideo(file)
+    if (isMedia) {
+      document.body.style.backgroundColor = 'rgb(0, 0, 0)'
+    } else {
+      document.body.style.backgroundColor = null
+    }
+  }
+
+  componentWillUnmount () {
+    document.body.style.backgroundColor = null
+  }
+
   render () {
     const { torrent, ix } = this.props
 
-    const file = torrent.files ? torrent.files[ix] : undefined
+    const file = getSelectedFile(torrent, ix)
+    const isAudio = fileIsAudio(file)
+    const isVideo = fileIsVideo(file)
     const fileURL = torrent.serverURL && torrent.serverURL + '/' + ix
 
-    const fileExt = file && getExtension(file.name)
-    const isVideo = fileExt
-      ? SUPPORTED_VIDEO_EXTENSIONS.includes(fileExt)
-      : false
-    const isAudio = fileExt
-      ? SUPPORTED_AUDIO_EXTENSIONS.includes(fileExt)
-      : false
-
     let content
-    if (!file || !torrent.serverURL) {
+    if (!file || !fileURL) {
       content = <div className='loading'>Loading Media</div>
     } else if (isVideo) {
       content = (

diff --git a/components/styles/webtorrent.css b/components/styles/webtorrent.css
@@ -1,4 +1,5 @@
-body {
+#root {
+  min-height: 100%;
   padding: 100px;
   font-family: Muli, sans-serif;
 }
@@ -71,3 +72,14 @@ a {
   height: 32px;
   margin: 0 0 18px;
 }
+
+#video, #audio {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  bottom: 0px;
+  left: 0px;
+  max-height: 100%;
+  max-width: 100%;
+  margin: auto;
+}