openzim / openedx

Open edX (to zim) scraper
GNU General Public License v3.0
8 stars 7 forks source link

Add videojs based audio player to handle audio #93

Closed satyamtg closed 4 years ago

satyamtg commented 4 years ago

This fixes #75 and #76 by having a new videojs based audio player HTML template to which page redirects instead of directly the mp3 file. Also this fixes the video template to correctly have the path to ogvjs. Previously the relative root path was not prepended there. Also, these changes required a new parameter in dl_dependencies_and_fix_links() to have the proper relative path from HTML to the root, so a new parameter root_from_html has been introduced and method calls are changed accordingly. The relative_dots() function is dropped in link rewriting as we now pass the path to root from the call.

satyamtg commented 4 years ago

I understand you write a new HTML page for each audio file, which is basically the videojs player. What I don't see is how this is used? You mention a redirect which is not clear. Is it a link to that separate file? Is this an iframe? Could you share screenshots of what it looks like online versus with this?

The page on the online instance has just an anchor tag that links to the *.mp3 file and allows the browser to handle that (which opens in a new tab). So I create HTML pages with the player instead and by clicking on the anchor link in the course page, we go to the HTML, in (a new tab or the same tab is handled by the target attribute of the anchor). Here's a screenshot of the course - Screenshot from 2020-07-28 19-49-00

And here's the player that the links redirect to (notice it has opened in a new tab)- Screenshot from 2020-07-28 19-49-09

In the online mode there's no player. It's just the browser handling the MP3 directly

rgaudin commented 4 years ago

Why not using that template inline instead of in a separate page

satyamtg commented 4 years ago

Why not using that template inline instead of in a separate page

Because those anchor links may be on a text, or an Icon. Like in the page for which I showed the screenshot, it's both on the word "listen" and the speaker icon. So, we would need to check the neighboring elements so that it's not displayed twice (if we keep it inline). A popup may be an option though, but I didn't do it as I thought 3 things -

  1. The instance behaviour doesn't have a popup
  2. We would manually need to clean up the attributes (target and href) for the anchor tag
  3. What if the button/text says something else than listen (maybe download) But a popup is still doable I think if we don't want an extra tab. What do you think?