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

valeriangalliat · 2015-09-10T16:41:49Z

Like file.appendTo, but taking an existing element as parameter, for example:

<img src="magnet:?xt=urn:btih:d2346c943f770eba4994e25fa7b478692bcf0064&amp;dn=test.png">

const WebTorrent = require('webtorrent')
const client = new WebTorrent()

Array.from(document.querySelectorAll('[src^=magnet:]')).forEach(elem =>
  client.add(elem.src, torrent =>
    torrent.files[0].renderTo(elem)
  )
)

See the Implement 'render-to' method commit to have a proper diff, because append-to.js was renamed to render.js and it's messing the full PR diff.

Related: #531.

valeriangalliat · 2015-11-08T08:40:21Z

Any comment on this feature?

summer4096 · 2015-11-09T15:17:09Z

I like it. I've wanted this myself.

RomanEmelyanov · 2015-12-22T05:56:21Z

I'm work under #531

render-to method does not include yet to main branch :(

Do you have the patch as standalone javascript file to include as the second after:
https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js
?

valeriangalliat · 2015-12-22T16:58:01Z

@feross I rebased the PR, ready to merge in master! I'd like a review and approval of other WebTorrent contributors before merging, do you know who to ping? Thanks. :)

summer4096 · 2015-12-22T17:34:40Z

lib/handle.js

+  }
+
+  function fatalError (err) {
+    err.message = 'Error appending file "' + file.name + '" to DOM: ' + err.message


This won't be accurate anymore, because "appending"

summer4096 · 2015-12-22T17:37:22Z

It looks pretty good to me, but if you don't mind a little unsolicited feedback, I'd call handle.js something different, maybe render.js, just to make it easier for newcomers to know where to look when exploring the source tree.

valeriangalliat · 2015-12-22T18:58:53Z

@devtristan Thanks for your comments, I fixed the error message and renamed handle.js to render.js, it indeed makes more sense.

* Update 'handle' (previously 'append-to') to take a 'getElem' function instead of directly a root element, allowing to custimize the element injection method, and without directly manipulating the DOM. * Reimplement 'append-to' using abstract 'handle' method. * Implement a 'render-to' method to render a torrent inside an existing element.

feross · 2015-12-28T13:01:15Z

lib/render.js

+      if (err) return fatalError(err)
+      elem.src = url
+      elem.alt = file.name
+      cb(null)


This should be cb(null, elem)

feross · 2015-12-28T13:13:44Z

@valeriangalliat Thanks for the good PR! It has a few issues (mentioned as inline comments), but I can fix those up after merge.

You rock!

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

@valeriangalliat

cc @valeriangalliat

feross · 2015-12-28T13:33:54Z

Released as 0.65.0.

valeriangalliat · 2015-12-28T14:50:45Z

Awesome, thanks for fixing the issues!

feross · 2015-12-28T16:15:48Z

No problem. Thanks for taking the initiative to fix the issue :) I really appreciate that.

RomanEmelyanov · 2015-12-29T07:26:23Z

Thanks a lot! Any plans to add "renderTo" method to "https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js" ?

feross · 2016-01-01T20:33:02Z

@RomanEmelyanov The new code should be available at that url. You might need to clear your cache to see it.

RomanEmelyanov · 2016-01-10T17:04:23Z

What I'm do wrong?
Tested on Google Chrome.

<html><head>
<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
</head><body><script>
var client = new WebTorrent()
var torrentId = 'magnet:?xt=urn:btih:6a9759bffd5c0af65319979fb7832189f4f3c35d'
client.add(torrentId, function (torrent) {
var file = torrent.files[0]
file.renderTo('#V1', function (err, elem) { // does not work :(
// file.appendTo('#V2', function (err, elem) { // works fine
 if (err) throw err
 console.log('New DOM node with the content', elem)
})

})
</script>
<div id="V2"></div>
<video id="V1"></video>
</body></html>

RomanEmelyanov · 2016-01-10T18:12:56Z

SOLVED: I'm forget to add "controls" and "autoplay" for <video id="V1"> tag, sorry to trouble

nextgenthemes · 2016-10-02T22:41:29Z

So if I put controls and autoplay on a element and you renderTo its the same as if I use opts on renderTo.

Also what does it do when the torrent file is not a video and I set it to render to a video tag?

feross · 2016-10-06T07:47:25Z

So if I put controls and autoplay on a element and you renderTo its the same as if I use opts on renderTo.

The default is true, so you don't need to set these options. I would rely on webtorrent to autoplay for you, since there are some browser differences. On Firefox, you have to explicitly call video.play() after the metadata has been added to the tag.

