Replace Upcycle Android videos with embedded PeerTube videos #2338
No reviewers
Labels
No Label
bug
build
cgi Scripting
design
disruptive
documentation
duplicate
easy
feature-request
help wanted
javascript
priority/low
question
system-hackers
tagging
text
translations
wait/bugfix
wait/inprogress
wait/misc
wait/proofread
wontfix
xsl
No Milestone
No Assignees
3 Participants
Notifications
Due Date
No due date set.
Dependencies
No dependencies set.
Reference: FSFE/fsfe-website#2338
Loading…
Reference in New Issue
No description provided.
Delete Branch "feature/peertube-for-upcycle-android"
Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?
As discussed on the system-hackers mailinglist, here is the idea to replace the
videos imports from download.fsfe.org. The German translation has the German
video embedded. Non-English pages have the English video with the subtitles of
the corresponding language.
This is just an initial commit, there is more work to be done to ensure the
experience is up to par with the previous experience.
Signed-off-by: Nico Rikken nico.rikken@fsfe.org
Some additional work that still needs to be done:
allow="fullframe"property instead of the deprecatedallowfullframewhich also triggers linting errors. This will probably require an upstream change at PeerTube in the generator code:3edbafb637/client/src/assets/player/utils.ts (L53)One further consideration is the fact that PeerTube uses Peer To Peer technology for downloading the video. This means that there is network traffic besides the direct connection between the visitor and the FSFE. I think this is fine, especially with the warning message "Watching this video may reveal your IP address to others".
Also there is a suggestion that PeerTube should be able to include multiple audio tracks with video's. I think this is something we as FSFE should watch, and perhaps even contribute to: https://github.com/Chocobozzz/PeerTube/issues/939 That would mean we could have a single video on PeerTube and you could select both the subtitle and audio track language. That would be cool!
Would it also be an option to just use the download URL of the video, so in this example: https://media.fsfe.org/download/streaming-playlists/hls/videos/e972f711-d7e4-479c-9e1f-e17c5039dbe7-1080-fragmented.mp4
As far as I can tell, this doesn't share the IP p2p then, and we can control all size related things with the normal HTML5 video tag as before, right?
Cc @alvar
I've already made the change for PeerTube locally, I now have to test it before making an upstream pull request.
Turns out a newer version of PeerTube (at least
developbranch) will generate XML-valid codeallowfullscreen="", but I submitted an even more modern version regardless: https://github.com/Chocobozzz/PeerTube/pull/4606 As the linting issue will dissappear either way, I'll check that off.I found this blogpost that clearly explains how to get a scaling iframe: https://jameshfisher.com/2017/08/30/how-do-i-make-a-full-width-iframe/
Currently the video is placed inside an
<figure>element, but perhaps it could be separated, something to think about. But I can try to add the necessary iframe CSS properties in thelook/elements/figure.lessstyle.With regards to the iframe scaling, this Stackoverflow post also has some clear hints on how to do it https://stackoverflow.com/questions/7737557/how-can-i-make-the-youtube-player-scale-to-the-width-of-the-page-but-also-keep-t One suggestion was to use the CSS
vwmetric, but as we deal with margins and some relative scaling, I don't see how I could make that work.If I understand correctly we use some parts of Bootstrap on the website, so perhaps the
ratioclass can be used: https://getbootstrap.com/docs/5.1/helpers/ratio/ which handles this situation out of the box.On the topic of supporting other codecs which are Free, there is already a lengthy discussion on the PeerTube GitHub project: https://github.com/Chocobozzz/PeerTube/issues/481 And in particular for Webm there is this outstanding issue: https://github.com/Chocobozzz/PeerTube/issues/4356
My main takeaways are:
I'm not sure if we want Webm or VP9/Opus. Regardless, we should read up on transcoding profiles and test it out.
Perhaps we have contacts with experienced PeerTube hosters that have already figured this out?
It seems the FSFE website uses Bootstrap v3.4.1 which does not contain helpers for embedding iframes and keeping the aspect ratio. Bootstrap v4.6 contains the embed to help with this (doc). The current Bootstrap v5.1 contains the aspect-ratio helper (doc) which seems to be the best option. Would it make sense to update the Bootstrap framework to get some functionality to help with this? Otherwise we can include some custom CSS inspired by the suggestions I linked earlier.
I got the scaling to work, now it needs to be put into CSS.
Hmm, turns out the autoscaling worked, but it didn't properly respect the
max-width=70% !importantrule. I modified the HTML to achieve that by relying on the figure classmax-width-70that was already defined:As can be seen in the attached screenshot, this works well with the width, but the automatic scaling now fails for the height, which is kept to a size as if the video was 100% of the width. I'm not sure if this is fixable.
Perhaps the better solution is to ditch the iframe altogether and try to embed the necessary code of the PeerTube video player (CSS, Javascript) in the FSFE website itself?
Phew, thanks for your extensive research!
Seems to be a good option to me as well.
I'd come back to my earlier comment: do we need the peertube player anyway, or would the standard HTML5 player be sufficient? All I can think of is that it would not natively show the subtitles added via peertube, but perhaps that can somehow be added?
With XSL, we can limit the amount of XML that has to be added to the XHTML files as soon as everything follows a certain logic (e.g. the name of the subtitles derived from the ID of the video).
@alvar opened this issue: fsfe-system-hackers/peertube#12. I suggest we discuss the encoding things there. That said, I think we should offer an unpatented version in any case as the FSFE.
I know that @reinhard also was keen on having a more recent bootstrap version. Shall we outsource that to a separate issue? I think it's not trivial as we may have to rearrange a few layouts.
As the design is also used on different sites like my.fsfe.org, this may also cause some issues potentially.
The update to a new bootstrap version will probably be a huge task because of the many custom classes we have, some of them in CSS files and some embedded in a single page, some used globally and some used only on one or two pages, and on top of this some inline styles...
Yep, a lot of technical debt. Perhaps a task for a future web working student.
I'm not sure if a bootstrap update will solve the
max-widthissue that still remains, but regardless it might be nice being able to use newer features.I think the PeerTube player would be preferred over just using the download URL:
I'm not sure how easy it will to embed the PeerTube player. It seems to me that there will be a dependency introduced where certain Javascript and CSS will have to be copied over or linked from the correct version of the PeerTube instance to show it. Normally the iframe would solve that of course, but that doesn't fit in the website so well.
Just using the download URLs could still be a good start to take it one step at a time.
In that regard I think Webm is the most important one before we can rely on PeerTube for the 'upload and transcode' part, and so we'll have to fiddle with the PeerTube config to enable other codecs.
So I think fsfe-system-hackers/peertube#12 would be the first step. (I don't have permissions to view it, I'm just linking it from the earlier comment by Max). If that doesn't work, it doesn't seem worth continuing.
Oh, that was a mistake, or leftover from the first development steps. It's public now :)