Compare revisions

Richard Zameitat · Richard Zameitat · Richard Zameitat · Richard Zameitat · Richard Zameitat · Richard Zameitat
--- a/README.md
+++ b/README.md
 About This Software
-------------------
+===================
 **WARNING:** This extension is neither …
-  - packaged
+  - ~~packaged~~  (should be by now)
  - thouroughly testes
  - approved or endorsed by RWTH or FSMPI
  - well supported
@@ -13,17 +13,17 @@ About This Software
 Further development is necessary and will take place when I find some more free time …
-### does it have a name?
+## does it have a name?
 Not really … at least nothing that I'd consider final.
 Nevertheless, in the code it is called _Open Excellence Media_  or for short **OEM**.
-### what is it good for?
+## what is it good for?
-Most videos (eg. lecture recordings) embedded in RWTH Aachen University's moodle are hosted on an OpenCast.
+Most videos (eg. lecture recordings) embedded in RWTH Aachen University's moodle are hosted on an OpenCast instance.
 These videos are usually embedded using an iframe, which makes it (intentionally) hard to download them for offline use.
 This extension want's to help by liberating lecture recordings and other videos provided in this rather restrictive manner.
@@ -31,29 +31,64 @@ This extension want's to help by liberating lecture recordings and other videos
 How?
 By placing a bow with direct links to the videos above them.
-### reasons for downloading vidoes
+## reasons for downloading vidoes
  - a bad internet connection (streaming feels like 90% buffering and 10% watching)
  - learning on the train, at the beach, in the park, … you get it
  - personal archive to re-watch lecture contents in a few semesters (relevant for exams, personal interest, …)
  - …
