summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--manifest.json4
-rw-r--r--viewtube.css4
-rw-r--r--viewtube.js148
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');
generated by cgit v1.2.3 (git 2.45.2) at 2024-12-05 02:27:55 +0000