Also what does it do when the torrent file is not a video and I set it to render to a video tag?

It will try to put the file data into the video tag which will just make the video tag fire an 'error' event. I haven't tried it, but you can just try it and see.

nextgenthemes · 2016-10-06T15:57:42Z

@feross Thanks. But I need to disable autoplay and I was thinking it would be convenient to use renderTo in a video that my php code already generates that also has a class that I wanted to use. Now I am thinking this entire renderTo thing is probably a not so good idea and just complicates things.

Between the lines you answered my question with "No". So the renderTo is not smart to read the video tag attributes as opts and then doing kind of the same thing as appendTo. I feel more comfortable with the appendTo and opts I will just read from data-attributes now.

feross · 2016-10-08T02:26:52Z

You can disable autoplay by passing an { autoplay: false } option to either method.

nextgenthemes · 2016-10-08T17:29:39Z

I know and I do this now.

            // Stream the file in the browser
            torrent.files[0].appendTo( $container, {
                autoplay: $wrapper.hasAttribute('data-arve-autoplay'),
                controls: $wrapper.hasAttribute('data-arve-controls')
            } );

lock · 2018-05-04T03:50:16Z

This thread has been automatically locked because it has not had recent activity. To discuss futher, please open a new issue.

feross mentioned this pull request Dec 17, 2015

Support streaming media into existing video/audio tag #531

Closed

summer4096 reviewed Dec 22, 2015
View reviewed changes

Rename 'append-to' to 'render'

76127d2

feross reviewed Dec 28, 2015
View reviewed changes

lib/render.js

if (err) return fatalError(err)

elem.src = url

elem.alt = file.name

cb(null)

Copy link

Member

feross Dec 28, 2015

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This should be cb(null, elem)

feross added a commit that referenced this pull request Dec 28, 2015

Merge pull request #425 from valeriangalliat/feature/render-to

0210d55

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

feross merged commit 0210d55 into webtorrent:master Dec 28, 2015

feross added a commit that referenced this pull request Dec 28, 2015

bugfixes after PR #425

8dead08

cc @valeriangalliat

valeriangalliat deleted the feature/render-to branch December 28, 2015 14:49

lock bot locked as resolved and limited conversation to collaborators May 4, 2018

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

valeriangalliat commented Sep 10, 2015

valeriangalliat commented Nov 8, 2015

summer4096 commented Nov 9, 2015

RomanEmelyanov commented Dec 22, 2015

valeriangalliat commented Dec 22, 2015

summer4096 Dec 22, 2015

summer4096 commented Dec 22, 2015

valeriangalliat commented Dec 22, 2015

feross Dec 28, 2015

feross commented Dec 28, 2015

feross commented Dec 28, 2015

valeriangalliat commented Dec 28, 2015

feross commented Dec 28, 2015

RomanEmelyanov commented Dec 29, 2015

feross commented Jan 1, 2016

RomanEmelyanov commented Jan 10, 2016

RomanEmelyanov commented Jan 10, 2016

nextgenthemes commented Oct 2, 2016 •

edited

feross commented Oct 6, 2016 •

edited

nextgenthemes commented Oct 6, 2016

feross commented Oct 8, 2016

nextgenthemes commented Oct 8, 2016

lock bot commented May 4, 2018

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

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

Conversation

valeriangalliat commented Sep 10, 2015

valeriangalliat commented Nov 8, 2015

summer4096 commented Nov 9, 2015

RomanEmelyanov commented Dec 22, 2015

valeriangalliat commented Dec 22, 2015

summer4096 Dec 22, 2015

Choose a reason for hiding this comment

summer4096 commented Dec 22, 2015

valeriangalliat commented Dec 22, 2015

feross Dec 28, 2015

Choose a reason for hiding this comment

feross commented Dec 28, 2015

feross commented Dec 28, 2015

valeriangalliat commented Dec 28, 2015

feross commented Dec 28, 2015

RomanEmelyanov commented Dec 29, 2015

feross commented Jan 1, 2016

RomanEmelyanov commented Jan 10, 2016

RomanEmelyanov commented Jan 10, 2016

nextgenthemes commented Oct 2, 2016 • edited

feross commented Oct 6, 2016 • edited

nextgenthemes commented Oct 6, 2016

feross commented Oct 8, 2016

nextgenthemes commented Oct 8, 2016

lock bot commented May 4, 2018

nextgenthemes commented Oct 2, 2016 •

edited

feross commented Oct 6, 2016 •

edited