diff options
| -rw-r--r-- | manifest.json | 4 | ||||
| -rw-r--r-- | viewtube.css | 4 | ||||
| -rw-r--r-- | viewtube.js | 148 |
3 files changed, 51 insertions, 105 deletions
diff --git a/manifest.json b/manifest.json index bcdb5a2..3341b49 100644 --- a/manifest.json +++ b/manifest.json @@ -16,5 +16,9 @@ "matches": ["https://youtube.com/watch*", "https://www.youtube.com/watch*"], "js": ["viewtube.js"] } + ], + + "web_accessible_resources": [ + "viewtube.css" ] } diff --git a/viewtube.css b/viewtube.css new file mode 100644 index 0000000..53e22f7 --- /dev/null +++ b/viewtube.css @@ -0,0 +1,4 @@ +.hide { display: none; } +.audio-video-only { color: #8f6b32; } +.dash { color: #cf4913; } +.direct-video-link { color: #00c0c0; } diff --git a/viewtube.js b/viewtube.js index 61ffaa1..681fabd 100644 --- a/viewtube.js +++ b/viewtube.js @@ -49,81 +49,19 @@ // ==========Functions========== // - function createMyElement(type, content, event, action, target) { - var obj = page.doc.createElement(type); - if (content) { - switch (type) { - case 'div': - obj.innerHTML = content; - break; - case 'img': - obj.src = content; - break; - case 'option': - obj.value = content; - obj.innerHTML = content; - break; - case 'video': - obj.src = content; - obj.controls = 'controls'; - obj.autoplay = 'autoplay'; - obj.volume = 0.8; - obj.innerHTML = '<br><br>The video should be loading. If it doesn\'t load, make sure your browser supports HTML5\'s Video and this video codec. If you think it\'s a script issue, please report it <a href="' + contact + '" style="color:#00892C">here</a>.'; - break; - } - } - if (type == 'video') { - obj.type = mimetypes[player['videoPlay'].replace(/.*\s/, '')]; - obj.id = 'vtVideo'; - } - if (event == 'change') { - if (target == 'video') { - obj.addEventListener('change', function() { - player['videoPlay'] = this.value; - playMyVideo(); - }, false); - } - } - else if (event == 'click') { - obj.addEventListener('click', function() { - switch (action) { - case 'close': - page.body.removeChild(target); - break; - } - }, false); + function createElement (type, attributes, ...children) { + var element = document.createElement(type); + for (var key in attributes) { + if (key == 'innerHTML') element.innerHTML = attributes[key]; + else element.setAttribute(key, attributes[key]); } - return obj; + for (var child in children) + element.appendChild(child); + return element; } - function modifyMyElement(obj, type, content, clear, hide) { - if (content) { - if (type == 'div') obj.innerHTML = content; - else if (type == 'option') { - obj.value = content; - obj.innerHTML = content; - } - else if (type == 'object') obj.data = content; - else if (type == 'img' || type == 'video' || type == 'embed') obj.src = content; - } - if (clear) { - if (obj.hasChildNodes()) { - while (obj.childNodes.length >= 1) { - obj.removeChild(obj.firstChild); - } - } - } - if (hide) { - for (var i = 0; i < obj.children.length; i++) { - styleMyElement(obj.children[i], {display: 'none'}); - } - } - } - - function styleMyElement(obj, styles) { - for (var property in styles) { - if (styles.hasOwnProperty(property)) obj.style[property] = styles[property]; - } + function createVideoElement (attributes, ...children) { + return createElement("video", Object.assign({controls: "controls", autoplay: "autoplay", volume: 0.8}, attributes)); } function createMyPlayer() { @@ -132,24 +70,29 @@ Object.assign(option, item); /* The Panel */ - player['playerPanel'] = createMyElement('div', '', '', '', ''); + player['playerPanel'] = createElement('div'); player['playerWindow'].appendChild(player['playerPanel']); /* Panel Video Menu */ - player['videoMenu'] = createMyElement('select', '', 'change', '', 'video'); - player['videoMenu'].title = '{Videos: select the video format for playback}'; + player["videoMenu"] = createElement("select", {title: "Select the video format for playback"}); + player["videoMenu"].addEventListener('change', function() { + player['videoPlay'] = this.value; + playMyVideo(); + }, false); player['playerPanel'].appendChild(player['videoMenu']); for (var videoCode in player['videoList']) { - player['videoItem'] = createMyElement('option', videoCode, '', '', ''); - styleMyElement(player['videoItem'], {padding: '0px', display: 'block', color: '#336699', fontSize: '12px', textShadow: '0px 1px 1px #CCCCCC', cursor: 'pointer'}); - if (videoCode.indexOf('Video') != -1 || videoCode.indexOf('Audio') != -1) styleMyElement(player['videoItem'], {color: '#8F6B32'}); - if (player['videoList'][videoCode] == 'DASH') styleMyElement(player['videoItem'], {color: '#CF4913'}); + player["videoItem"] = createElement("option", {value: videoCode, innerHTML: videoCode}); + if (videoCode.indexOf('Video') != -1 || videoCode.indexOf('Audio') != -1) + player["videoItem"].classList.add("audio-video-only"); + if (player['videoList'][videoCode] == 'DASH') + player["videoItem"].classList.add("dash"); player['videoMenu'].appendChild(player['videoItem']); - if (videoCode == 'Direct Video Link') styleMyElement(player['videoItem'], {color: '#00C0C0'}); + if (videoCode == 'Direct Video Link') + player["videoItem"].classList.add("direct-video-link"); } /* The Content */ - player['playerContent'] = createMyElement('div', '', '', '', ''); + player['playerContent'] = createElement('div'); player['playerWindow'].appendChild(player['playerContent']); /* Play My Video */ @@ -161,28 +104,20 @@ function playDASHwithHTML5() { if (player['videoPlay'].indexOf('MP4') != -1) { - player['contentVideo'] = createMyElement('video', player['videoList'][player['videoPlay'].replace(/MP4/, 'Video MP4')], '', '', ''); - if (player['videoList']['High Bitrate Audio Opus']) { - player['contentAudio'] = createMyElement('video', player['videoList']['High Bitrate Audio Opus'], '', '', ''); - } - else if (player['videoList']['Medium Bitrate Audio Opus']) { - player['contentAudio'] = createMyElement('video', player['videoList']['Medium Bitrate Audio Opus'], '', '', ''); - } - else { - player['contentAudio'] = createMyElement('video', player['videoList']['Medium Bitrate Audio MP4'], '', '', ''); - } + player["contentVideo"] = createVideoElement({src: player["videoList"][player["videoPlay"].replace(/MP4/, "Video MP4")]}); + if (player['videoList']['High Bitrate Audio Opus']) + player["contentAudio"] = createVideoElement({src: player["videoList"]["High Bitrate Audio Opus"]}); + else if (player['videoList']['Medium Bitrate Audio Opus']) + player['contentAudio'] = createVideoElement({src: player['videoList']['Medium Bitrate Audio Opus']}); + else player['contentAudio'] = createVideoElement({src: player['videoList']['Medium Bitrate Audio MP4']}); } else { - player['contentVideo'] = createMyElement('video', player['videoList'][player['videoPlay'].replace(/WebM/, 'Video WebM')], '', '', ''); - if (player['videoList']['High Bitrate Audio Opus']) { - player['contentAudio'] = createMyElement('video', player['videoList']['High Bitrate Audio Opus'], '', '', ''); - } - else if (player['videoList']['Medium Bitrate Audio Opus']) { - player['contentAudio'] = createMyElement('video', player['videoList']['Medium Bitrate Audio Opus'], '', '', ''); - } - else { - player['contentAudio'] = createMyElement('video', player['videoList']['Medium Bitrate Audio WebM'], '', '', ''); - } + player["contentVideo"] = createVideoElement({src: player["videoList"][player["videoPlay"].replace(/WebM/, "Video WebM")]}); + if (player['videoList']['High Bitrate Audio Opus']) + player["contentAudio"] = createVideoElement({src: player["videoList"]["High Bitrate Audio Opus"]}); + else if (player['videoList']['Medium Bitrate Audio Opus']) + player["contentAudio"] = createVideoElement({src: player["videoList"]["Medium Bitrate Audio Opus"]}); + else player["contentAudio"] = createVideoElement({src: player["videoList"]["Medium Bitrate Audio WebM"]}); } player['contentAudio'].pause(); player['contentVideo'].addEventListener('play', function() { @@ -203,17 +138,17 @@ player['contentAudio'].currentTime = player['contentVideo'].currentTime; } }, false); - styleMyElement(player['contentAudio'], {display: 'none'}); + player["contentAudio"].classList.add("hide"); player['contentVideo'].appendChild(player['contentAudio']); } function playMyVideo() { - modifyMyElement(player['playerContent'], 'div', '', true); + while (player['playerContent'].hasChildNodes()) + player['playerContent'].removeChild(player['playerContent'].firstChild); if (player['videoList'][player['videoPlay']] == 'DASH') playDASHwithHTML5(); else - player['contentVideo'] = createMyElement('video', player['videoList'][player['videoPlay']], '', '', ''); - player['contentVideo'].poster = player['videoThumb']; + player["contentVideo"] = createVideoElement({src: player["videoList"][player["videoPlay"]], poster: player["videoThumb"]}); player['playerContent'].appendChild(player['contentVideo']); } @@ -274,6 +209,9 @@ // =====YouTube===== // + // Add stylesheet + document.head.appendChild(createElement("link", {rel: "stylesheet", type: "text/css", href: browser.extension.getURL("viewtube.css")})); + /* Redirect Categories */ if (page.url.indexOf('gaming.youtube.com') != -1) { page.win.location.href = page.url.replace('gaming', 'www'); |