FSFE/fsfe-website
24
30
Fork 88
Code Issues 62 Pull Requests 10 Wiki Activity

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
Conversation 17 Commits 4 Files Changed 8 +35 -135
nico.rikken commented 2021-12-03 07:22:59 +00:00
Member
Copy Link

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

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>
nico.rikken added 1 commit 2021-12-03 07:23:00 +00:00
Replace Upcycle Android videos with embedded PeerTube videos
Some checks failed
continuous-integration/drone/pr Build is failing
Details
4127df736f 
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>
nico.rikken commented 2021-12-03 07:34:02 +00:00
Author
Member
Copy Link

Some additional work that still needs to be done:

  • Free codec support like .webm for embedded PeerTube video's
  • Proper size of the iframe, which currently has a fixed size
  • Get PeerTube to output the correct iframe code that includes the allow="fullframe" property instead of the deprecated allowfullframe 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!

Some additional work that still needs to be done: - [ ] Free codec support like .webm for embedded PeerTube video's - [ ] Proper size of the iframe, which currently has a fixed size - [x] Get PeerTube to output the correct iframe code that includes the `allow="fullframe"` property instead of the deprecated `allowfullframe` which also triggers linting errors. This will probably require an upstream change at PeerTube in the generator code: https://github.com/Chocobozzz/PeerTube/blob/3edbafb6377cfb65bca3964d46fa27bc9f813300/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!
nico.rikken added 1 commit 2021-12-03 08:53:21 +00:00
Use new method to allow fullscreen
Some checks failed
continuous-integration/drone/pr Build is failing
Details
ce8a79c3b2 
PeerTube provides the `allowfullscreen` property in the suggested embedding
code, whereas `allow="fullscreen"` is the new method:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-allowfullscreen

Also the previous method by PeerTube was causing issues with the linter used for
validating the code on the website.

Signed-off-by: Nico Rikken <nico.rikken@fsfe.org>
nico.rikken added 1 commit 2021-12-03 08:58:01 +00:00
Remove remaining </video> tag that should have been removed
All checks were successful
continuous-integration/drone/pr Build is passing
Details
629612c667 
In the initial commit one `</video>` was left, this is now removed.

Signed-off-by: Nico Rikken <nico.rikken@fsfe.org>
max.mehl commented 2021-12-03 14:03:40 +00:00
Owner
Copy Link

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

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
👍 1
nico.rikken commented 2021-12-03 16:30:58 +00:00
Author
Member
Copy Link

I've already made the change for PeerTube locally, I now have to test it before making an upstream pull request.

I've already made the change for PeerTube locally, I now have to test it before making an upstream pull request.
nico.rikken commented 2021-12-04 20:44:38 +00:00
Author
Member
Copy Link

Turns out a newer version of PeerTube (at least develop branch) will generate XML-valid code allowfullscreen="", 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.

