From 03c2ed12205239fdc30c2aded17ec3c9bff44f4e Mon Sep 17 00:00:00 2001
From: Genar Trias Ortiz <genar@acs.li>
Date: Sat, 19 Dec 2020 01:24:00 +0100
Subject: [PATCH 1/2] changes for torrent files

---
 src/components/AddMediaModal/index.tsx        |  9 ++++++++-
 .../Player/CustomPlayers/WebtorrentPlayer.tsx | 20 ++++++++++---------
 src/components/Player/PlayerControls.tsx      |  6 ++++++
 src/containers/LayoutContainer.tsx            | 16 ++++++++++++++-
 src/entities/Media.ts                         |  4 ++++
 src/sagas/player/index.ts                     |  8 ++++++--
 src/sagas/webtorrent/workers.ts               | 10 +++++++---
 src/services/MediaSessionService.ts           |  6 +++---
 src/services/Webtorrent/index.ts              | 17 ++++++++++++----
 src/services/database/PouchdbAdapter.ts       |  5 +++--
 10 files changed, 76 insertions(+), 25 deletions(-)

diff --git a/src/components/AddMediaModal/index.tsx b/src/components/AddMediaModal/index.tsx
index 17903044..33a0b4c9 100644
--- a/src/components/AddMediaModal/index.tsx
+++ b/src/components/AddMediaModal/index.tsx
@@ -14,6 +14,7 @@ type Props = {
 
 const AddMediaModal = (props: Props) => {
   const [magnetLink, setMagnetLink] = React.useState('')
+  const [torrent, setTorrent] = React.useState<File>()
   const [youtubeLink, setYoutubeLink] = React.useState('')
   const [ipfsHash, setIpfsHash] = React.useState('')
 
@@ -36,11 +37,17 @@ const AddMediaModal = (props: Props) => {
           value={magnetLink}
           onChange={(event) => setMagnetLink(event.target.value)}
         />
+        <input type="file" name="file" onChange={(event) => event.target.files && setTorrent(event.target.files[0])}/>
         <Button
           fullWidth
           type='submit'
           onClick={() => {
-            props.dispatch({type: types.ADD_WEBTORRENT_MEDIA, magnet: magnetLink})
+            if (magnetLink !== '') {
+              props.dispatch({type: types.ADD_WEBTORRENT_MEDIA, magnet: magnetLink})
+            }
+            if (torrent) {
+              props.dispatch({type: types.ADD_WEBTORRENT_MEDIA, torrent: torrent})
+            }
             props.dispatch({type: types.HIDE_ADD_MEDIA_MODAL})
           }}
         >
diff --git a/src/components/Player/CustomPlayers/WebtorrentPlayer.tsx b/src/components/Player/CustomPlayers/WebtorrentPlayer.tsx
index 1305a87b..7c202568 100644
--- a/src/components/Player/CustomPlayers/WebtorrentPlayer.tsx
+++ b/src/components/Player/CustomPlayers/WebtorrentPlayer.tsx
@@ -14,7 +14,8 @@ const announceList = [
   ['wss://tracker.fastcast.nz']
 ]
 
-function canPlay (url: string) {
+function canPlay (url: string|File) {
+  console.log('type of url: ', typeof url)
   return typeof url === 'string' && url.startsWith('magnet:')
 }
 
@@ -76,15 +77,15 @@ export class TorrentPlayer extends React.Component<ReactPlayerProps> {
   }
 
   onSeek = (e: any) => {
-      if (this.props.onSeek == undefined) return;
-      this.props.onSeek(e.target.currentTime)
+    if (this.props.onSeek === undefined) return;
+    this.props.onSeek(e.target.currentTime)
   }
 
   play () {
-      const promise = this.player.play()
-      if (promise) {
-        promise.catch(this.props.onError)
-      }
+    const promise = this.player.play()
+    if (promise) {
+      promise.catch(this.props.onError)
+    }
   }
 
   pause () {
@@ -150,7 +151,7 @@ export class TorrentPlayer extends React.Component<ReactPlayerProps> {
   }
 
   getSource (url: any) {
-    if (typeof url !== 'string' && url.length < 10) return
+    // if (typeof url !== 'string' && url.length < 10) return
 
     const { player } = this
 
@@ -158,7 +159,8 @@ export class TorrentPlayer extends React.Component<ReactPlayerProps> {
       announce: announceList
     }, (torrent: any) => {
       const file = torrent.files.find((file: any) => {
-          return file.name.endsWith('.mp4')
+        // FIXME: Add other file extensions
+        return file.name.endsWith('.mp4')
       })
 
       if (file === undefined) return
diff --git a/src/components/Player/PlayerControls.tsx b/src/components/Player/PlayerControls.tsx
index 320bf476..24f5d057 100644
--- a/src/components/Player/PlayerControls.tsx
+++ b/src/components/Player/PlayerControls.tsx
@@ -101,6 +101,7 @@ class PlayerControls extends React.Component<Props> {
   }
 
   onError = (e: Error) => {
+    logger.log(e.message)
     this.props.dispatch({type: types.PLAY_ERROR, error: e})
   }
 
@@ -121,6 +122,9 @@ class PlayerControls extends React.Component<Props> {
 
     const currentPlayingId = this.props.queue.currentPlaying
     const currentPlaying = this.props.collection.rows[currentPlayingId]
+
+    // FIXME: Here I need to receive the torrent attachment but it's not
+    // available in redux
     const { streamUri } = this.props.player
 
     const handlers = (
@@ -154,6 +158,8 @@ class PlayerControls extends React.Component<Props> {
       .pathname
       .match(new RegExp(`/song/${currentPlayingId}`))
 
+    console.log(currentPlaying._attachments)
+
     return (
       <React.Fragment>
         { handlers }
diff --git a/src/containers/LayoutContainer.tsx b/src/containers/LayoutContainer.tsx
index 933b98e3..4ae203b1 100644
--- a/src/containers/LayoutContainer.tsx
+++ b/src/containers/LayoutContainer.tsx
@@ -7,7 +7,21 @@ import SearchButton from '../components/Buttons/SearchButton'
 import Placeholder from '../components/Player/Placeholder'
 import Icon from '../components/common/Icon'
 
-const dynamicTitle = (router, collection, searchTerm: ''): string | React.ReactNode => {
+type TitleRouter = {
+  location: {
+    pathname: string
+  }
+}
+
+type TitleCollection = {
+  rows: any
+}
+
+const dynamicTitle = (
+  router: TitleRouter,
+  collection: TitleCollection,
+  searchTerm: ''
+): string | React.ReactNode => {
   const songFinder = router.location.pathname.match(/\/song\/(.*)/)
   const artistFinder = router.location.pathname.match(/\/artist\/(.*)/)
   const albumFinder = router.location.pathname.match(/\/album\/(.*)/)
diff --git a/src/entities/Media.ts b/src/entities/Media.ts
index 83690455..867a16a8 100644
--- a/src/entities/Media.ts
+++ b/src/entities/Media.ts
@@ -30,6 +30,7 @@ export default class Media {
   artistName: string
   duration: number
   externalId: string
+  _attachments: any
   stream: Array<stream>
   playCount: number
   genre: string
@@ -48,6 +49,7 @@ export default class Media {
       artistName,
       artistId,
       albumId,
+      _attachments,
       albumName,
       duration,
       genre,
@@ -69,6 +71,7 @@ export default class Media {
     this.forcedId = forcedId
     this.albumName = albumName
     this.filePath = filePath
+    this._attachments = _attachments
 
     this.album = new Album({
       albumId: albumId,
@@ -218,6 +221,7 @@ export default class Media {
       filePath: this.filePath,
       media_type: this.media_type,
       duration: this.duration,
+      _attachments: this._attachments
     }
   }
 
diff --git a/src/sagas/player/index.ts b/src/sagas/player/index.ts
index 8114061e..15c74573 100644
--- a/src/sagas/player/index.ts
+++ b/src/sagas/player/index.ts
@@ -62,13 +62,17 @@ export function* handleError(): any {
 export function* handlePlayNext(): any {
   const queue = yield select(getQueue)
   const songId = queue.nextSongId
-  yield put({type: types.SET_CURRENT_PLAYING, songId})
+  if (songId) {
+    yield put({type: types.SET_CURRENT_PLAYING, songId})
+  }
 }
 
 export function* handlePlayPrev(): any {
   const queue = yield select(getQueue)
   const songId = queue.prevSongId
-  yield put({type: types.SET_CURRENT_PLAYING, songId})
+  if (songId) {
+    yield put({type: types.SET_CURRENT_PLAYING, songId})
+  }
 }
 
 export function* goToViewPage(): any {
diff --git a/src/sagas/webtorrent/workers.ts b/src/sagas/webtorrent/workers.ts
index 3c725111..754ec483 100644
--- a/src/sagas/webtorrent/workers.ts
+++ b/src/sagas/webtorrent/workers.ts
@@ -1,13 +1,17 @@
 import { put, call } from 'redux-saga/effects'
 
 import { getAdapter } from '../../services/database'
-import { magnetToMedia } from '../../services/Webtorrent'
+import { magnetToMedia, torrentToMedia } from '../../services/Webtorrent'
 import CollectionService from '../../services/CollectionService'
 import Media from '../../entities/Media'
 import * as types from '../../constants/ActionTypes'
 
-export function* readWebtorrentFile(action: {magnet: string}) {
-  const medias = yield call(magnetToMedia, action.magnet)
+export function* readWebtorrentFile(action: {
+  magnet: string,
+  torrent: File
+}) {
+  const torrentSource = action.magnet || action.torrent
+  const medias = yield call(magnetToMedia, torrentSource)
   const adapter = getAdapter()
   const collectionService = new CollectionService(new adapter())
 
diff --git a/src/services/MediaSessionService.ts b/src/services/MediaSessionService.ts
index 3416a3cb..edff7111 100644
--- a/src/services/MediaSessionService.ts
+++ b/src/services/MediaSessionService.ts
@@ -8,11 +8,11 @@ declare var window: any
 
 export default class MediaSessionService {
   updateMetadata = (media: Media, dispatch: any) => {
-    if (this.canSetMediaSession()) {
+    if (this.canSetMediaSession() && media) {
       navigator.mediaSession.metadata = new window.MediaMetadata({
         title: media.title,
-        artist: media.artist.name,
-        album: media.album.name,
+        artist: media.artistName,
+        album: media.albumName,
         artwork: [
           {
             src: this.getThumbnail(media), type: 'image/png', sizes: '96x96'
diff --git a/src/services/Webtorrent/index.ts b/src/services/Webtorrent/index.ts
index 6b361777..dcbfc9aa 100644
--- a/src/services/Webtorrent/index.ts
+++ b/src/services/Webtorrent/index.ts
@@ -14,7 +14,7 @@ const announceList = [
   ['wss://tracker.fastcast.nz']
 ]
 
-export const magnetToMedia = async (torrentUrl: string): Promise<Array<Media>> => {
+export const magnetToMedia = async (torrentUrl: string|File): Promise<Array<Media>> => {
   const client = new Webtorrent()
 
   return new Promise((resolve): any => {
@@ -24,11 +24,19 @@ export const magnetToMedia = async (torrentUrl: string): Promise<Array<Media>> =
     }, (torrent: any) => {
       console.log('files detected: ', torrent.files)
       const files = torrent.files.filter((file: any) => {
-        return file.name.endsWith('.mp4') || file.name.endsWith('.mp3')
+        console.log(`scanning ${file.name}`)
+        return file.name.endsWith('.mp4') || file.name.endsWith('.mp3') || file.name.endsWith('.mkv')
       })
 
       const medias = files.map((file: any) => {
-        const type = file.name.endsWith('.mp4') ? 'video': 'audio'
+        const type = file.name.endsWith('.mp4') || file.name.endsWith('.mkv') ? 'video': 'audio'
+        const attachments = {
+          'webtorrent': {
+            content_type: 'application/x-bittorrent',
+            data: typeof torrentUrl === 'string' ? btoa(torrentUrl): torrentUrl
+          }
+        }
+
         return new Media({
           title: file.name,
           artistName: 'webtorrent',
@@ -44,7 +52,8 @@ export const magnetToMedia = async (torrentUrl: string): Promise<Array<Media>> =
                 }
               ]
             }
-          ]
+          ],
+          _attachments: attachments
         })
       })
 
diff --git a/src/services/database/PouchdbAdapter.ts b/src/services/database/PouchdbAdapter.ts
index 656eb7c1..ee949a0a 100644
--- a/src/services/database/PouchdbAdapter.ts
+++ b/src/services/database/PouchdbAdapter.ts
@@ -66,7 +66,7 @@ export default class PouchdbAdapter implements IAdapter {
   getDocObj = async (model: string, id: string): Promise<any> => {
     const instance = await db.get()
 
-    return instance.get(id)
+    return instance.get(id, {attachments: true})
   }
 
   removeCollection = async (model: string): Promise<any> => {
@@ -78,11 +78,12 @@ export default class PouchdbAdapter implements IAdapter {
     return new Promise((resolve, reject) => {
       return db.get().then(async (instance) => {
 
+        logger.log('RxdbDatabase', 'Querying all database')
         const result = await instance.query((doc: any, emit: any) => {
           if (doc.type === model) {
             emit(doc)
           }
-        }, {type: model})
+        }, {type: model}, {attachments: true})
 
         if (result) {
           // FIXME: This elem.key should be elem.value maybe?
-- 
GitLab


From d6b356b4d078345157e40e481552d2e5f3ce864a Mon Sep 17 00:00:00 2001
From: Genar Trias Ortiz <genar@acs.li>
Date: Fri, 15 Jan 2021 02:09:43 +0100
Subject: [PATCH 2/2] converting torrent files into magnets

---
 src/components/AddMediaModal/index.tsx        | 11 +++++++++-
 .../Player/CustomPlayers/WebtorrentPlayer.tsx | 13 +++++-------
 src/components/Player/PlayerControls.tsx      |  8 ++------
 src/entities/Media.ts                         |  6 +-----
 src/sagas/webtorrent/index.ts                 |  2 +-
 src/sagas/webtorrent/workers.ts               | 14 ++++++-------
 src/services/Webtorrent/index.ts              | 20 +++++--------------
 7 files changed, 30 insertions(+), 44 deletions(-)

diff --git a/src/components/AddMediaModal/index.tsx b/src/components/AddMediaModal/index.tsx
index 33a0b4c9..be0542f0 100644
--- a/src/components/AddMediaModal/index.tsx
+++ b/src/components/AddMediaModal/index.tsx
@@ -1,5 +1,6 @@
 import { Dispatch, connect } from 'react-redux'
 import React from 'react'
+import parseTorrent from 'parse-torrent'
 
 import Button from '../common/Button'
 import Input from '../common/Input'
@@ -46,7 +47,15 @@ const AddMediaModal = (props: Props) => {
               props.dispatch({type: types.ADD_WEBTORRENT_MEDIA, magnet: magnetLink})
             }
             if (torrent) {
-              props.dispatch({type: types.ADD_WEBTORRENT_MEDIA, torrent: torrent})
+              console.log('torrent: ', torrent)
+              // console.log('parsed torrent: ', parseTorrent.remote(torrent))
+              parseTorrent.remote(torrent, (err, parsedTorrent) => {
+                if (err) throw err
+                if (!parsedTorrent) return
+
+                const magnet = parseTorrent.toMagnetURI(parsedTorrent)
+                props.dispatch({type: types.ADD_WEBTORRENT_MEDIA, magnet: magnet})
+              })
             }
             props.dispatch({type: types.HIDE_ADD_MEDIA_MODAL})
           }}
diff --git a/src/components/Player/CustomPlayers/WebtorrentPlayer.tsx b/src/components/Player/CustomPlayers/WebtorrentPlayer.tsx
index 7c202568..5e34e2ab 100644
--- a/src/components/Player/CustomPlayers/WebtorrentPlayer.tsx
+++ b/src/components/Player/CustomPlayers/WebtorrentPlayer.tsx
@@ -3,19 +3,16 @@ import { ReactPlayerProps } from 'react-player'
 import Webtorrent from 'webtorrent'
 
 const announceList = [
+  ['wss://tracker.btorrent.xyz'],
   ['udp://tracker.openbittorrent.com:80'],
   ['udp://tracker.internetwarriors.net:1337'],
   ['udp://tracker.leechers-paradise.org:6969'],
   ['udp://tracker.coppersurfer.tk:6969'],
   ['udp://exodus.desync.com:6969'],
-  ['wss://tracker.webtorrent.io'],
-  ['wss://tracker.btorrent.xyz'],
   ['wss://tracker.openwebtorrent.com'],
-  ['wss://tracker.fastcast.nz']
 ]
 
-function canPlay (url: string|File) {
-  console.log('type of url: ', typeof url)
+function canPlay (url: string) {
   return typeof url === 'string' && url.startsWith('magnet:')
 }
 
@@ -89,11 +86,11 @@ export class TorrentPlayer extends React.Component<ReactPlayerProps> {
   }
 
   pause () {
-      this.player.pause()
+    this.player.pause()
   }
 
   stop () {
-      this.player.removeAttribute('src')
+    this.player.removeAttribute('src')
   }
 
   seekTo (seconds: any) {
@@ -151,7 +148,7 @@ export class TorrentPlayer extends React.Component<ReactPlayerProps> {
   }
 
   getSource (url: any) {
-    // if (typeof url !== 'string' && url.length < 10) return
+    if (typeof url !== 'string' && url.length < 10) return
 
     const { player } = this
 
diff --git a/src/components/Player/PlayerControls.tsx b/src/components/Player/PlayerControls.tsx
index 24f5d057..3ec9fde9 100644
--- a/src/components/Player/PlayerControls.tsx
+++ b/src/components/Player/PlayerControls.tsx
@@ -101,7 +101,7 @@ class PlayerControls extends React.Component<Props> {
   }
 
   onError = (e: Error) => {
-    logger.log(e.message)
+    console.log(e.message)
     this.props.dispatch({type: types.PLAY_ERROR, error: e})
   }
 
@@ -123,8 +123,6 @@ class PlayerControls extends React.Component<Props> {
     const currentPlayingId = this.props.queue.currentPlaying
     const currentPlaying = this.props.collection.rows[currentPlayingId]
 
-    // FIXME: Here I need to receive the torrent attachment but it's not
-    // available in redux
     const { streamUri } = this.props.player
 
     const handlers = (
@@ -158,8 +156,6 @@ class PlayerControls extends React.Component<Props> {
       .pathname
       .match(new RegExp(`/song/${currentPlayingId}`))
 
-    console.log(currentPlaying._attachments)
-
     return (
       <React.Fragment>
         { handlers }
@@ -167,7 +163,7 @@ class PlayerControls extends React.Component<Props> {
           <InPortal node={this.props.playerPortal}>
             <ReactPlayer
               pip
-              fullscreen={this.props.player.fullscreen}
+              fullscreen={this.props.player.fullscreen.toString()}
               controls={songFinder && currentPlaying.media_type === 'video'}
               className={playerClassnames}
               ref={this.playerRef}
diff --git a/src/entities/Media.ts b/src/entities/Media.ts
index 867a16a8..ed696d9b 100644
--- a/src/entities/Media.ts
+++ b/src/entities/Media.ts
@@ -30,7 +30,6 @@ export default class Media {
   artistName: string
   duration: number
   externalId: string
-  _attachments: any
   stream: Array<stream>
   playCount: number
   genre: string
@@ -49,7 +48,6 @@ export default class Media {
       artistName,
       artistId,
       albumId,
-      _attachments,
       albumName,
       duration,
       genre,
@@ -71,7 +69,6 @@ export default class Media {
     this.forcedId = forcedId
     this.albumName = albumName
     this.filePath = filePath
-    this._attachments = _attachments
 
     this.album = new Album({
       albumId: albumId,
@@ -220,8 +217,7 @@ export default class Media {
       playCount: this.playCount,
       filePath: this.filePath,
       media_type: this.media_type,
-      duration: this.duration,
-      _attachments: this._attachments
+      duration: this.duration
     }
   }
 
diff --git a/src/sagas/webtorrent/index.ts b/src/sagas/webtorrent/index.ts
index 490abb12..01820176 100644
--- a/src/sagas/webtorrent/index.ts
+++ b/src/sagas/webtorrent/index.ts
@@ -1,7 +1,7 @@
 // Binding actions to sagas
 import { takeLatest } from 'redux-saga/effects'
 import * as types from '../../constants/ActionTypes'
-import { readWebtorrentFile, } from './workers'
+import { readWebtorrentFile } from './workers'
 
 function* webtorrentSaga(): any {
   yield takeLatest(types.ADD_WEBTORRENT_MEDIA, readWebtorrentFile)
diff --git a/src/sagas/webtorrent/workers.ts b/src/sagas/webtorrent/workers.ts
index 754ec483..2fe391a7 100644
--- a/src/sagas/webtorrent/workers.ts
+++ b/src/sagas/webtorrent/workers.ts
@@ -1,20 +1,18 @@
 import { put, call } from 'redux-saga/effects'
 
 import { getAdapter } from '../../services/database'
-import { magnetToMedia, torrentToMedia } from '../../services/Webtorrent'
+import { magnetToMedia } from '../../services/Webtorrent'
 import CollectionService from '../../services/CollectionService'
-import Media from '../../entities/Media'
 import * as types from '../../constants/ActionTypes'
 
-export function* readWebtorrentFile(action: {
-  magnet: string,
-  torrent: File
-}) {
-  const torrentSource = action.magnet || action.torrent
-  const medias = yield call(magnetToMedia, torrentSource)
+export function* readWebtorrentFile(action: any) {
+  console.log('getting media objects from magnet: ', action.magnet)
+  const medias = yield call(magnetToMedia, action.magnet)
   const adapter = getAdapter()
   const collectionService = new CollectionService(new adapter())
 
+  console.log('medias: ', medias)
+
   // Save song
   for (let i = 0; i < medias.length; i++) {
     const media = medias[i].toDocument()
diff --git a/src/services/Webtorrent/index.ts b/src/services/Webtorrent/index.ts
index dcbfc9aa..f4b95c30 100644
--- a/src/services/Webtorrent/index.ts
+++ b/src/services/Webtorrent/index.ts
@@ -3,40 +3,31 @@ import Webtorrent from 'webtorrent'
 import Media from '../../entities/Media'
 
 const announceList = [
+  ['wss://tracker.btorrent.xyz'],
   ['udp://tracker.openbittorrent.com:80'],
   ['udp://tracker.internetwarriors.net:1337'],
   ['udp://tracker.leechers-paradise.org:6969'],
   ['udp://tracker.coppersurfer.tk:6969'],
   ['udp://exodus.desync.com:6969'],
-  ['wss://tracker.webtorrent.io'],
-  ['wss://tracker.btorrent.xyz'],
   ['wss://tracker.openwebtorrent.com'],
-  ['wss://tracker.fastcast.nz']
 ]
 
-export const magnetToMedia = async (torrentUrl: string|File): Promise<Array<Media>> => {
+export const magnetToMedia = async (torrentUrl: string): Promise<Array<Media>> => {
   const client = new Webtorrent()
 
   return new Promise((resolve): any => {
     console.log('adding: ', torrentUrl)
+
     client.add(torrentUrl, {
       announce: announceList
     }, (torrent: any) => {
       console.log('files detected: ', torrent.files)
       const files = torrent.files.filter((file: any) => {
-        console.log(`scanning ${file.name}`)
         return file.name.endsWith('.mp4') || file.name.endsWith('.mp3') || file.name.endsWith('.mkv')
       })
 
       const medias = files.map((file: any) => {
-        const type = file.name.endsWith('.mp4') || file.name.endsWith('.mkv') ? 'video': 'audio'
-        const attachments = {
-          'webtorrent': {
-            content_type: 'application/x-bittorrent',
-            data: typeof torrentUrl === 'string' ? btoa(torrentUrl): torrentUrl
-          }
-        }
-
+        const type = file.name.endsWith('.mp4') ? 'video': 'audio'
         return new Media({
           title: file.name,
           artistName: 'webtorrent',
@@ -52,8 +43,7 @@ export const magnetToMedia = async (torrentUrl: string|File): Promise<Array<Medi
                 }
               ]
             }
-          ],
-          _attachments: attachments
+          ]
         })
       })
 
-- 
GitLab