diff --git a/free.css b/free.css new file mode 100644 index 0000000000000000000000000000000000000000..684339a0966855ec6019472f8e62885ad4af7a9c --- /dev/null +++ b/free.css @@ -0,0 +1,21 @@ + +._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; +} diff --git a/free.js b/free.js index 6cf65dc0e75d5536482d36d13175479fe11f46f6..342da57dcc60c6d2d636144239917c9a0e863140 100644 --- a/free.js +++ b/free.js @@ -1,11 +1,10 @@ -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) }) diff --git a/manifest.json b/manifest.json index 8bb088747b3d14ffe2a72511835adf4d7f2e9962..337697390c98581c29caa27f700ba93a813a82be 100644 --- a/manifest.json +++ b/manifest.json @@ -1,6 +1,6 @@ { "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"] } ]