Turns out a newer version of PeerTube (at least `develop` branch) will generate XML-valid code `allowfullscreen=""`, 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.
nico.rikken commented 2021-12-04 21:31:04 +00:00
Author
Member
Copy Link

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 the look/elements/figure.less style.

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 the `look/elements/figure.less` style.
nico.rikken commented 2021-12-05 08:59:12 +00:00
Author
Member
Copy Link

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.

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.
nico.rikken commented 2021-12-05 09:18:20 +00:00
Author
Member
Copy Link

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:

  • PeerTube is MP4 by default.
  • MP4 will remain the default as this works on most browsers and so is a good default for the federation PeerTube values.
  • Transcoding profiles can now be added (doc) although I'm not sure at what stage the transcoding is done (upload, federation, live while streaming).
  • Webm is not an easy format for streaming video
    • It does not work well with seeking (selecting a point in time and expect the player to play from there).
    • Supporting different codec streams requires DASH (MDN doc) which can be a challenge to implement apparently.
  • AV1 is an upcoming codec supposed to solve these issues, but already it seems that Apple is choosing a different route for their Safari browsers, so it might not become the default for PeerTube. Also AV1 requires quite some server performance for encoding the videos.
  • The config from this comment should probably work to get VP9/Opus streams, even for different bitrates if needed.

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?

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: * PeerTube is MP4 by default. * MP4 will remain the default as this works on most browsers and so is a good default for the federation PeerTube values. * Transcoding profiles can now be added ([doc](https://docs.joinpeertube.org/contribute-plugins?id=add-new-transcoding-profiles)) although I'm not sure at what stage the transcoding is done (upload, federation, live while streaming). * Webm is not an easy format for streaming video * It does not work well with seeking (selecting a point in time and expect the player to play from there). * Supporting different codec streams requires DASH ([MDN doc](https://developer.mozilla.org/en-US/docs/Web/Media/DASH_Adaptive_Streaming_for_HTML_5_Video)) which can be a challenge to implement apparently. * AV1 is an upcoming codec supposed to solve these issues, but already it seems that Apple is choosing a different route for their Safari browsers, so it might not become the default for PeerTube. Also AV1 requires quite some server performance for encoding the videos. * The config from [this comment](https://github.com/Chocobozzz/PeerTube/issues/481#issuecomment-887754331) should probably work to get VP9/Opus streams, even for different bitrates if needed. 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?
nico.rikken commented 2021-12-05 17:46:56 +00:00
Author
Member
Copy Link

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.

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](https://getbootstrap.com/docs/4.6/utilities/embed/#aspect-ratios)). The current Bootstrap v5.1 contains the aspect-ratio helper ([doc](https://getbootstrap.com/docs/5.1/helpers/ratio/)) 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.
nico.rikken added 1 commit 2021-12-05 19:57:49 +00:00
Scaling video elements
All checks were successful
continuous-integration/drone/pr Build is passing
Details
ffc53e435b 
Proof of concept of scaling video iframes. It needs rework on the styles to
get this behavior by default.
nico.rikken commented 2021-12-05 20:06:54 +00:00
Author
Member
Copy Link

I got the scaling to work, now it needs to be put into CSS.

I got the scaling to work, now it needs to be put into CSS.
nico.rikken commented 2021-12-06 06:53:11 +00:00
Author
Member
Copy Link

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 class max-width-70 that was already defined:

<figure class="max-width-70" style="left: 0; height: 0; width: 100%; position: relative; padding-bottom: 56.25%; max-width=70% !important;">
    <iframe sandbox="allow-same-origin allow-scripts allow-popups" title="About Upcycling Android" src="https://media.fsfe.org/videos/embed/9f8588b3-51b1-43a7-91c2-81fa2aa2cf75" allow="fullscreen" style="position:absolute;top:0;left:0;width:100%;height:100%;max-width=70%;" frameborder="0"></iframe>
  </figure>

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?

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 class `max-width-70` that was already defined: ```html <figure class="max-width-70" style="left: 0; height: 0; width: 100%; position: relative; padding-bottom: 56.25%; max-width=70% !important;"> <iframe sandbox="allow-same-origin allow-scripts allow-popups" title="About Upcycling Android" src="https://media.fsfe.org/videos/embed/9f8588b3-51b1-43a7-91c2-81fa2aa2cf75" allow="fullscreen" style="position:absolute;top:0;left:0;width:100%;height:100%;max-width=70%;" frameborder="0"></iframe> </figure> ``` 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?
Schermafdruk van 2021-12-06 07-47-20.png
574 KiB
Schermafdruk van 2021-12-06 07-47-20.png
max.mehl commented 2021-12-06 09:38:26 +00:00
Owner
Copy Link

Phew, thanks for your extensive research!

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?

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).

Phew, thanks for your extensive research! > 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? 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).
max.mehl commented 2021-12-06 09:39:54 +00:00
Owner
Copy Link

I'm not sure if we want Webm or VP9/Opus. Regardless, we should read up on transcoding profiles and test it out.

@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'm not sure if we want Webm or VP9/Opus. Regardless, we should read up on transcoding profiles and test it out. @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.
max.mehl commented 2021-12-06 09:41:23 +00:00
Owner
Copy Link

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 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.

> 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](https://getbootstrap.com/docs/4.6/utilities/embed/#aspect-ratios)). The current Bootstrap v5.1 contains the aspect-ratio helper ([doc](https://getbootstrap.com/docs/5.1/helpers/ratio/)) 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 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.
reinhard commented 2021-12-06 09:59:52 +00:00
Member
Copy Link

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...

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...
max.mehl commented 2021-12-06 10:36:27 +00:00
Owner
Copy Link

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.

> 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](https://fsfe.org/news/2021/news-20211206-01.html).
nico.rikken commented 2021-12-08 19:53:09 +00:00
Author
Member
Copy Link

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:

  • UI for selecting subtitles (and maybe even audio language in the future? )
  • Dynamic adjustment of bitrate for low bandwidth connections
  • Automatic thumbnail handling (to me it seems the generated thumbnail is on a random URL) rather than having to do that ourselves
  • Play counts

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.

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: * UI for selecting subtitles (and maybe even audio language in the future? ) * Dynamic adjustment of bitrate for low bandwidth connections * Automatic thumbnail handling (to me it seems the generated thumbnail is on a random URL) rather than having to do that ourselves * Play counts 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 https://git.fsfe.org/fsfe-system-hackers/peertube/issues/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.
max.mehl commented 2021-12-13 15:25:50 +00:00
Owner
Copy Link

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 :)

> So I think https://git.fsfe.org/fsfe-system-hackers/peertube/issues/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 :)
All checks were successful
continuous-integration/drone/pr Build is passing
Required
Details
This pull request has changes conflicting with the target branch.
  • activities/upcyclingandroid/upcyclingandroid.de.xhtml
  • activities/upcyclingandroid/upcyclingandroid.el.xhtml
  • activities/upcyclingandroid/upcyclingandroid.en.xhtml
  • activities/upcyclingandroid/upcyclingandroid.es.xhtml
  • activities/upcyclingandroid/upcyclingandroid.fr.xhtml
  • activities/upcyclingandroid/upcyclingandroid.it.xhtml
  • activities/upcyclingandroid/upcyclingandroid.nl.xhtml
  • activities/upcyclingandroid/upcyclingandroid.tr.xhtml
View command line instructions.

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin feature/peertube-for-upcycle-android:feature/peertube-for-upcycle-android
git checkout feature/peertube-for-upcycle-android
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels   
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
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?