kalugin66/webtorrent-desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Torrent details

Browse Source 
Show file list, open folder containing downloaded files, open individual files, play/pause individual videos
This commit is contained in:
DC
2016-03-14 00:51:00 -07:00
parent 74b713d706
commit 8108c407d3
7 changed files with 316 additions and 196 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
main/ipc.js
View File

@@ -4,13 +4,13 @@ module.exports = {
var debug = require('debug')('webtorrent-app:ipcMain')
var electron = require('electron')
var menu = require('./menu')
var windows = require('./windows')
var app = electron.app
var ipcMain = electron.ipcMain
var powerSaveBlocker = electron.powerSaveBlocker
var menu = require('./menu')
var windows = require('./windows')
// has to be a number, not a boolean, and undefined throws an error
var powerSaveBlocked = 0
@@ -56,6 +56,11 @@ function init () {
powerSaveBlocker.stop(powerSaveBlocked)
}
})
ipcMain.on('openItem', function (e, path) {
console.log('opening file or folder: ' + path)
electron.shell.openItem(path)
})
}
function setBounds (bounds) {

65
renderer/index.css
View File

@@ -145,12 +145,14 @@ table {
* BUTTONS
*/
a, i {
a,
i {
cursor: default;
-webkit-app-region: no-drag;
}
a:not(.disabled):hover, i:not(.disabled):hover {
a:not(.disabled):hover,
i:not(.disabled):hover {
-webkit-filter: brightness(1.3);
}
@@ -210,7 +212,7 @@ a:not(.disabled):hover, i:not(.disabled):hover {
.header .nav {
font-weight: bold;
margin-right: 7px;
margin-right: 9px;
}
.header .nav.left {
@@ -237,7 +239,8 @@ a:not(.disabled):hover, i:not(.disabled):hover {
opacity: 1;
}
.header .nav .back, .header .nav .forward {
.header .nav .back,
.header .nav .forward {
font-size: 30px;
margin-top: -3px;
}
@@ -370,7 +373,8 @@ input {
animation: fadein .4s;
}
.torrent, .torrent-placeholder {
.torrent,
.torrent-placeholder {
height: 120px;
}
@@ -390,11 +394,14 @@ input {
text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
}
.torrent .metadata span:not(:last-child)::after {
content: ' — ';
}
.torrent .buttons {
position: absolute;
top: 25px;
right: 0;
height: 100%;
right: 10px;
display: none;
}
@@ -403,7 +410,7 @@ input {
}
.torrent .buttons > * {
margin-right: 6px; /* space buttons apart, align the Xs under the + */
margin-left: 6px; /* space buttons apart */
}
.torrent .buttons .download {
@@ -413,7 +420,6 @@ input {
border-radius: 14px;
font-size: 18px;
padding-top: 6px;
margin-right: 10px; /* download and play btns need more space to look good */
}
.torrent .buttons .download.downloading {
@@ -467,24 +473,27 @@ input {
}
.torrent .buttons .delete {
position: relative;
top: 2px;
opacity: 0.5;
}
.torrent .buttons .delete:hover {
opacity: 0.7;
}
.torrent .name {
font-size: 1.5em;
font-weight: bold;
line-height: 1.5em;
}
.torrent .status, .torrent .status2 {
.torrent .status,
.torrent .status2 {
font-size: 1em;
line-height: 1.5em;
}
.torrent span:not(:last-child)::after {
content: ' — ';
}
/*
* TORRENT LIST: DRAG-DROP TARGET
*/
@@ -520,10 +529,20 @@ body.drag .torrent-placeholder span {
padding: 8em 20px 20px 20px;
}
.torrent-details .open-folder {
float: right;
}
.torrent-details table {
width: 100%;
max-width: 1000px;
white-space: nowrap;
border: none;
border-spacing: 0;
}
.torrent-details tr:hover,
.torrent-details .open-folder:hover {
background-color: rgba(200, 200, 200, 0.3);
}
.torrent-details td {
@@ -531,6 +550,16 @@ body.drag .torrent-placeholder span {
padding: 0;
}
.torrent-details td.col-icon {
width: 2em;
}
.torrent-details td.col-icon .icon {
font-size: 18px;
position: relative;
top: 3px;
}
.torrent-details td.col-name {
width: auto;
text-overflow: ellipsis;
@@ -667,7 +696,8 @@ body.drag .torrent-placeholder span {
font-size: 16px;
line-height: 1.5em;
}
.torrent, .torrent-placeholder {
.torrent,
.torrent-placeholder {
height: 150px;
}
}
@@ -677,7 +707,8 @@ body.drag .torrent-placeholder span {
font-size: 18px;
line-height: 1.5em;
}
.torrent, .torrent-placeholder {
.torrent,
.torrent-placeholder {
height: 180px;
}
}

70
renderer/index.js
View File

@@ -21,6 +21,7 @@ var patch = require('virtual-dom/patch')
var App = require('./views/app')
var config = require('../config')
var torrentPoster = require('./lib/torrent-poster')
var TorrentPlayer = require('./lib/torrent-player')
// Electron apps have two processes: a main process (node) runs first and starts
// a renderer process (essentially a Chrome window). We're in the renderer process,
@@ -169,8 +170,15 @@ function dispatch (action, ...args) {
if (action === 'seed') {
seed(args[0] /* files */)
}
if (action === 'openPlayer') {
openPlayer(args[0] /* torrentSummary */)
if (action === 'play') {
// TODO: handle audio. video only for now.
openPlayer(args[0] /* torrentSummary */, args[1] /* index */)
}
if (action === 'openFile') {
openFile(args[0] /* torrentSummary */, args[1] /* index */)
}
if (action === 'openFolder') {
openFolder(args[0] /* torrentSummary */)
}
if (action === 'toggleTorrent') {
toggleTorrent(args[0] /* torrentSummary */)
@@ -453,32 +461,33 @@ function generateTorrentPoster (torrent, torrentSummary) {
})
}
function startServer (infoHash, cb) {
function startServer (infoHash, index, cb) {
if (state.server) return cb()
var torrent = getTorrent(infoHash)
if (!torrent) torrent = startTorrenting(infoHash)
if (torrent.ready) startServerFromReadyTorrent(torrent, cb)
else torrent.on('ready', () => startServerFromReadyTorrent(torrent, cb))
if (torrent.ready) startServerFromReadyTorrent(torrent, index, cb)
else torrent.on('ready', () => startServerFromReadyTorrent(torrent, index, cb))
}
function startServerFromReadyTorrent (torrent, cb) {
// filter out file formats that the <video> tag definitely can't play
var files = torrent.files.filter(function (file) {
var extname = path.extname(file.name)
return ['.mp4', '.m4v', '.webm', '.mov', '.mkv'].indexOf(extname) !== -1
})
function startServerFromReadyTorrent (torrent, index, cb) {
// automatically choose which file in the torrent to play, if necessary
if (!index) {
// filter out file formats that the <video> tag definitely can't play
var files = torrent.files.filter(TorrentPlayer.isPlayable)
if (files.length === 0) return cb(new Error('cannot play any files in torrent'))
// use largest file
var largestFile = files.reduce(function (a, b) {
return a.length > b.length ? a : b
})
index = torrent.files.indexOf(largestFile)
}
if (files.length === 0) return cb(new Error('cannot play any files in torrent'))
// update state
state.playing.infoHash = torrent.infoHash
state.playing.fileIndex = index
// use largest file
state.torrentPlaying = files.reduce(function (a, b) {
return a.length > b.length ? a : b
})
var index = torrent.files.indexOf(state.torrentPlaying)
var server = torrent.createServer()
server.listen(0, function () {
var port = server.address().port
var urlSuffix = ':' + port + '/' + index
@@ -495,9 +504,12 @@ function stopServer () {
if (!state.server) return
state.server.server.destroy()
state.server = null
state.playing.infoHash = null
state.playing.fileIndex = null
}
function openPlayer (torrentSummary) {
// Opens the video player
function openPlayer (torrentSummary, index) {
var torrent = state.client.get(torrentSummary.infoHash)
if (!torrent || !torrent.done) playInterfaceSound(config.SOUND_PLAY)
torrentSummary.playStatus = 'requested'
@@ -509,7 +521,7 @@ function openPlayer (torrentSummary) {
update()
}, 10000) /* give it a few seconds */
startServer(torrentSummary.infoHash, function (err) {
startServer(torrentSummary.infoHash, index, function (err) {
if (err) return onError(err)
// if we timed out (user clicked play a long time ago), don't autoplay
@@ -525,6 +537,22 @@ function openPlayer (torrentSummary) {
})
}
function openFile (torrentSummary, index) {
var torrent = state.client.get(torrentSummary.infoHash)
if (!torrent) return
var filePath = path.join(torrent.path, torrent.files[index].path)
ipcRenderer.send('openItem', filePath)
}
function openFolder (torrentSummary) {
var torrent = state.client.get(torrentSummary.infoHash)
if (!torrent) return
var folderPath = path.join(torrent.path, torrent.name)
ipcRenderer.send('openItem', folderPath)
}
function closePlayer () {
state.url = 'home'
state.window.title = config.APP_NAME

13
renderer/lib/torrent-player.js Normal file
View File

@@ -0,0 +1,13 @@
module.exports = {
isPlayable: isPlayable
}
var path = require('path')
/**
* Determines whether a file in a torrent is audio/video we can play
*/
function isPlayable (file) {
var extname = path.extname(file.name)
return ['.mp4', '.m4v', '.webm', '.mov', '.mkv'].indexOf(extname) !== -1
}

17
renderer/state.js
View File

@@ -4,14 +4,18 @@ var path = require('path')
var config = require('../config')
module.exports = {
/* Temporary state disappears once the program exits.
/*
* Temporary state disappears once the program exits.
* It can contain complex objects like open connections, etc.
*/
client: null, /* the WebTorrent client */
prev: {}, /* used for state diffing in updateElectron() */
server: null, /* local WebTorrent-to-HTTP server */
torrentPlaying: null, /* the torrent we're streaming. see client.torrents */
prev: {}, /* used for state diffing in updateElectron() */
selectedInfoHash: null, /* the torrent we've selected to view details. see state.torrents */
playing: {
infoHash: null, /* the info hash of the torrent we're playing */
fileIndex: null /* the zero-based index within the torrent */
},
// history: [], /* track how we got to the current view. enables Back button */
// historyIndex: 0,
url: 'home',
@@ -36,7 +40,8 @@ module.exports = {
mouseStationarySince: 0 /* Unix time in ms */
},
/* Saved state is read from and written to a file every time the app runs.
/*
* Saved state is read from and written to a file every time the app runs.
* It should be simple and minimal and must be JSON.
*
* Config path:
@@ -49,9 +54,7 @@ module.exports = {
*
* Also accessible via `require('application-config')('WebTorrent').filePath`
*/
saved: {
torrents: []
},
saved: {},
/* If the saved state file doesn't exist yet, here's what we use instead */
defaultSavedState: {

4
renderer/views/player.js
View File

@@ -64,7 +64,7 @@ function Player (state, dispatch) {
function renderPlayerControls (state, dispatch) {
var positionPercent = 100 * state.video.currentTime / state.video.duration
var playbackCursorStyle = { left: 'calc(' + positionPercent + '% - 8px)' }
var torrent = state.torrentPlaying._torrent
var torrent = state.client.get(state.playing.infoHash)
var elements = [
hx`
@@ -132,7 +132,7 @@ function renderPlayerControls (state, dispatch) {
// Renders the loading bar. Shows which parts of the torrent are loaded, which
// can be "spongey" / non-contiguous
function renderLoadingBar (state) {
var torrent = state.torrentPlaying._torrent
var torrent = state.client.get(state.playing.infoHash)
if (torrent === null) {
return []
}

332
renderer/views/torrent-list.js
View File

@@ -5,165 +5,205 @@ var hyperx = require('hyperx')
var hx = hyperx(h)
var prettyBytes = require('prettier-bytes')
var TorrentPlayer = require('../lib/torrent-player')
function TorrentList (state, dispatch) {
var list = state.saved.torrents.map(
(torrentSummary) => renderTorrent(torrentSummary, state, dispatch))
var torrentRows = state.saved.torrents.map(
(torrentSummary) => renderTorrent(torrentSummary))
return hx`
<div class='torrent-list'>
${list}
${torrentRows}
<div class='torrent-placeholder'>
<span class='ellipsis'>Drop a torrent file here or paste a magnet link</span>
</div>
</div>`
}
// Renders a torrent in the torrent list
// Includes name, download status, play button, background image
// May be expanded for additional info, including the list of files inside
function renderTorrent (torrentSummary, state, dispatch) {
// Get ephemeral data (like progress %) directly from the WebTorrent handle
var infoHash = torrentSummary.infoHash
var torrent = state.client.torrents.find((x) => x.infoHash === infoHash)
var isSelected = state.selectedInfoHash === infoHash
// Renders a torrent in the torrent list
// Includes name, download status, play button, background image
// May be expanded for additional info, including the list of files inside
function renderTorrent (torrentSummary) {
// Get ephemeral data (like progress %) directly from the WebTorrent handle
var infoHash = torrentSummary.infoHash
var torrent = state.client.torrents.find((x) => x.infoHash === infoHash)
var isSelected = state.selectedInfoHash === infoHash
// Background image: show some nice visuals, like a frame from the movie, if possible
var style = {}
if (torrentSummary.posterURL) {
var gradient = isSelected
? 'linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%)'
: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)'
style['background-image'] = gradient + `, url('${torrentSummary.posterURL}')`
}
// Foreground: name of the torrent, basic info like size, play button,
// cast buttons if available, and delete
var classes = ['torrent']
// playStatus turns the play button into a loading spinner or error icon
if (torrent && torrent.playStatus) classes.push(torrent.playStatus)
if (isSelected) classes.push('selected')
classes = classes.join(' ')
return hx`
<div style=${style} class=${classes} onclick=${() => dispatch('toggleSelectTorrent', infoHash)}>
${renderTorrentMetadata(torrent, torrentSummary)}
${renderTorrentButtons(torrentSummary, dispatch)}
${isSelected ? renderTorrentDetails(torrent, torrentSummary) : ''}
</div>
`
}
// Show name, download status, % complete
function renderTorrentMetadata (torrent, torrentSummary) {
var name = torrentSummary.displayName || torrentSummary.name || 'Loading torrent...'
var elements = [hx`
<div class='name ellipsis'>${name}</div>
`]
// If a torrent is paused and we only get the torrentSummary
// If it's downloading/seeding then we have more information
if (torrent) {
var progress = Math.floor(100 * torrent.progress)
var downloaded = prettyBytes(torrent.downloaded)
var total = prettyBytes(torrent.length || 0)
if (downloaded !== total) downloaded += ` / ${total}`
elements.push(hx`
<div class='status ellipsis'>
${getFilesLength()}
<span>${getPeers()}</span>
<span>↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s</span>
<span>↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s</span>
</div>
`)
elements.push(hx`
<div class='status2 ellipsis'>
<span class='progress'>${progress}%</span>
<span>${downloaded}</span>
</div>
`)
}
return hx`<div class='metadata'>${elements}</div>`
function getPeers () {
var count = torrent.numPeers === 1 ? 'peer' : 'peers'
return `${torrent.numPeers} ${count}`
}
function getFilesLength () {
if (torrent.ready && torrent.files.length > 1) {
return hx`<span class='files'>${torrent.files.length} files</span>`
// Background image: show some nice visuals, like a frame from the movie, if possible
var style = {}
if (torrentSummary.posterURL) {
var gradient = isSelected
? 'linear-gradient(to bottom, rgba(0, 0, 0, 0.8) 0%, rgba(0, 0, 0, 0.4) 100%)'
: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%)'
style['background-image'] = gradient + `, url('${torrentSummary.posterURL}')`
}
}
}
// Download button toggles between torrenting (DL/seed) and paused
// Play button starts streaming the torrent immediately, unpausing if needed
function renderTorrentButtons (torrentSummary, dispatch) {
return hx`
<div class='buttons'>
<i.btn.icon.download
class='${torrentSummary.status}'
onclick=${(e) => handleButton('toggleTorrent', e)}>
${torrentSummary.status === 'seeding' ? 'file_upload' : 'file_download'}
</i>
<i.btn.icon.play
onclick=${(e) => handleButton('openPlayer', e)}>
${torrentSummary.playStatus === 'timeout' ? 'warning' : 'play_arrow'}
</i>
<i
class='icon delete'
onclick=${(e) => handleButton('deleteTorrent', e)}>
close
</i>
</div>
`
function handleButton (action, e) {
// Prevent propagation so that we don't select/unselect the torrent
e.stopPropagation()
dispatch(action, torrentSummary)
}
}
// Show files, per-file download status and play buttons, and so on
function renderTorrentDetails (torrent, torrentSummary) {
var filesElement
if (!torrent || !torrent.files) {
// We don't know what files this torrent contains
var message = torrent
? 'Downloading torrent data using magnet link...'
: 'Failed to download torrent data from magnet link. Click the download button to try again...'
filesElement = hx`<div class='files warning'>${message}</div>`
} else {
// We do know the files. List them and show download stats for each one
var fileRows = torrent.files.map(function (file) {
var numPieces = file._endPiece - file._startPiece + 1
var numPiecesPresent = 0
for (var piece = file._startPiece; piece <= file._endPiece; piece++) {
if (torrent.bitfield.get(piece)) numPiecesPresent++
}
var progress = Math.round(100 * numPiecesPresent / numPieces) + '%'
return hx`
<tr>
<td class='col-name'>${file.name}</td>
<td class='col-progress'>${progress}</td>
<td class='col-size'>${prettyBytes(file.length)}</td>
</li>
`
})
filesElement = hx`
<div class='files'>
<strong>Files</strong>
<table>
${fileRows}
</table>
// Foreground: name of the torrent, basic info like size, play button,
// cast buttons if available, and delete
var classes = ['torrent']
// playStatus turns the play button into a loading spinner or error icon
if (torrentSummary.playStatus) classes.push(torrentSummary.playStatus)
if (isSelected) classes.push('selected')
classes = classes.join(' ')
return hx`
<div style=${style} class=${classes} onclick=${() => dispatch('toggleSelectTorrent', infoHash)}>
${renderTorrentMetadata(torrent, torrentSummary)}
${renderTorrentButtons(torrentSummary)}
${isSelected ? renderTorrentDetails(torrent, torrentSummary) : ''}
</div>
`
}
return hx`
<div class='torrent-details'>
${filesElement}
</div>
`
// Show name, download status, % complete
function renderTorrentMetadata (torrent, torrentSummary) {
var name = torrentSummary.displayName || torrentSummary.name || 'Loading torrent...'
var elements = [hx`
<div class='name ellipsis'>${name}</div>
`]
// If a torrent is paused and we only get the torrentSummary
// If it's downloading/seeding then we have more information
if (torrent) {
var progress = Math.floor(100 * torrent.progress)
var downloaded = prettyBytes(torrent.downloaded)
var total = prettyBytes(torrent.length || 0)
if (downloaded !== total) downloaded += ` / ${total}`
elements.push(hx`
<div class='status ellipsis'>
${getFilesLength()}
<span>${getPeers()}</span>
<span>↓ ${prettyBytes(torrent.downloadSpeed || 0)}/s</span>
<span>↑ ${prettyBytes(torrent.uploadSpeed || 0)}/s</span>
</div>
`)
elements.push(hx`
<div class='status2 ellipsis'>
<span class='progress'>${progress}%</span>
<span>${downloaded}</span>
</div>
`)
}
return hx`<div class='metadata'>${elements}</div>`
function getPeers () {
var count = torrent.numPeers === 1 ? 'peer' : 'peers'
return `${torrent.numPeers} ${count}`
}
function getFilesLength () {
if (torrent.ready && torrent.files.length > 1) {
return hx`<span class='files'>${torrent.files.length} files</span>`
}
}
}
// Download button toggles between torrenting (DL/seed) and paused
// Play button starts streaming the torrent immediately, unpausing if needed
function renderTorrentButtons (torrentSummary) {
return hx`
<div class='buttons'>
<i.btn.icon.play
onclick=${(e) => handleButton('play', e)}>
${torrentSummary.playStatus === 'timeout' ? 'warning' : 'play_arrow'}
</i>
<i.btn.icon.download
class='${torrentSummary.status}'
onclick=${(e) => handleButton('toggleTorrent', e)}>
${torrentSummary.status === 'seeding' ? 'file_upload' : 'file_download'}
</i>
<i
class='icon delete'
onclick=${(e) => handleButton('deleteTorrent', e)}>
close
</i>
</div>
`
function handleButton (action, e) {
// Prevent propagation so that we don't select/unselect the torrent
e.stopPropagation()
dispatch(action, torrentSummary)
}
}
// Show files, per-file download status and play buttons, and so on
function renderTorrentDetails (torrent, torrentSummary) {
var filesElement
if (!torrent || !torrent.files) {
// We don't know what files this torrent contains
var message = torrent
? 'Downloading torrent data using magnet link...'
: 'Failed to download torrent data from magnet link. Click the download button to try again...'
filesElement = hx`<div class='files warning'>${message}</div>`
} else {
// We do know the files. List them and show download stats for each one
var fileRows = torrent.files.map((file, index) => renderFileRow(torrent, torrentSummary, file, index))
filesElement = hx`
<div class='files'>
<strong>Files</strong>
<span class='open-folder' onclick=${handleOpenFolder}>Open folder</span>
<table>
${fileRows}
</table>
</div>
`
}
return hx`
<div class='torrent-details'>
${filesElement}
</div>
`
function handleOpenFolder (e) {
e.stopPropagation()
dispatch('openFolder', torrentSummary)
}
}
// Show a single file in the details view for a single torrent
function renderFileRow (torrent, torrentSummary, file, index) {
// First, find out how much of the file we've downloaded
var numPieces = file._endPiece - file._startPiece + 1
var numPiecesPresent = 0
for (var piece = file._startPiece; piece <= file._endPiece; piece++) {
if (torrent.bitfield.get(piece)) numPiecesPresent++
}
var progress = Math.round(100 * numPiecesPresent / numPieces) + '%'
var isDone = numPieces === numPiecesPresent
// Second, render the file as a table row
var icon
var iconClass = ''
if (state.playing.infoHash === torrent.infoHash && state.playing.fileIndex === index) {
icon = 'pause_arrow' /* playing? add option to pause */
} else if (TorrentPlayer.isPlayable(file)) {
icon = 'play_arrow' /* playable? add option to play */
} else {
icon = 'description' /* file icon, opens in OS default app */
iconClass = isDone ? '' : 'disabled'
}
return hx`
<tr onclick=${handleClick}>
<td class='col-icon'>
<i class='icon ${iconClass}'>${icon}</i>
</td>
<td class='col-name'>${file.name}</td>
<td class='col-progress'>${progress}</td>
<td class='col-size'>${prettyBytes(file.length)}</td>
</tr>
`
// Finally, let the user click on the row to play media or open files
function handleClick (e) {
e.stopPropagation()
if (icon === 'pause_arrow') {
throw new Error('Unimplemented') // TODO: pause audio
} else if (icon === 'play_arrow') {
dispatch('play', torrentSummary, index)
} else if (isDone) {
dispatch('openFile', torrentSummary, index)
}
}
}
}