Skip to content

/ webtorrent

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Feature proposition] Allow to render a torrent into an existing element #425

Merged
merged 2 commits into from Dec 28, 2015
+201 −151
Merged

[Feature proposition] Allow to render a torrent into an existing element #425

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
76127d2
Rename 'append-to' to 'render'
valeriangalliat Sep 10, 2015
41dc75b
Implement 'render-to' method
valeriangalliat Sep 10, 2015
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

4 README.md
View file
Open in desktop
@@ -540,6 +540,10 @@ file.appendTo('#containerElement', function (err, elem) {
})
```

#### `file.renderTo(elem, function callback (err, elem) {})`

Like `file.appendTo` but renders directly into given element (or CSS selector).

#### `file.getBlobURL(function callback (err, url) {})`

Get a url which can be used in the browser to refer to the file.
169 lib/append-to.js
View file
Open in desktop
@@ -1,168 +1,35 @@
var debug = require('debug')('webtorrent:append-to')
var MediaSourceStream = require('mediasource')
var path = require('path')
var videostream = require('videostream')

var VIDEOSTREAM_EXTS = [ '.mp4', '.m4v', '.m4a' ]

var MEDIASOURCE_VIDEO_EXTS = [ '.mp4', '.m4v', '.webm' ]
var MEDIASOURCE_AUDIO_EXTS = [ '.m4a', '.mp3' ]
var MEDIASOURCE_EXTS = MEDIASOURCE_VIDEO_EXTS.concat(MEDIASOURCE_AUDIO_EXTS)

var AUDIO_EXTS = [ '.wav', '.aac', '.ogg', '.oga' ]
var IMAGE_EXTS = [ '.jpg', '.jpeg', '.png', '.gif', '.bmp' ]
var IFRAME_EXTS = [ '.css', '.html', '.js', '.md', '.pdf', '.txt' ]

var MediaSource = typeof window !== 'undefined' && window.MediaSource
var render = require('./render')

module.exports = function appendTo (file, rootElem, cb) {
if (!cb) cb = noop
var elem
var extname = path.extname(file.name).toLowerCase()
var currentTime = 0

if (rootElem && (rootElem.nodeName === 'VIDEO' || rootElem.nodeName === 'AUDIO')) {
throw new Error(
'Invalid video/audio node argument. Argument must be root element that ' +
'video/audio tag will be appended to.'
)
}

if (MEDIASOURCE_EXTS.indexOf(extname) >= 0) appendToMediaSource()
else if (AUDIO_EXTS.indexOf(extname) >= 0) appendToAudio()
else if (IMAGE_EXTS.indexOf(extname) >= 0) appendToImage()
else if (IFRAME_EXTS.indexOf(extname) >= 0) appendToIframe()
else nextTick(cb, new Error('Unsupported file type "' + extname + '": Cannot append to DOM'))

function appendToMediaSource () {
if (!MediaSource) {
return nextTick(cb, new Error(
'Video/audio streaming is not supported in your browser. You can still share ' +
'or download ' + file.name + ' (once it\'s fully downloaded). Use Chrome for ' +
'MediaSource support.'
))
}

var tagName = MEDIASOURCE_VIDEO_EXTS.indexOf(extname) >= 0 ? 'video' : 'audio'

if (VIDEOSTREAM_EXTS.indexOf(extname) >= 0) useVideostream()
else useMediaSource()

function useVideostream () {
debug('Use `videostream` package for ' + file.name)
createElem()
elem.addEventListener('error', fallbackToMediaSource)
elem.addEventListener('playing', onPlaying)
videostream(file, elem)
}

function useMediaSource () {
debug('Use MediaSource API for ' + file.name)
createElem()
elem.addEventListener('error', fallbackToBlobURL)
elem.addEventListener('playing', onPlaying)

file.createReadStream().pipe(new MediaSourceStream(elem, { extname: extname }))
if (currentTime) elem.currentTime = currentTime
}

function useBlobURL () {
debug('Use Blob URL for ' + file.name)
createElem()
elem.addEventListener('error', fatalError)
elem.addEventListener('playing', onPlaying)
file.getBlobURL(function (err, url) {
if (err) return fatalError(err)
elem.src = url
if (currentTime) elem.currentTime = currentTime
})
}

function fallbackToMediaSource (err) {
debug('videostream error: fallback to MediaSource API: %o', err.message || err)
elem.removeEventListener('error', fallbackToMediaSource)
elem.removeEventListener('playing', onPlaying)

useMediaSource()
}

function fallbackToBlobURL (err) {
debug('MediaSource API error: fallback to Blob URL: %o', err.message || err)
elem.removeEventListener('error', fallbackToBlobURL)
elem.removeEventListener('playing', onPlaying)

useBlobURL()
}

function createElem (time) {
if (!elem) {
elem = document.createElement(tagName)
elem.controls = true
elem.autoplay = true // for chrome
elem.play() // for firefox

elem.addEventListener('progress', function () {
currentTime = elem.currentTime
})

rootElem.appendChild(elem)
}
render(file, function (tagName) {
if (tagName === 'video' || tagName === 'audio') return createMedia(tagName)
else return createElem(tagName)
}, function (err, elem) {
if (err && elem) {
elem.remove()
}
}

function onPlaying () {
elem.removeEventListener('playing', onPlaying)
cb(null, elem)
}
cb(err, elem)
})

function appendToAudio () {
elem = document.createElement('audio')
function createMedia (tagName) {
var elem = createElem(tagName)
elem.controls = true
elem.autoplay = true
rootElem.appendChild(elem)
file.getBlobURL(function (err, url) {
if (err) return fatalError(err)
elem.addEventListener('error', fatalError)
elem.addEventListener('playing', onPlaying)
elem.src = url
elem.play()
})
elem.autoplay = true // for chrome
elem.play() // for firefox

This comment has been minimized.

Sign in to view
Copy link
@feross

feross Dec 28, 2015

Member

createMedia needs to append to the DOM too. Right now, only createElem does.
return elem
}

function appendToImage () {
file.getBlobURL(function (err, url) {
if (err) return fatalError(err)
elem = document.createElement('img')
elem.src = url
elem.alt = file.name
rootElem.appendChild(elem)
cb(null, elem)
})
}

function appendToIframe () {
file.getBlobURL(function (err, url) {
if (err) return fatalError(err)
elem = document.createElement('iframe')
elem.src = url
if (extname !== '.pdf') elem.sandbox = 'allow-forms allow-scripts'
rootElem.appendChild(elem)
cb(null, elem)
})
}

function fatalError (err) {
if (elem) elem.remove()
err.message = 'Error appending file "' + file.name + '" to DOM: ' + err.message
debug(err.message)
if (cb) cb(err)
function createElem (tagName) {
var elem = document.createElement(tagName)
rootElem.appendChild(elem)
return elem
}
}

function noop () {}

function nextTick (cb, err, val) {
process.nextTick(function () {
if (cb) cb(err, val)
})
}
12 lib/file.js
View file
Open in desktop
@@ -1,6 +1,7 @@
module.exports = File

var appendTo = require('./append-to')
var renderTo = require('./render-to')
var eos = require('end-of-stream')
var EventEmitter = require('events').EventEmitter
var FileStream = require('./file-stream')
@@ -130,3 +131,14 @@ File.prototype.appendTo = function (elem, cb) {
if (typeof elem === 'string') elem = document.querySelector(elem)
appendTo(this, elem, cb)
}

/**
* Render the file in an existing DOM element.
* @param {Element|string} elem
* @param {function} cb
*/
File.prototype.renderTo = function (elem, cb) {
if (typeof window === 'undefined') throw new Error('browser-only method')
if (typeof elem === 'string') elem = document.querySelector(elem)
renderTo(this, elem, cb)
}
17 lib/render-to.js
View file
Open in desktop
@@ -0,0 +1,17 @@
var path = require('path')
var render = require('./render')

module.exports = function renderTo (file, elem, cb) {
render(file, function (tagName) {
if (elem.nodeName !== tagName.toUpperCase()) {
var extname = path.extname(file.name).toLowerCase()

throw new Error(
'Cannot render "' + extname + '" inside a "' +
elem.nodeName.toLowerCase() + '" element, expected "' + tagName + '"'
)
}

return elem
}, cb)
}
150 lib/render.js
View file
Open in desktop
@@ -0,0 +1,150 @@
var debug = require('debug')('webtorrent:render')
var MediaSourceStream = require('mediasource')
var path = require('path')
var videostream = require('videostream')

var VIDEOSTREAM_EXTS = [ '.mp4', '.m4v', '.m4a' ]

var MEDIASOURCE_VIDEO_EXTS = [ '.mp4', '.m4v', '.webm' ]
var MEDIASOURCE_AUDIO_EXTS = [ '.m4a', '.mp3' ]
var MEDIASOURCE_EXTS = MEDIASOURCE_VIDEO_EXTS.concat(MEDIASOURCE_AUDIO_EXTS)

var AUDIO_EXTS = [ '.wav', '.aac', '.ogg', '.oga' ]
var IMAGE_EXTS = [ '.jpg', '.jpeg', '.png', '.gif', '.bmp' ]
var IFRAME_EXTS = [ '.css', '.html', '.js', '.md', '.pdf', '.txt' ]

var MediaSource = typeof window !== 'undefined' && window.MediaSource

module.exports = function render (file, getElem, cb) {
if (!cb) cb = noop
var elem
var extname = path.extname(file.name).toLowerCase()
var currentTime = 0

if (MEDIASOURCE_EXTS.indexOf(extname) >= 0) renderMediaSource()
else if (AUDIO_EXTS.indexOf(extname) >= 0) renderAudio()
else if (IMAGE_EXTS.indexOf(extname) >= 0) renderImage()
else if (IFRAME_EXTS.indexOf(extname) >= 0) renderIframe()
else nextTick(cb, new Error('Unsupported file type "' + extname + '": Cannot append to DOM'))

function renderMediaSource () {
if (!MediaSource) {
return nextTick(cb, new Error(
'Video/audio streaming is not supported in your browser. You can still share ' +
'or download ' + file.name + ' (once it\'s fully downloaded). Use Chrome for ' +
'MediaSource support.'
))
}

var tagName = MEDIASOURCE_VIDEO_EXTS.indexOf(extname) >= 0 ? 'video' : 'audio'

if (VIDEOSTREAM_EXTS.indexOf(extname) >= 0) useVideostream()
else useMediaSource()

function useVideostream () {
debug('Use `videostream` package for ' + file.name)
prepareElem()
elem.addEventListener('error', fallbackToMediaSource)
elem.addEventListener('playing', onPlaying)
videostream(file, elem)
}

function useMediaSource () {
debug('Use MediaSource API for ' + file.name)
prepareElem()
elem.addEventListener('error', fallbackToBlobURL)
elem.addEventListener('playing', onPlaying)

file.createReadStream().pipe(new MediaSourceStream(elem, { extname: extname }))
if (currentTime) elem.currentTime = currentTime
}

function useBlobURL () {
debug('Use Blob URL for ' + file.name)
prepareElem()
elem.addEventListener('error', fatalError)
elem.addEventListener('playing', onPlaying)
file.getBlobURL(function (err, url) {
if (err) return fatalError(err)
elem.src = url
if (currentTime) elem.currentTime = currentTime
})
}

function fallbackToMediaSource (err) {
debug('videostream error: fallback to MediaSource API: %o', err.message || err)
elem.removeEventListener('error', fallbackToMediaSource)
elem.removeEventListener('playing', onPlaying)

useMediaSource()
}

function fallbackToBlobURL (err) {
debug('MediaSource API error: fallback to Blob URL: %o', err.message || err)
elem.removeEventListener('error', fallbackToBlobURL)
elem.removeEventListener('playing', onPlaying)

useBlobURL()
}

function prepareElem () {
if (!elem) {
elem = getElem(tagName)

elem.addEventListener('progress', function () {
currentTime = elem.currentTime
})
}
}
}

function onPlaying () {
elem.removeEventListener('playing', onPlaying)
cb(null, elem)
}

function renderAudio () {
elem = getElem('audio')
file.getBlobURL(function (err, url) {
if (err) return fatalError(err)
elem.addEventListener('error', fatalError)
elem.addEventListener('playing', onPlaying)
elem.src = url
})
}

function renderImage () {
elem = getElem('img')
file.getBlobURL(function (err, url) {
if (err) return fatalError(err)
elem.src = url
elem.alt = file.name
cb(null)

This comment has been minimized.

Sign in to view
Copy link
@feross

feross Dec 28, 2015

Member

This should be cb(null, elem)
})
}

function renderIframe () {
elem = getElem('iframe')

file.getBlobURL(function (err, url) {
if (err) return fatalError(err)
elem.src = url
if (extname !== '.pdf') elem.sandbox = 'allow-forms allow-scripts'
cb(null, elem)
})
}

function fatalError (err) {
err.message = 'Error rendering file "' + file.name + '": ' + err.message
debug(err.message)
if (cb) cb(err)
}
}

function noop () {}

function nextTick (cb, err, val) {
process.nextTick(function () {
if (cb) cb(err, val)
})
}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.