Replace Upcycle Android videos with embedded PeerTube videos #2338
Open
nico.rikken
wants to merge 4 commits from
feature/peertube-for-upcycle-android
into master
pull from: feature/peertube-for-upcycle-android
merge into: FSFE:master
FSFE:master
FSFE:ADD-event-20241227-01-01-ae6b3f2589884c18
FSFE:news-20241125-yh4f
FSFE:20241122-banner
FSFE:ADD-event-20250123-01-01-327fc15e4e0a920f
FSFE:ADD-event-20250123-01-01-9f683753335404e9
FSFE:ADD-event-20250123-01-01-71f2d2b04a9566b7
FSFE:20241115-event
FSFE:ADD-event-20241116-01-01-76520e0c3eb53736
FSFE:ilovefs-add-sharepic-25
FSFE:ADD-event-20241214-01-01-4e6b0de6ec6769b9
FSFE:ADD-event-20241214-01-01-6faf333779c63c9a
FSFE:ADD-event-20241214-01-01-b28016d5d37bcb1d
FSFE:ADD-event-20241214-01-01-cfd07879ebd40cc0
FSFE:ADD-event-20241214-01-01-a6198dcb1e85c939
FSFE:ADD-event-20241214-01-01-77e285dc27cb7c71
FSFE:ADD-event-20241214-01-01-0e9a153a423c7709
FSFE:ADD-event-20241214-01-01-a0990cbdebfe5e64
FSFE:ADD-event-20241214-01-01-4393373d9bb1a24e
FSFE:ADD-event-20241214-01-01-7a0e8b06698ebb62
FSFE:ADD-event-20241214-01-01-064c258df88a63b2
FSFE:YH4F-redirect-feedback
FSFE:IT-Ada-and-Zangemann-movie
FSFE:ADD-event-20241123-01-01-384b7d33dda1fc54
FSFE:ADD-event-20241123-01-01-b15d879bd9272915
FSFE:ADD-event-20241123-01-01-e8b31a550bc212f6
FSFE:ADD-event-20241123-01-01-8429a03d21c80ae1
FSFE:ADD-event-20241123-01-01-05508c204c08b0b7
FSFE:ADD-event-20241123-01-01-4c832e7a0a84c4a2
FSFE:ADD-event-20241123-01-01-9f8653652bff4df3
FSFE:ADD-event-20241123-01-01-60356954426adffc
FSFE:ADD-event-20241123-01-01-4ce9219adcda70bf
FSFE:ADD-event-20241108-09-01-955184905d2fa7d5
FSFE:ADD-event-20241108-09-01-b280188b23e56995
FSFE:ADD-event-20241108-09-01-48afd3272d58222f
FSFE:ADD-event-20241029-01-01-14c6b9f34f60e9cd
FSFE:ADD-event-20241123-01-01-a2a47df97909f496
FSFE:ADD-event-20241123-01-01-73d1c1db19cc618e
FSFE:ADD-event-20241123-01-01-bc9126aa3e0374f7
FSFE:ADD-event-20241123-01-01-b93648d44b18be46
FSFE:ADD-event-20241123-01-01-44acbc3f972d66ca
FSFE:ADD-event-20241108-02-01-907c441ceea25d9e
FSFE:ADD-event-20241108-02-01-4943d5db2b3b5dd8
FSFE:ADD-event-20241108-02-01-d8a92aef4cfb6b82
FSFE:ADD-event-20241108-02-01-09cce142e5a4ae5b
FSFE:ADD-event-20241108-02-01-8d47b1f5ee32eca3
FSFE:ADD-event-20241108-02-01-1d8690247e544459
FSFE:ADD-event-20241109-04-01-12baab869e9475f4
FSFE:ADD-event-20240811-01-01-51aeaa81e341feea
FSFE:ADD-event-20240811-01-01-8fbf446e1343a477
FSFE:ADD-event-20240811-01-01-a55fc7e264c27300
FSFE:ADD-event-20250117-01-01-09ae509e82d8eb9b
FSFE:test
FSFE:ADD-event-20240811-01-01-187e472a4f0dc3cb
FSFE:ADD-event-20240811-01-01-eb255a21f86e09d0
FSFE:YH4F-registration-update-date
FSFE:linuxdaytypo
FSFE:ADD-event-20241010-01-01-8bd4e759869302e3
FSFE:YH4F-typo-activity
FSFE:ADD-event-20241008-01-01-a161723e0d346df1
FSFE:ADD-event-20241010-01-01-08b62bee7fcc13f5
FSFE:news-20240923-yearly
FSFE:news-20240923-yearreport
FSFE:ADD-event-20240912-01-01-cdbb291be118f46c
FSFE:newsletter-20240909
FSFE:html-timeline
FSFE:nix-develop
FSFE:news.20240828-ngi
FSFE:20240816_froscon_event_update
FSFE:20240813-yh4f
FSFE:news-update-on-programming-period-and-new-sponsor
FSFE:news-20240809-apple
FSFE:pdfreaders-deprecate
FSFE:events-20240530
FSFE:anaghz-patch-3
FSFE:anaghz-patch-4
FSFE:SFP024-ilovefs-episode
FSFE:ilovefs_typo
FSFE:ilovefs24-events-patch-1
FSFE:compare-xml-structure
FSFE:followup-default-mail
No reviewers
Labels
Clear labels
Requires careful coordination and documentation changes
bug
build
cgi Scripting
design
disruptive
Requires careful coordination and documentation changes
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 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
Milestone
Clear milestone
No items
No Milestone
Assignees
Clear assignees
No Assignees
3 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.
No due date set.
Dependencies
No dependencies set.
Reference: FSFE/fsfe-website#2338
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
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 deprecatedallowfullframe
which 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
develop
branch) 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.less
style.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
vw
metric, 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
ratio
class 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% !important
rule. I modified the HTML to achieve that by relying on the figure classmax-width-70
that 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-width
issue 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 :)
Checkout
From your project repository, check out a new branch and test the changes.