separation of concerns
This commit is contained in:
Nate Goldman
7
main/config.js
Normal file
7
main/config.js
Normal file
@@ -0,0 +1,7 @@
|
||||
var path = require('path')
|
||||
|
||||
module.exports = {
|
||||
APP_NAME: 'WebTorrent',
|
||||
INDEX: 'file://' + path.resolve(__dirname, '..', 'renderer', 'index.html'),
|
||||
startTime: Date.now()
|
||||
}
|
||||
318
main/index.css
318
main/index.css
@@ -1,318 +0,0 @@
|
||||
/*
|
||||
* BASIC STYLES
|
||||
*/
|
||||
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
background: rgb(40, 40, 40);
|
||||
color: #FFF;
|
||||
cursor: default;
|
||||
height: 100%;
|
||||
font-family: BlinkMacSystemFont, 'Helvetica Neue', Helvetica, sans-serif;
|
||||
font-size: 14px;
|
||||
line-height: 1.5em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.app {
|
||||
-webkit-user-select: none;
|
||||
-webkit-app-region: drag;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* MATERIAL ICONS
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Material Icons'),
|
||||
local('MaterialIcons-Regular'),
|
||||
url(../vendor/MaterialIcons-Regular.woff2) format('woff2');
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px; /* Preferred icon size */
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
}
|
||||
|
||||
/*
|
||||
* UTILITY CLASSES
|
||||
*/
|
||||
|
||||
.ellipsis {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/*
|
||||
* BUTTONS
|
||||
*/
|
||||
|
||||
a, i {
|
||||
cursor: default;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
a:not(.disabled):hover, i:not(.disabled):hover {
|
||||
-webkit-filter: brightness(1.3);
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
font-size: 22px;
|
||||
transition: all 0.05s ease-out;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/*
|
||||
* HEADER
|
||||
*/
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid rgb(20, 20, 20);
|
||||
height: 37px;
|
||||
padding-top: 6px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.header .title {
|
||||
opacity: 0.6;
|
||||
position: absolute;
|
||||
margin-top: 1px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.header .nav {
|
||||
font-weight: bold;
|
||||
margin-left: 78px;
|
||||
margin-right: 7px;
|
||||
}
|
||||
|
||||
.header .nav.left {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.header .nav.right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.header .nav * {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.header .nav .disabled {
|
||||
opacity: 0.1;
|
||||
}
|
||||
|
||||
.header .nav *:not(.disabled):hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.header .nav .back, .header .nav .forward {
|
||||
font-size: 30px;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
/*
|
||||
* CONTENT
|
||||
*/
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: calc(100% - 38px);
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
body.drag::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: rgba(255, 0, 0, 0.3);
|
||||
border: 5px #f00 dashed;
|
||||
}
|
||||
|
||||
/*
|
||||
* PLAYER
|
||||
*/
|
||||
|
||||
.player {
|
||||
height: 100%;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
.player video {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/*
|
||||
* TORRENT LIST
|
||||
*/
|
||||
|
||||
.torrent {
|
||||
height: 120px;
|
||||
padding: 20px;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: 0 50%;
|
||||
transition: all 0.05s ease-out;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.torrent:not(:last-child) {
|
||||
border-bottom: 1px solid rgb(20, 20, 20);
|
||||
}
|
||||
|
||||
.torrent:hover {
|
||||
-webkit-filter: brightness(1.1);
|
||||
}
|
||||
|
||||
.torrent .metadata {
|
||||
float: left;
|
||||
width: 100%;
|
||||
text-shadow: rgba(0, 0, 0, 0.5) 0 0 4px;
|
||||
}
|
||||
|
||||
.torrent:hover .metadata {
|
||||
width: calc(100% - 170px);
|
||||
}
|
||||
|
||||
.torrent .btn, .torrent .delete {
|
||||
float: right;
|
||||
margin-top: 20px;
|
||||
margin-left: 15px;
|
||||
padding-top: 10px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.torrent .delete {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.torrent:hover .btn, .torrent:hover .delete {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.torrent .play {
|
||||
background-color: #F44336;
|
||||
}
|
||||
|
||||
.torrent .chromecast {
|
||||
background-color: #2196F3;
|
||||
}
|
||||
|
||||
.torrent .airplay {
|
||||
background-color: #212121;
|
||||
}
|
||||
|
||||
.torrent .name {
|
||||
font-size: 1.5em;
|
||||
font-weight: bold;
|
||||
line-height: 1.5em;
|
||||
}
|
||||
|
||||
.torrent .status {
|
||||
font-size: 1em;
|
||||
line-height: 1.5em;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
|
||||
.torrent .status :not(:last-child)::after {
|
||||
content: ' — ';
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
* VIDEO CONTROLS
|
||||
*/
|
||||
.player-controls .bottom-bar {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 38px;
|
||||
bottom: 0;
|
||||
opacity: 0;
|
||||
background-color: rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
.player:hover .bottom-bar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* invisible click target for scrubbing */
|
||||
.player-controls .scrub-bar {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 23px; /* 3px .loading-bar plus 10px above and below */
|
||||
top: -10px;
|
||||
left: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.player-controls .loading-bar {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
background-color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.player-controls .loading-bar-part {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
background-color: #dd0000;
|
||||
}
|
||||
|
||||
.player-controls .playback-cursor {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 2px;
|
||||
border: 3px solid #bbbbbb;
|
||||
}
|
||||
|
||||
.player-controls .play-pause {
|
||||
display: block;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin: 5px auto;
|
||||
cursor: pointer;
|
||||
}
|
||||
@@ -1,11 +0,0 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link rel="stylesheet" href="index.css" charset="utf-8">
|
||||
</head>
|
||||
<body>
|
||||
<script src='index.js'></script>
|
||||
</body>
|
||||
</html>
|
||||
339
main/index.js
339
main/index.js
@@ -1,327 +1,34 @@
|
||||
/* global URL, Blob */
|
||||
|
||||
var airplay = require('airplay-js')
|
||||
var chromecasts = require('chromecasts')()
|
||||
var createTorrent = require('create-torrent')
|
||||
var dragDrop = require('drag-drop')
|
||||
var electron = require('electron')
|
||||
var networkAddress = require('network-address')
|
||||
var path = require('path')
|
||||
var throttle = require('throttleit')
|
||||
var torrentPoster = require('./lib/torrent-poster')
|
||||
var WebTorrent = require('webtorrent')
|
||||
var menu = require('./menu')
|
||||
var windows = require('./windows')
|
||||
var ipc = require('./ipc')
|
||||
var app = electron.app
|
||||
|
||||
var createElement = require('virtual-dom/create-element')
|
||||
var diff = require('virtual-dom/diff')
|
||||
var patch = require('virtual-dom/patch')
|
||||
app.on('open-file', onOpen)
|
||||
app.on('open-url', onOpen)
|
||||
|
||||
var App = require('./views/app')
|
||||
|
||||
var HEADER_HEIGHT = 38
|
||||
|
||||
// Force use of webtorrent trackers on all torrents
|
||||
global.WEBTORRENT_ANNOUNCE = createTorrent.announceList
|
||||
.map(function (arr) {
|
||||
return arr[0]
|
||||
})
|
||||
.filter(function (url) {
|
||||
return url.indexOf('wss://') === 0 || url.indexOf('ws://') === 0
|
||||
})
|
||||
|
||||
var state = global.state = {
|
||||
server: null, /* local WebTorrent-to-HTTP server */
|
||||
view: {
|
||||
url: '/',
|
||||
dock: {
|
||||
badge: 0,
|
||||
progress: 0
|
||||
},
|
||||
devices: {
|
||||
airplay: null, /* airplay client. finds and manages AppleTVs */
|
||||
chromecast: null /* chromecast client. finds and manages Chromecasts */
|
||||
},
|
||||
client: null, /* the WebTorrent client */
|
||||
torrentPlaying: null, /* the torrent we're streaming. see client.torrents */
|
||||
// history: [], /* track how we got to the current view. enables Back button */
|
||||
// historyIndex: 0,
|
||||
isFocused: true,
|
||||
mainWindowBounds: null, /* x y width height */
|
||||
title: 'WebTorrent' /* current window title */
|
||||
},
|
||||
video: {
|
||||
isPaused: false,
|
||||
currentTime: 0, /* seconds */
|
||||
duration: 1 /* seconds */
|
||||
}
|
||||
}
|
||||
|
||||
var client, currentVDom, rootElement, updateThrottled
|
||||
|
||||
function init () {
|
||||
client = global.client = new WebTorrent()
|
||||
client.on('warning', onWarning)
|
||||
client.on('error', onError)
|
||||
state.view.client = client
|
||||
|
||||
currentVDom = App(state, dispatch)
|
||||
rootElement = createElement(currentVDom)
|
||||
document.body.appendChild(rootElement)
|
||||
|
||||
updateThrottled = throttle(update, 1000)
|
||||
|
||||
dragDrop('body', onFiles)
|
||||
|
||||
chromecasts.on('update', function (player) {
|
||||
state.view.chromecast = player
|
||||
update()
|
||||
})
|
||||
|
||||
airplay.createBrowser().on('deviceOn', function (player) {
|
||||
state.view.devices.airplay = player
|
||||
}).start()
|
||||
|
||||
document.addEventListener('paste', function () {
|
||||
electron.ipcRenderer.send('addTorrentFromPaste')
|
||||
})
|
||||
|
||||
window.addEventListener('focus', function () {
|
||||
state.view.isFocused = true
|
||||
if (state.view.dock.badge > 0) electron.ipcRenderer.send('setBadge', '')
|
||||
state.view.dock.badge = 0
|
||||
})
|
||||
|
||||
window.addEventListener('blur', function () {
|
||||
state.view.isFocused = false
|
||||
})
|
||||
}
|
||||
init()
|
||||
|
||||
function update () {
|
||||
var newVDom = App(state, dispatch)
|
||||
var patches = diff(currentVDom, newVDom)
|
||||
rootElement = patch(rootElement, patches)
|
||||
currentVDom = newVDom
|
||||
|
||||
updateDockIcon()
|
||||
}
|
||||
|
||||
setInterval(function () {
|
||||
updateThrottled()
|
||||
}, 1000)
|
||||
|
||||
function updateDockIcon () {
|
||||
var progress = state.view.client.progress
|
||||
var activeTorrentsExist = state.view.client.torrents.some(function (torrent) {
|
||||
return torrent.progress !== 1
|
||||
})
|
||||
// Hide progress bar when client has no torrents, or progress is 100%
|
||||
if (!activeTorrentsExist || progress === 1) {
|
||||
progress = -1
|
||||
}
|
||||
if (progress !== state.view.dock.progress) {
|
||||
state.view.dock.progress = progress
|
||||
electron.ipcRenderer.send('setProgress', progress)
|
||||
}
|
||||
}
|
||||
|
||||
function dispatch (action, ...args) {
|
||||
console.log('dispatch: %s %o', action, args)
|
||||
if (action === 'addTorrent') {
|
||||
addTorrent(args[0] /* torrentId */)
|
||||
}
|
||||
if (action === 'seed') {
|
||||
seed(args[0] /* files */)
|
||||
}
|
||||
if (action === 'openPlayer') {
|
||||
openPlayer(args[0] /* torrent */)
|
||||
}
|
||||
if (action === 'deleteTorrent') {
|
||||
deleteTorrent(args[0] /* torrent */)
|
||||
}
|
||||
if (action === 'openChromecast') {
|
||||
openChromecast(args[0] /* torrent */)
|
||||
}
|
||||
if (action === 'openAirplay') {
|
||||
openAirplay(args[0] /* torrent */)
|
||||
}
|
||||
if (action === 'setDimensions') {
|
||||
setDimensions(args[0] /* dimensions */)
|
||||
}
|
||||
if (action === 'back') {
|
||||
if (state.view.url === '/player') {
|
||||
restoreBounds()
|
||||
closeServer()
|
||||
}
|
||||
state.view.url = '/'
|
||||
update()
|
||||
}
|
||||
if (action === 'playPause') {
|
||||
state.video.isPaused = !state.video.isPaused
|
||||
update()
|
||||
}
|
||||
if (action === 'playbackJump') {
|
||||
state.video.jumpToTime = args[0] /* seconds */
|
||||
update()
|
||||
}
|
||||
}
|
||||
|
||||
electron.ipcRenderer.on('addTorrent', function (e, torrentId) {
|
||||
addTorrent(torrentId)
|
||||
app.on('ready', function () {
|
||||
electron.Menu.setApplicationMenu(menu.appMenu)
|
||||
windows.createMainWindow(menu)
|
||||
})
|
||||
|
||||
electron.ipcRenderer.on('seed', function (e, files) {
|
||||
seed(files)
|
||||
app.on('activate', function () {
|
||||
if (windows.main) {
|
||||
windows.main.show()
|
||||
} else {
|
||||
windows.createMainWindow(menu)
|
||||
}
|
||||
})
|
||||
|
||||
function onFiles (files) {
|
||||
// .torrent file = start downloading the torrent
|
||||
files.filter(isTorrentFile).forEach(function (torrentFile) {
|
||||
dispatch('addTorrent', torrentFile)
|
||||
})
|
||||
|
||||
// everything else = seed these files
|
||||
dispatch('seed', files.filter(isNotTorrentFile))
|
||||
}
|
||||
|
||||
function isTorrentFile (file) {
|
||||
var extname = path.extname(file.name).toLowerCase()
|
||||
return extname === '.torrent'
|
||||
}
|
||||
|
||||
function isNotTorrentFile (file) {
|
||||
return !isTorrentFile(file)
|
||||
}
|
||||
|
||||
function addTorrent (torrentId) {
|
||||
var torrent = client.add(torrentId)
|
||||
addTorrentEvents(torrent)
|
||||
}
|
||||
|
||||
function seed (files) {
|
||||
if (files.length === 0) return
|
||||
var torrent = client.seed(files)
|
||||
addTorrentEvents(torrent)
|
||||
}
|
||||
|
||||
function addTorrentEvents (torrent) {
|
||||
torrent.on('infoHash', update)
|
||||
torrent.on('done', function () {
|
||||
if (!state.view.isFocused) {
|
||||
state.view.dock.badge += 1
|
||||
electron.ipcRenderer.send('setBadge', state.view.dock.badge)
|
||||
}
|
||||
update()
|
||||
})
|
||||
torrent.on('download', updateThrottled)
|
||||
torrent.on('upload', updateThrottled)
|
||||
torrent.on('ready', function () {
|
||||
torrentReady(torrent)
|
||||
})
|
||||
update()
|
||||
}
|
||||
|
||||
function torrentReady (torrent) {
|
||||
torrentPoster(torrent, function (err, buf) {
|
||||
if (err) return onWarning(err)
|
||||
torrent.posterURL = URL.createObjectURL(new Blob([ buf ], { type: 'image/png' }))
|
||||
update()
|
||||
})
|
||||
update()
|
||||
}
|
||||
|
||||
function startServer (torrent, cb) {
|
||||
// use largest file
|
||||
state.view.torrentPlaying = torrent.files.reduce(function (a, b) {
|
||||
return a.length > b.length ? a : b
|
||||
})
|
||||
var index = torrent.files.indexOf(state.view.torrentPlaying)
|
||||
|
||||
var server = torrent.createServer()
|
||||
server.listen(0, function () {
|
||||
var port = server.address().port
|
||||
var urlSuffix = ':' + port + '/' + index
|
||||
state.server = {
|
||||
server: server,
|
||||
localURL: 'http://localhost' + urlSuffix,
|
||||
networkURL: 'http://' + networkAddress() + urlSuffix
|
||||
}
|
||||
cb()
|
||||
})
|
||||
}
|
||||
|
||||
function closeServer () {
|
||||
state.server.server.destroy()
|
||||
state.server = null
|
||||
}
|
||||
|
||||
function openPlayer (torrent) {
|
||||
startServer(torrent, function () {
|
||||
state.view.url = '/player'
|
||||
update()
|
||||
})
|
||||
}
|
||||
|
||||
function deleteTorrent (torrent) {
|
||||
torrent.destroy(update)
|
||||
}
|
||||
|
||||
function openChromecast (torrent) {
|
||||
startServer(torrent, function () {
|
||||
state.view.chromecast.play(state.server.networkURL, { title: 'WebTorrent — ' + torrent.name })
|
||||
state.view.chromecast.on('error', function (err) {
|
||||
err.message = 'Chromecast: ' + err.message
|
||||
onError(err)
|
||||
})
|
||||
update()
|
||||
})
|
||||
}
|
||||
|
||||
function openAirplay (torrent) {
|
||||
startServer(torrent, function () {
|
||||
state.view.devices.airplay.play(state.server.networkURL, 0, function () {})
|
||||
// TODO: handle airplay errors
|
||||
update()
|
||||
})
|
||||
}
|
||||
|
||||
function setDimensions (dimensions) {
|
||||
state.view.mainWindowBounds = electron.remote.getCurrentWindow().getBounds()
|
||||
|
||||
// Limit window size to screen size
|
||||
var workAreaSize = electron.remote.screen.getPrimaryDisplay().workAreaSize
|
||||
var aspectRatio = dimensions.width / dimensions.height
|
||||
|
||||
var scaleFactor = Math.min(
|
||||
Math.min(workAreaSize.width / dimensions.width, 1),
|
||||
Math.min(workAreaSize.height / dimensions.height, 1)
|
||||
)
|
||||
|
||||
var width = Math.floor(dimensions.width * scaleFactor)
|
||||
var height = Math.floor(dimensions.height * scaleFactor)
|
||||
|
||||
height += HEADER_HEIGHT
|
||||
|
||||
// Center window on screen
|
||||
var x = Math.floor((workAreaSize.width - width) / 2)
|
||||
var y = Math.floor((workAreaSize.height - height) / 2)
|
||||
|
||||
electron.ipcRenderer.send('setAspectRatio', aspectRatio, {width: 0, height: HEADER_HEIGHT})
|
||||
electron.ipcRenderer.send('setBounds', {x, y, width, height})
|
||||
}
|
||||
|
||||
function restoreBounds () {
|
||||
electron.ipcRenderer.send('setAspectRatio', 0)
|
||||
if (state.view.mainWindowBounds) {
|
||||
electron.ipcRenderer.send('setBounds', state.view.mainWindowBounds, true)
|
||||
app.on('window-all-closed', function () {
|
||||
if (process.platform !== 'darwin') {
|
||||
app.quit()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
function onError (err) {
|
||||
console.error(err.stack)
|
||||
window.alert(err.message || err)
|
||||
update()
|
||||
}
|
||||
ipc.init()
|
||||
|
||||
function onWarning (err) {
|
||||
console.log('warning: %s', err.message)
|
||||
function onOpen (e, torrentId) {
|
||||
e.preventDefault()
|
||||
windows.main.send('addTorrent', torrentId)
|
||||
}
|
||||
|
||||
68
main/ipc.js
Normal file
68
main/ipc.js
Normal file
@@ -0,0 +1,68 @@
|
||||
var electron = require('electron')
|
||||
var debug = require('debug')('webtorrent-app:ipcMain')
|
||||
var ipcMain = electron.ipcMain
|
||||
var windows = require('./windows')
|
||||
|
||||
module.exports = {
|
||||
init: init
|
||||
}
|
||||
|
||||
function init () {
|
||||
ipcMain.on('addTorrentFromPaste', function (e) {
|
||||
addTorrentFromPaste()
|
||||
})
|
||||
|
||||
ipcMain.on('setBounds', function (e, bounds) {
|
||||
setBounds(bounds)
|
||||
})
|
||||
|
||||
ipcMain.on('setAspectRatio', function (e, aspectRatio, extraSize) {
|
||||
setAspectRatio(aspectRatio, extraSize)
|
||||
})
|
||||
|
||||
ipcMain.on('setBadge', function (e, text) {
|
||||
setBadge(text)
|
||||
})
|
||||
|
||||
ipcMain.on('setProgress', function (e, progress) {
|
||||
setProgress(progress)
|
||||
})
|
||||
}
|
||||
|
||||
function addTorrentFromPaste () {
|
||||
debug('addTorrentFromPaste')
|
||||
var torrentIds = electron.clipboard.readText().split('\n')
|
||||
torrentIds.forEach(function (torrentId) {
|
||||
torrentId = torrentId.trim()
|
||||
if (torrentId.length === 0) return
|
||||
windows.mainWindow.send('addTorrent', torrentId)
|
||||
})
|
||||
}
|
||||
|
||||
function setBounds (bounds) {
|
||||
debug('setBounds %o', bounds)
|
||||
if (windows.mainWindow) {
|
||||
windows.mainWindow.setBounds(bounds, true)
|
||||
}
|
||||
}
|
||||
|
||||
function setAspectRatio (aspectRatio, extraSize) {
|
||||
debug('setAspectRatio %o %o', aspectRatio, extraSize)
|
||||
if (windows.mainWindow) {
|
||||
windows.mainWindow.setAspectRatio(aspectRatio, extraSize)
|
||||
}
|
||||
}
|
||||
|
||||
// Display string in dock badging area (OS X)
|
||||
function setBadge (text) {
|
||||
debug('setBadge %s', text)
|
||||
electron.app.dock.setBadge(String(text))
|
||||
}
|
||||
|
||||
// Show progress bar. Valid range is [0, 1]. Remove when < 0; indeterminate when > 1.
|
||||
function setProgress (progress) {
|
||||
debug('setProgress %s', progress)
|
||||
if (windows.mainWindow) {
|
||||
windows.mainWindow.setProgressBar(progress)
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
module.exports = captureVideoFrame
|
||||
|
||||
function captureVideoFrame (video, format) {
|
||||
if (typeof video === 'string') video = document.querySelector(video)
|
||||
if (!video || video.nodeName !== 'VIDEO') {
|
||||
throw new Error('First argument must be a <video> element or selector')
|
||||
}
|
||||
if (format == null) format = 'png'
|
||||
if (format !== 'png' && format !== 'jpg' && format !== 'webp') {
|
||||
throw new Error('Second argument must be one of "png", "jpg", or "webp"')
|
||||
}
|
||||
|
||||
var canvas = document.createElement('canvas')
|
||||
canvas.width = video.videoWidth
|
||||
canvas.height = video.videoHeight
|
||||
|
||||
canvas.getContext('2d').drawImage(video, 0, 0)
|
||||
|
||||
var dataUri = canvas.toDataURL('image/' + format)
|
||||
var data = dataUri.split(',')[1]
|
||||
|
||||
return new Buffer(data, 'base64')
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
module.exports = torrentPoster
|
||||
|
||||
var captureVideoFrame = require('./capture-video-frame')
|
||||
var path = require('path')
|
||||
|
||||
function torrentPoster (torrent, cb) {
|
||||
// use largest file
|
||||
var file = torrent.files
|
||||
.filter(function (file) {
|
||||
var extname = path.extname(file.name)
|
||||
return ['.mp4', '.webm', '.mov', '.mkv'].indexOf(extname) !== -1
|
||||
})
|
||||
.reduce(function (a, b) {
|
||||
return a.length > b.length ? a : b
|
||||
})
|
||||
var index = torrent.files.indexOf(file)
|
||||
|
||||
var server = torrent.createServer(0)
|
||||
server.listen(0, onListening)
|
||||
|
||||
function onListening () {
|
||||
var port = server.address().port
|
||||
var url = 'http://localhost:' + port + '/' + index
|
||||
var video = document.createElement('video')
|
||||
video.addEventListener('canplay', onCanPlay)
|
||||
|
||||
video.volume = 0
|
||||
video.src = url
|
||||
video.play()
|
||||
|
||||
function onCanPlay () {
|
||||
video.removeEventListener('canplay', onCanPlay)
|
||||
video.addEventListener('seeked', onSeeked)
|
||||
|
||||
video.currentTime = Math.min((video.duration || 600) * 0.03, 60)
|
||||
}
|
||||
|
||||
function onSeeked () {
|
||||
video.removeEventListener('seeked', onSeeked)
|
||||
|
||||
var buf = captureVideoFrame(video)
|
||||
|
||||
// unload video element
|
||||
video.pause()
|
||||
video.src = ''
|
||||
video.load()
|
||||
|
||||
server.destroy()
|
||||
|
||||
cb(null, buf)
|
||||
}
|
||||
}
|
||||
}
|
||||
260
main/menu.js
Normal file
260
main/menu.js
Normal file
@@ -0,0 +1,260 @@
|
||||
var electron = require('electron')
|
||||
var debug = require('debug')('webtorrent-app:menu')
|
||||
var windows = require('./windows')
|
||||
var config = require('./config')
|
||||
|
||||
function toggleFullScreen () {
|
||||
debug('toggleFullScreen')
|
||||
if (windows.main) {
|
||||
windows.main.setFullScreen(!windows.main.isFullScreen())
|
||||
onToggleFullScreen()
|
||||
}
|
||||
}
|
||||
|
||||
function onToggleFullScreen () {
|
||||
getMenuItem('Full Screen').checked = windows.main.isFullScreen()
|
||||
}
|
||||
|
||||
// Sets whether the window should always show on top of other windows
|
||||
function toggleAlwaysOnTop () {
|
||||
debug('toggleAlwaysOnTop %s')
|
||||
if (windows.main) {
|
||||
windows.main.setAlwaysOnTop(!windows.main.isAlwaysOnTop())
|
||||
getMenuItem('Float on Top').checked = windows.main.isAlwaysOnTop()
|
||||
}
|
||||
}
|
||||
|
||||
function toggleDevTools () {
|
||||
debug('toggleDevTools')
|
||||
if (windows.main) {
|
||||
windows.main.toggleDevTools()
|
||||
}
|
||||
}
|
||||
|
||||
function reloadWindow () {
|
||||
debug('reloadWindow')
|
||||
if (windows.main) {
|
||||
config.startTime = Date.now()
|
||||
windows.main.webContents.reloadIgnoringCache()
|
||||
}
|
||||
}
|
||||
|
||||
function getMenuItem (label) {
|
||||
for (var i = 0; i < appMenu.items.length; i++) {
|
||||
var menuItem = appMenu.items[i].submenu.items.find(function (item) {
|
||||
return item.label === label
|
||||
})
|
||||
if (menuItem) return menuItem
|
||||
}
|
||||
}
|
||||
|
||||
function getMenuTemplate () {
|
||||
var template = [
|
||||
{
|
||||
label: 'File',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Create New Torrent...',
|
||||
accelerator: 'CmdOrCtrl+N',
|
||||
click: function () {
|
||||
electron.dialog.showOpenDialog({
|
||||
title: 'Select a file or folder for the torrent file.',
|
||||
properties: [ 'openFile', 'openDirectory', 'multiSelections' ]
|
||||
}, function (filenames) {
|
||||
if (!Array.isArray(filenames)) return
|
||||
windows.main.send('seed', filenames)
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Open Torrent File...',
|
||||
accelerator: 'CmdOrCtrl+O',
|
||||
click: function () {
|
||||
electron.dialog.showOpenDialog(windows.main, {
|
||||
title: 'Select a .torrent file to open.',
|
||||
properties: [ 'openFile', 'multiSelections' ]
|
||||
}, function (filenames) {
|
||||
if (!Array.isArray(filenames)) return
|
||||
filenames.forEach(function (filename) {
|
||||
windows.main.send('addTorrent', filename)
|
||||
})
|
||||
})
|
||||
}
|
||||
},
|
||||
{
|
||||
label: 'Open Torrent Address...',
|
||||
accelerator: 'CmdOrCtrl+U',
|
||||
click: function () { electron.dialog.showMessageBox({ message: 'TODO', buttons: ['OK'] }) }
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Close Window',
|
||||
accelerator: 'CmdOrCtrl+W',
|
||||
role: 'close'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Edit',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Cut',
|
||||
accelerator: 'CmdOrCtrl+X',
|
||||
role: 'cut'
|
||||
},
|
||||
{
|
||||
label: 'Copy',
|
||||
accelerator: 'CmdOrCtrl+C',
|
||||
role: 'copy'
|
||||
},
|
||||
{
|
||||
label: 'Paste Torrent Address',
|
||||
accelerator: 'CmdOrCtrl+V',
|
||||
role: 'paste'
|
||||
},
|
||||
{
|
||||
label: 'Select All',
|
||||
accelerator: 'CmdOrCtrl+A',
|
||||
role: 'selectall'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'View',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Full Screen',
|
||||
type: 'checkbox',
|
||||
accelerator: (function () {
|
||||
if (process.platform === 'darwin') return 'Ctrl+Command+F'
|
||||
else return 'F11'
|
||||
})(),
|
||||
click: toggleFullScreen
|
||||
},
|
||||
{
|
||||
label: 'Float on Top',
|
||||
type: 'checkbox',
|
||||
click: toggleAlwaysOnTop
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Reload',
|
||||
accelerator: 'CmdOrCtrl+R',
|
||||
click: reloadWindow
|
||||
},
|
||||
{
|
||||
label: 'Developer Tools',
|
||||
accelerator: (function () {
|
||||
if (process.platform === 'darwin') return 'Alt+Command+I'
|
||||
else return 'Ctrl+Shift+I'
|
||||
})(),
|
||||
click: toggleDevTools
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Window',
|
||||
role: 'window',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Minimize',
|
||||
accelerator: 'CmdOrCtrl+M',
|
||||
role: 'minimize'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
label: 'Help',
|
||||
role: 'help',
|
||||
submenu: [
|
||||
{
|
||||
label: 'Learn more about WebTorrent',
|
||||
click: function () { electron.shell.openExternal('https://webtorrent.io') }
|
||||
},
|
||||
{
|
||||
label: 'Contribute on GitHub',
|
||||
click: function () { electron.shell.openExternal('https://github.com/feross/webtorrent-app') }
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Report an Issue...',
|
||||
click: function () { electron.shell.openExternal('https://github.com/feross/webtorrent-app/issues') }
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
|
||||
if (process.platform === 'darwin') {
|
||||
var name = electron.app.getName()
|
||||
template.unshift({
|
||||
label: name,
|
||||
submenu: [
|
||||
{
|
||||
label: 'About ' + name,
|
||||
role: 'about'
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Services',
|
||||
role: 'services',
|
||||
submenu: []
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Hide ' + name,
|
||||
accelerator: 'Command+H',
|
||||
role: 'hide'
|
||||
},
|
||||
{
|
||||
label: 'Hide Others',
|
||||
accelerator: 'Command+Alt+H',
|
||||
role: 'hideothers'
|
||||
},
|
||||
{
|
||||
label: 'Show All',
|
||||
role: 'unhide'
|
||||
},
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Quit',
|
||||
accelerator: 'Command+Q',
|
||||
click: function () { electron.app.quit() }
|
||||
}
|
||||
]
|
||||
})
|
||||
|
||||
// Window menu
|
||||
template[4].submenu.push(
|
||||
{
|
||||
type: 'separator'
|
||||
},
|
||||
{
|
||||
label: 'Bring All to Front',
|
||||
role: 'front'
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
return template
|
||||
}
|
||||
|
||||
var appMenu = electron.Menu.buildFromTemplate(getMenuTemplate())
|
||||
|
||||
var menu = {
|
||||
appMenu: appMenu,
|
||||
onToggleFullScreen: onToggleFullScreen
|
||||
}
|
||||
|
||||
module.exports = menu
|
||||
@@ -1,22 +0,0 @@
|
||||
module.exports = App
|
||||
|
||||
var h = require('virtual-dom/h')
|
||||
|
||||
var Header = require('./header')
|
||||
var Player = require('./player')
|
||||
var TorrentList = require('./torrent-list')
|
||||
|
||||
function App (state, dispatch) {
|
||||
return h('.app', [
|
||||
Header(state, dispatch),
|
||||
h('.content', [
|
||||
(function () {
|
||||
if (state.view.url === '/') {
|
||||
return TorrentList(state, dispatch)
|
||||
} else if (state.view.url === '/player') {
|
||||
return Player(state, dispatch)
|
||||
}
|
||||
})()
|
||||
])
|
||||
])
|
||||
}
|
||||
@@ -1,43 +0,0 @@
|
||||
module.exports = Header
|
||||
|
||||
var h = require('virtual-dom/h')
|
||||
|
||||
function Header (state, dispatch) {
|
||||
return h('.header', [
|
||||
(function () {
|
||||
if (process.platform === 'darwin') {
|
||||
return h('.title', state.view.title)
|
||||
}
|
||||
})(),
|
||||
h('.nav.left', [
|
||||
h('i.icon.back', {
|
||||
onclick: onBack
|
||||
}, 'chevron_left'),
|
||||
h('i.icon.forward', {
|
||||
onclick: onForward
|
||||
}, 'chevron_right')
|
||||
]),
|
||||
(function () {
|
||||
if (state.url !== '/player') {
|
||||
return h('.nav.right', [
|
||||
h('i.icon.add', {
|
||||
onclick: onAddTorrent
|
||||
}, 'add')
|
||||
])
|
||||
}
|
||||
})()
|
||||
])
|
||||
|
||||
function onBack (e) {
|
||||
dispatch('back')
|
||||
}
|
||||
|
||||
function onForward (e) {
|
||||
dispatch('forward')
|
||||
}
|
||||
|
||||
function onAddTorrent (e) {
|
||||
var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d&dn=sintel.mp4'
|
||||
dispatch('addTorrent', torrentId)
|
||||
}
|
||||
}
|
||||
@@ -1,110 +0,0 @@
|
||||
module.exports = Player
|
||||
|
||||
var h = require('virtual-dom/h')
|
||||
var electron = require('electron')
|
||||
|
||||
function Player (state, dispatch) {
|
||||
// Unfortunately, play/pause can't be done just by modifying HTML.
|
||||
// Instead, grab the DOM node and play/pause it if necessary
|
||||
var videoElement = document.querySelector('video')
|
||||
if (videoElement !== null) {
|
||||
if (state.video.isPaused && !videoElement.paused) {
|
||||
videoElement.pause()
|
||||
} else if (!state.video.isPaused && videoElement.paused) {
|
||||
videoElement.play()
|
||||
}
|
||||
// When the user clicks or drags on the progress bar, jump to that position
|
||||
if (state.video.jumpToTime) {
|
||||
videoElement.currentTime = state.video.jumpToTime
|
||||
state.video.jumpToTime = null
|
||||
}
|
||||
state.video.currentTime = videoElement.currentTime
|
||||
state.video.duration = videoElement.duration
|
||||
}
|
||||
|
||||
// Show the video as large as will fit in the window, play immediately
|
||||
return h('.player', [
|
||||
h('video', {
|
||||
src: state.server.localURL,
|
||||
autoplay: true,
|
||||
onloadedmetadata: onLoadedMetadata
|
||||
}),
|
||||
renderPlayerControls(state, dispatch)
|
||||
])
|
||||
|
||||
// As soon as the video loads far enough to know the dimensions, resize the
|
||||
// window to match the video resolution
|
||||
function onLoadedMetadata (e) {
|
||||
var video = e.target
|
||||
var dimensions = {
|
||||
width: video.videoWidth,
|
||||
height: video.videoHeight
|
||||
}
|
||||
dispatch('setDimensions', dimensions)
|
||||
}
|
||||
}
|
||||
|
||||
// Renders all video controls: play/pause, scrub, loading bar
|
||||
// TODO: cast buttons
|
||||
function renderPlayerControls (state, dispatch) {
|
||||
var positionPercent = 100 * state.video.currentTime / state.video.duration
|
||||
return h('.player-controls', [
|
||||
h('.bottom-bar', [
|
||||
h('.loading-bar', renderLoadingBar(state)),
|
||||
h('.scrub-bar', {
|
||||
draggable: true,
|
||||
onclick: handleScrub,
|
||||
ondrag: handleScrub
|
||||
}),
|
||||
h('.playback-cursor', {
|
||||
style: {
|
||||
left: 'calc(' + positionPercent + '% - 4px)'
|
||||
}
|
||||
}),
|
||||
h('i.icon.play-pause', {
|
||||
onclick: () => dispatch('playPause')
|
||||
}, state.video.isPaused ? 'play_arrow' : 'pause')
|
||||
])
|
||||
])
|
||||
|
||||
// Handles a click or drag to scrub (jump to another position in the video)
|
||||
function handleScrub (e) {
|
||||
var windowWidth = electron.remote.getCurrentWindow().getBounds().width
|
||||
var fraction = e.clientX / windowWidth
|
||||
var position = fraction * state.video.duration /* seconds */
|
||||
dispatch('playbackJump', position)
|
||||
}
|
||||
}
|
||||
|
||||
// Renders the loading bar. Shows which parts of the torrent are loaded, which
|
||||
// can be "spongey" / non-contiguous
|
||||
function renderLoadingBar (state) {
|
||||
var torrent = state.view.torrentPlaying._torrent
|
||||
if (torrent === null) {
|
||||
return []
|
||||
}
|
||||
|
||||
// Find all contiguous parts of the torrent which are loaded
|
||||
var parts = []
|
||||
var lastPartPresent = false
|
||||
var numParts = torrent.pieces.length
|
||||
for (var i = 0; i < numParts; i++) {
|
||||
var partPresent = torrent.bitfield.get(i)
|
||||
if (partPresent && !lastPartPresent) {
|
||||
parts.push({start: i, count: 1})
|
||||
} else if (partPresent) {
|
||||
parts[parts.length - 1].count++
|
||||
}
|
||||
lastPartPresent = partPresent
|
||||
}
|
||||
|
||||
// Output an list of rectangles to show loading progress
|
||||
return parts.map(function (part) {
|
||||
return h('.loading-bar-part', {
|
||||
style: {
|
||||
left: (100 * part.start / numParts) + '%',
|
||||
width: (100 * part.count / numParts) + '%'
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
@@ -1,69 +0,0 @@
|
||||
module.exports = TorrentList
|
||||
|
||||
var h = require('virtual-dom/h')
|
||||
var prettyBytes = require('pretty-bytes')
|
||||
|
||||
function TorrentList (state, dispatch) {
|
||||
var torrents = state.view.client
|
||||
? state.view.client.torrents
|
||||
: []
|
||||
|
||||
var list = torrents.map((torrent) => renderTorrent(state, dispatch, torrent))
|
||||
return h('.torrent-list', list)
|
||||
}
|
||||
|
||||
// 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 (state, dispatch, torrent) {
|
||||
// Background image: show some nice visuals, like a frame from the movie, if possible
|
||||
var style = {}
|
||||
if (torrent.posterURL) {
|
||||
style['background-image'] = 'linear-gradient(to bottom, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%), url("' + torrent.posterURL + '")'
|
||||
}
|
||||
|
||||
// Foreground: name of the torrent, basic info like size, play button,
|
||||
// cast buttons if available, and delete
|
||||
var elements = [
|
||||
renderTorrentMetadata(torrent),
|
||||
h('i.icon.delete', {
|
||||
onclick: () => dispatch('deleteTorrent', torrent)
|
||||
}, 'close'),
|
||||
h('i.btn.icon.play', {
|
||||
className: !torrent.ready ? 'disabled' : '',
|
||||
onclick: () => dispatch('openPlayer', torrent)
|
||||
}, 'play_arrow')
|
||||
]
|
||||
if (state.view.chromecast) {
|
||||
elements.push(h('i.btn.icon.chromecast', {
|
||||
className: !torrent.ready ? 'disabled' : '',
|
||||
onclick: () => dispatch('openChromecast', torrent)
|
||||
}, 'cast'))
|
||||
}
|
||||
if (state.view.devices.airplay) {
|
||||
elements.push(h('i.btn.icon.airplay', {
|
||||
className: !torrent.ready ? 'disabled' : '',
|
||||
onclick: () => dispatch('openAirplay', torrent)
|
||||
}, 'airplay'))
|
||||
}
|
||||
|
||||
return h('.torrent', {style: style}, elements)
|
||||
}
|
||||
|
||||
// Renders the torrent name and download progress
|
||||
function renderTorrentMetadata (torrent) {
|
||||
return h('.metadata', [
|
||||
h('.name.ellipsis', torrent.name || 'Loading torrent...'),
|
||||
h('.status', [
|
||||
h('span.progress', Math.floor(100 * torrent.progress) + '%'),
|
||||
(function () {
|
||||
if (torrent.ready && torrent.files.length > 1) {
|
||||
return h('span.files', torrent.files.length + ' files')
|
||||
}
|
||||
})(),
|
||||
h('span', torrent.numPeers + ' ' + (torrent.numPeers === 1 ? 'peer' : 'peers')),
|
||||
h('span', prettyBytes(torrent.downloadSpeed) + '/s'),
|
||||
h('span', prettyBytes(torrent.uploadSpeed) + '/s')
|
||||
])
|
||||
])
|
||||
}
|
||||
47
main/windows.js
Normal file
47
main/windows.js
Normal file
@@ -0,0 +1,47 @@
|
||||
var electron = require('electron')
|
||||
var debug = require('debug')('webtorrent-app:windows')
|
||||
var config = require('./config')
|
||||
|
||||
var windows = {
|
||||
main: null,
|
||||
createMainWindow: createMainWindow
|
||||
}
|
||||
var isQuitting = false
|
||||
|
||||
electron.app.on('before-quit', function () {
|
||||
isQuitting = true
|
||||
})
|
||||
|
||||
function createMainWindow (menu) {
|
||||
windows.main = new electron.BrowserWindow({
|
||||
backgroundColor: '#282828',
|
||||
darkTheme: true,
|
||||
minWidth: 375,
|
||||
minHeight: 158,
|
||||
show: false,
|
||||
title: config.APP_NAME,
|
||||
titleBarStyle: 'hidden-inset',
|
||||
width: 450,
|
||||
height: 300
|
||||
})
|
||||
windows.main.loadURL(config.INDEX)
|
||||
windows.main.webContents.on('did-finish-load', function () {
|
||||
setTimeout(function () {
|
||||
debug('startup time: %sms', Date.now() - config.startTime)
|
||||
windows.main.show()
|
||||
}, 50)
|
||||
})
|
||||
windows.main.on('enter-full-screen', menu.onToggleFullScreen)
|
||||
windows.main.on('leave-full-screen', menu.onToggleFullScreen)
|
||||
windows.main.on('close', function (e) {
|
||||
if (process.platform === 'darwin' && !isQuitting) {
|
||||
e.preventDefault()
|
||||
windows.main.hide()
|
||||
}
|
||||
})
|
||||
windows.main.once('closed', function () {
|
||||
windows.main = null
|
||||
})
|
||||
}
|
||||
|
||||
module.exports = windows
|
||||
Reference in New Issue
Block a user