styling and housekeeping

free.css

+
+._ext-openExcellenceMedia_container .videoLinkList {
+  --c-rwth-violett: rgb(97,33,88);
+  --c-link-bg: var(--c-rwth-violett);
+  --c-link-fg: #fff;
+}
+._ext-openExcellenceMedia_container .videoLinkList {
+  list-style-type: none;
+  padding: 0;
+  display: flex;
+  flex-direction: row;
+}
+
+._ext-openExcellenceMedia_container .videoLinkList .videoLink {
+  display: inline-block;
+  padding: .5em 1em;
+  background: var(--c-link-bg);
+  color: var(--c-link-fg);
+  margin: .25em .5em;
+  border-radius: .2em;
+}

free.js

-console.debug(document.readyState, ''+window.location)
-
 if (window.location.host === 'engage.streaming.rwth-aachen.de') {
-  console.debug(window, window.parent, window.top)
+  if (!window.location.href.startsWith('https://engage.streaming.rwth-aachen.de/paella/ui/watch.html'))
+    console.warn('looks like we are running outside a player context‽')
+
   const inFrame = (window.parent !== window)
-  console.debug('running in video context ... deatching URLs ...', inFrame)
-  let vId = new URLSearchParams(location.search).get('id')
-  fetch(`https://engage.streaming.rwth-aachen.de/search/episode.json?id=${new URLSearchParams(location.search).get('id')}`)
+  const vId = new URLSearchParams(location.search).get('id')
+  fetch(`https://engage.streaming.rwth-aachen.de/search/episode.json?${new URLSearchParams({id:vId}).toString()}`)
     .then(d=>d.json())
     .then(meta => {
       window._meta = meta
@@ -20,22 +19,15 @@ if (window.location.host === 'engage.streaming.rwth-aachen.de') {
           if (resAI < resBI) return -1
           return 0
         })
-      videoTracks.forEach(t=>console.log(t.id, t.mimetype, t.video.resolution, t.url))
+      videoTracks.forEach(t=>console.debug(t.id, t.mimetype, t.video.resolution, t.url))
       if (inFrame) {
-        console.debug('posting message')
         window.parent.postMessage({videoTracks, meta}, '*')
-        window.addEventListener('message', msg => {
-          console.debug('got message in frame', msg)
-          console.debug('is from parent', msg.origin === window.parent)
-        })
+      } else {
+        // TODO: add download links to video
       }
     })
 } else if (window.location.host === 'moodle.rwth-aachen.de') {
   window.addEventListener('message', msg => {
-    window._lastMsg = msg;
-    window._msgSrc = msg.source;
-    console.log('msg', msg)
-
     let mainFrame = document.querySelector('div[role=main]')
     let sourceFrame = null;
     let _frames = [...document.querySelectorAll('iframe')].filter(f => f.contentWindow === msg.source)
@@ -44,38 +36,35 @@ if (window.location.host === 'engage.streaming.rwth-aachen.de') {
     let videoLinkList = genLinkContainer(msg.data.videoTracks, msg.data.meta)
     mainFrame.appendChild(videoLinkList)
 
-    window._sf = sourceFrame
-    console.debug('sourceFrame', sourceFrame, sourceFrame.parentNode)
+    // if video frame was found: step out of the video container(s) and place links just below the frame
     let beforeNode = sourceFrame
     while (beforeNode.parentNode && beforeNode.parentNode.matches('.occontainer_inner,.occontainer_outer')) {
       beforeNode = beforeNode.parentNode
     }
     if (beforeNode && beforeNode.parentNode) {
-      beforeNode.parentNode.insertBefore(videoLinkList, beforeNode)
+      beforeNode.parentNode.insertBefore(videoLinkList, beforeNode.nextSibling)
     }
 
     return false;
   })
-  let frame = document.querySelector('iframe.ocplayer')
-  if (frame) {
-    console.debug('posting to child')
-    frame.contentWindow.postMessage('hello child', '*')
-  }
 }
 
 function genLinkContainer(tracks, meta) {
   let videoTitle = meta['search-results'].result.dcTitle || '?'
   let details = document.createElement('details')
+  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 => {
     let li = document.createElement('li')
     let a = document.createElement('a')
+    a.classList.add('videoLink')
     a.href = track.url
-    a.innerText = `${track.video.resolution} (${track.mimetype})`
+    a.innerText = `${track.video.resolution} (${track.mimetype.replace(/^video\//, '')})`
     li.appendChild(a)
     videoLinkList.appendChild(li)
   })

manifest.json

 {
   "manifest_version": 2,
-  "name": "openExcellence",
+  "name": "openExcellenceMedia",
   "version": "0.0.1",
   "description": "",
   "icons": {
@@ -11,7 +11,8 @@
     {
       "all_frames": true,
       "matches": ["https://moodle.rwth-aachen.de/*", "https://engage.streaming.rwth-aachen.de/*"],
-      "js": ["free.js"]
+      "js": ["free.js"],
+      "css": ["free.css"]
     }
   ]