-### where to get it?
+## how to use it
+This is, how it should (approximately) look:
+![Partial screenshot of a (dummy) course page showing the download link inserted by this add-on.
+Text: "Download video: Lecture Fundamentals of applied theoretical sciences"
+Below are the links: "640x360 (mp4)", "1280x720 (mp4)", and "1920x1080 (mp4)".](https://git.fsmpi.rwth-aachen.de/moodleOpenCastDownloads/ff-ext/-/raw/_static-resources/images/screenshot-buttons.png)
+  - The text "Download video: $nameOfVideo" should appear below each embedded video.
+  - It should be possible to simply click on it, which should reveal a set of links.
+  - These should be direct links to video files (with the displayed resolution).
+  - Hover (on desktop, probably long-press on mobile? didn't try that) a link to see more details.
+## where to get it?
 Sadly, this extension was not accepted into Mozilla's offizial addon gallery, because the target audience is too limited.
 Nevertheless it is possible to get extensions signed by Mozilla and self-distribute them.
 (With a bit of luck even automated updates should work just fine.)
-You should (hopefully) be able to get the latest version from <https://dev.sudo42.de/public/ff-addons/openexcellencemedia-latest.xpi>.
+### downloads, with caveats _\*sigh\*_
-The [releases page of this project](https://git.fsmpi.rwth-aachen.de/moodleOpenCastDownloads/ff-ext/-/releases) should contain them as well.
+tl;dr: Use the source, or [visit the download/install site](https://dev.sudo42.de/public/ff-addons/oem.html).\
+Read below for slightly more in-depth information.
+#### external site
+~~You should (hopefully) be able to directly download the latest version from:\
+<https://dev.sudo42.de/public/ff-addons/openexcellencemedia-latest.xpi>\
+**Caveat:**
+Simply clicking the link is unlikely to work.
+Firefox seems to block installations of extensions, if a link does not point to the same domain.\
+I'm sorry … please just copy it and open the page yourself.~~
+**Update (and potential solution for the caveat described above):**\
+Here is a simple page with the sole purpose of being on the same domain as the extension file it links to:\
+<https://dev.sudo42.de/public/ff-addons/oem.html>\
+(This should kinda work around the problem mentioned above.
+Slightly more information is provided over there.)
+#### from here
+The [releases page of this project](https://git.fsmpi.rwth-aachen.de/moodleOpenCastDownloads/ff-ext/-/releases) should contain them as well.\
+**Caveat:**
+This one has caveats as well: GitLab will usually deliver the files in a way, that they are downloaded instead of prompting for installtion.\
+You should nevertheless be able to install the downloaded file from Firefox's addon page.
+### grab the source
 And, of course, you can build this extension from source on your own.
 Or modify it to work as user script.
 This project is licensed unser EUPL, so feel free to use, read, adapt, or share the code.
-### 2do
+## 2do
  - [X] going to bed
-  - [ ] styling (I love CSS, not joking here!)
+  - [ ] styling (I love CSS, not joking here! **Update:** A little bit of css is present. Should work for now.)
-  - [ ] adding links in video-only tabs, too
+  - [X] adding links in video-only tabs, too
-  - [ ] packaging
+  - [X] packaging
-  - [ ] good name + icon
+  - [X] good name + icon (kinda done … _"good"_ is highly subjective, but I will give it a pass)
  - [ ] further investigation into the OpenCast API (looks like one might be able to have some fun with it)
  - [ ] …
--- a/free.css
+++ b/free.css
-._ext-openExcellenceMedia_container .videoLinkList {
+._ext-openExcellenceMedia_container,
+.openExcellenceMediaPlugin {
  --c-rwth-violett: rgb(97,33,88);
  --c-link-bg: var(--c-rwth-violett);
  --c-link-fg: #fff;
 }
-._ext-openExcellenceMedia_container .videoLinkList {
+.openExcellenceMediaPlugin.oemPopOut {
+  position: fixed;
+  top: 3.4em;
+  left: 2.1em;
+  right: 2.1em;
+  bottom: unset;
+  z-index: 42021;
+  text-align: center;
+  font-size: 1.1em;
+}
+._ext-openExcellenceMedia_container .videoLinkList,
+.openExcellenceMediaPlugin .videoLinkList {
  list-style-type: none;
  padding: 0;
  display: flex;
  flex-direction: row;
 }
+.openExcellenceMediaPlugin .videoLinkList {
+/*  flex-direction: column;
+  width: max-content;
+  align-items: stretch;
+  margin: .5em .25em; */
+  margin: .5em auto;
+  width: max-content;
+  max-width: 100%;
+  padding: .5em .25em;
+  background: rgba(242, 242, 242, .7);
+  opacity: .7;
+  box-shadow: 0 0 1em 0 rgba(0,0,0,.7);
+}
+.openExcellenceMediaPlugin .videoLinkList:hover,
+.openExcellenceMediaPlugin .videoLinkList:focus-within {
+  opacity: 1;
+}
-._ext-openExcellenceMedia_container .videoLinkList .videoLink {
+._ext-openExcellenceMedia_container .videoLinkList .videoLink,
+.openExcellenceMediaPlugin .videoLinkList .videoLink {
  display: inline-block;
  padding: .5em 1em;
  background: var(--c-link-bg);
@@ -19,3 +49,7 @@
  margin: .25em .5em;
  border-radius: .2em;
 }
+/* .openExcellenceMediaPlugin .videoLinkList .videoLink {
+  display: block;
+  text-align: center;
+} */
--- a/free.js
+++ b/free.js
 if (window.location.host === 'engage.streaming.rwth-aachen.de') {
-  if (!window.location.href.startsWith('https://engage.streaming.rwth-aachen.de/paella/ui/watch.html'))
+  if (!window.location.href.startsWith('https://engage.streaming.rwth-aachen.de/paella/ui/watch.html') || !window.location.href.startsWith('https://engage.streaming.rwth-aachen.de//paella7/ui/watch.html'))
    console.warn('looks like we are running outside a player context‽')
  const inFrame = (window.parent !== window)
@@ -8,7 +8,7 @@ if (window.location.host === 'engage.streaming.rwth-aachen.de') {
    .then(d=>d.json())
    .then(meta => {
      window._meta = meta
-      let videoTracks = meta['search-results'].result.mediapackage.media.track
+      let videoTracks = meta['result'][0].mediapackage.media.track
        .filter(t=> t.mimetype.startsWith('video/') && t.url.startsWith('http'))
        .sort((a,b) =>
            a.mimetype.localeCompare(b.mimetype)
@@ -19,8 +19,8 @@ if (window.location.host === 'engage.streaming.rwth-aachen.de') {
      videoTracks.forEach(t=>console.debug(t.id, t.mimetype, t.video.resolution, t.url))
      if (inFrame) {
        window.parent.postMessage({videoTracks, meta}, '*')
-      } else {
+      } /*/ else /* */ {
-        // TODO: add download links to video
+        addLinksToVideoPlayer(videoTracks, meta)
      }
    })
 } else if (window.location.host === 'moodle.rwth-aachen.de') {
@@ -59,7 +59,7 @@ function genIdPrefix(videoId) {
 }
 function genVideoContainerId(vidIdOrMeta) {
  if (typeof vidIdOrMeta === 'object')
-    vidIdOrMeta = vidIdOrMeta['search-results'].result.id
+    vidIdOrMeta = vidIdOrMeta['result'][0].id
  return `${genIdPrefix(vidIdOrMeta)}_container`
 }
@@ -76,15 +76,8 @@ const FMT = (()=>{
  }
 })()
-function genLinkContainer(tracks, meta) {
+function genLinkList(tracks, meta) {
-  let videoTitle = meta['search-results'].result.dcTitle || '?'
+  let videoTitle = meta['result'][0].dc.title[0] || '?'
-  let details = document.createElement('details')
-  details.id = genVideoContainerId(meta)
-  details.classList.add('_ext-openExcellenceMedia_container')
-  let summary = document.createElement('summary')
-  summary.innerText = `Download video: ${videoTitle}`
-  details.appendChild(summary)
  let videoLinkList = document.createElement('ul')
  videoLinkList.classList.add('videoLinkList')
  tracks.forEach(track => {
@@ -102,7 +95,112 @@ Audio: ${mAud.channels}ch@${FMT.hz(mAud.samplingrate)} (${FMT.bps(mAud.bitrate)}
    li.appendChild(a)
    videoLinkList.appendChild(li)
  })
-  details.appendChild(videoLinkList)
+  return videoLinkList
+}
+function genLinkContainer(tracks, meta) {
+  let videoTitle = meta['result'][0].dc.title[0] || '?'
+  let details = document.createElement('details')
+  details.id = genVideoContainerId(meta)
+  details.classList.add('_ext-openExcellenceMedia_container')
+  let summary = document.createElement('summary')
+  summary.innerText = `Download video: ${videoTitle}`
+  details.appendChild(summary)
+  details.appendChild(genLinkList(tracks, meta))
  return details
 }
+const _PLAYER_CONTROL_BUTTON_ID = '_ext_openExcellence_btn-ctrl-bar'
+function genPlayerControlsButton() {
+  let container = document.createElement('div');
+  ['buttonPlugin', 'right', 'openExcellenceMediaPlugin'].forEach(c=>container.classList.add(c))
+  container.id = _PLAYER_CONTROL_BUTTON_ID
+  container.setAttribute('title', 'Show downloadable video links');
+  let icon = document.createElement('i');
+  ['button-icon', 'icon-download'].forEach(c=>icon.classList.add(c))
+  container.appendChild(icon)
+  return container
+}
+const _PLAYER_CONTROL_POPOUT_ID = '_ext_openExcellence_ctr-bar-pop-out'
+function genPlayerControlsPopOut(tracks, meta) {
+  let container = document.createElement('div');
+  ['openExcellenceMediaPlugin', 'oemPopOut'].forEach(c=>container.classList.add(c))
+  container.id = _PLAYER_CONTROL_POPOUT_ID
+  container.appendChild(genLinkList(tracks, meta))
+  return container
+}
+function addLinksToVideoPlayer(videoTracks, meta) {
+  // removing old elements, if they are still here ...
+  document.querySelectorAll(`#${_PLAYER_CONTROL_BUTTON_ID}, #${_PLAYER_CONTROL_POPOUT_ID}`)
+    .forEach(n => n.remove())
+  console.debug('adding links to page ...', document.readyState)
+  let toolbarBtn = genPlayerControlsButton()
+  let toolbarPopOut = genPlayerControlsPopOut(videoTracks, meta)
+  document.body.appendChild(toolbarPopOut)
+  console.debug(toolbarPopOut)
+  let timeoutFn = ()=>{
+    // waiting for things like the toolbar to be ready
+    if (!document.querySelector('.playbackControls')) {
+      setTimeout(timeoutFn, 250)
+      return
+    }
+    console.debug('page seems to be ready ... adding things ...')
+/*
+    // web extensions can not trivially access properties in the window object of the page context
+    // just using paella's API and adding a regular plugin for this would have been nice
+    console.debug(window, window.paella)
+    window.paella.addPlugin(()=>{
+      return class OpenExcellenceMedia extends paella.ButtonPlugin {
+        getIndex()      { return 42021; }
+        getAlignment()  { return 'right' }
+        getSubclass()   { return "openExcellenceMedia-ctrl-btn" }
+        getIconClass()  { return 'icon-download' }
+        getName()       { return "_.OpenExcellenceMedia.ff-ext" }
+        getButtonType() { return paella.ButtonPlugin.type.popUpButton }
+        buildContent(domElement) {
+          let linkList = genLinkList(videoTracks, meta)
+          domElement.appendChild(linkList)
+          domElement.classList.add('OpenExcellenceMediaPlugin')
+        }
+      }
+    })
+*/
+    let open = false
+    let buttonBarContainer = document.querySelector('.playbackBarPlugins')
+    let popOutContainer = document.querySelector('.popUpPluginContainer')
+    buttonBarContainer.appendChild(toolbarBtn)
+    popOutContainer.appendChild(toolbarPopOut)
+    let _setOpen = (newState = null) => {
+      if (newState === undefined || newState === null) newState = !open
+      open = newState
+      let style = toolbarPopOut.style
+      if (open) {
+        style.display = null
+        toolbarBtn.classList.add('selected')
+      } else {
+        style.display = 'none'
+        toolbarBtn.classList.remove('selected')
+      }
+    }
+    _setOpen(false)
+    toolbarBtn.addEventListener('click', e=>{
+      _setOpen()
+    })
+  }
+  console.debug('wating for player interface to get ready ...')
+  timeoutFn()
+}
--- a/manifest.json
+++ b/manifest.json
 {
-  "manifest_version": 2,
+  "manifest_version": 3,
  "name": "OpenExcellenceMedia",
-  "version": "0.0.2",
+  "version": "0.0.4",
  "description": "Adds download links to videos on RWTH moodle which are served using an OpenCast iframe.",
  "homepage_url": "https://git.fsmpi.rwth-aachen.de/moodleOpenCastDownloads/ff-ext",
  "icons": {
@@ -15,14 +15,14 @@
  "content_scripts": [
    {
      "all_frames": true,
-      "matches": ["https://moodle.rwth-aachen.de/*", "https://engage.streaming.rwth-aachen.de/paella/ui/*"],
+      "matches": ["https://moodle.rwth-aachen.de/*", "https://engage.streaming.rwth-aachen.de/*"],
      "js": ["free.js"],
      "css": ["free.css"]
    }
  ],
  "browser_specific_settings": {
    "gecko": {
-        "id": "{ad4c20e4-957a-45ff-a48e-a5497ccd59d5}",
+        "id": "{6e584591-b424-4330-ab93-765a260b0bb2}",
        "strict_min_version": "60.0",
        "update_url": "https://dev.sudo42.de/public/ff-addons/updates.json"
    }
No results found