From 8e52b59d9d767a55517b5f3b876f3dc98402c7ac Mon Sep 17 00:00:00 2001
From: Arun Isaac
Date: Wed, 5 Jul 2017 19:26:26 +0530
Subject: Use video element for thumbnail and playing/autoplaying functions.
* viewtube.js (option): Remove "autoplay".
(createMyElement): Remove handling of "play" and "autoplay" actions.
(createMyPlayer): Remove panel "Autoplay" button.
Do not create separate img element for thumbnail.
---
viewtube.js | 78 +++++++++++++------------------------------------------------
1 file changed, 16 insertions(+), 62 deletions(-)
diff --git a/viewtube.js b/viewtube.js
index 7bf2b3b..bf26459 100644
--- a/viewtube.js
+++ b/viewtube.js
@@ -30,7 +30,7 @@
// Player
var player = {};
- var option = {'autoplay': false, 'definition': 'HD', 'container': 'MP4', 'dash': false, 'direct': false, 'widesize': false, 'fullsize': false};
+ var option = {'definition': 'HD', 'container': 'MP4', 'dash': false, 'direct': false, 'widesize': false, 'fullsize': false};
var mimetypes = {
'MPEG': 'video/mpeg',
'MP4': 'video/mp4',
@@ -83,7 +83,7 @@
if (target == 'video') {
obj.addEventListener('change', function() {
player['videoPlay'] = this.value;
- if (player['isPlaying']) playMyVideo(option['autoplay']);
+ playMyVideo();
}, false);
}
}
@@ -93,14 +93,6 @@
case 'close':
page.body.removeChild(target);
break;
- case 'play':
- playMyVideo(!player['isPlaying']);
- break;
- case 'autoplay':
- option['autoplay'] = !option['autoplay'];
- styleButton('buttonAutoplay', option['autoplay']);
- playMyVideo(option['autoplay'] && (!player['isPlaying']));
- break;
case 'dash':
option['dash'] = !option['dash'];
styleButton('buttonDASH', option['dash'])
@@ -187,13 +179,6 @@
if (videoCode == 'Direct Video Link') styleMyElement(player['videoItem'], {color: '#00C0C0'});
}
- /* Panel Autoplay Button */
- player['buttonAutoplay'] = createMyElement('div', 'AP', 'click', 'autoplay', '');
- player['buttonAutoplay'].title = '{Autoplay: click to enable/disable auto playback on page load}';
- styleMyElement(player['buttonAutoplay'], {height: panelItemHeight + 'px', border: '1px solid #CCCCCC', borderRadius: '3px', padding: '0px 5px', display: 'inline', color: '#CCCCCC', fontSize: '12px', cursor: 'pointer'});
- if (option['autoplay']) styleMyElement(player['buttonAutoplay'], {color: '#008080', textShadow: '0px 1px 1px #CCCCCC'});
- player['playerPanel'].appendChild(player['buttonAutoplay']);
-
/* Panel DASH Button */
player['buttonDASH'] = createMyElement('div', 'MD', 'click', 'dash', '');
player['buttonDASH'].title = '{MPEG-DASH: click to enable/disable DASH playback using the HTML5 video player (experimental)}';
@@ -220,27 +205,12 @@
styleMyElement(player['playerContent'], {width: player['contentWidth'] + 'px', height: player['contentHeight'] + 'px', position: 'relative', color: '#AD0000', backgroundColor: '#000000', fontSize: '14px', fontWeight: 'bold', textAlign: 'center'});
player['playerWindow'].appendChild(player['playerContent']);
- /* The Video Thumbnail */
- if (player['videoThumb']) {
- player['contentImage'] = createMyElement('img', player['videoThumb'], 'click', 'play', '');
- player['contentImage'].title = '{Click to start video playback}';
- styleMyElement(player['contentImage'], {maxWidth: '100%', maxHeight: '100%', position: 'absolute', top: '0px', left: '0px', right: '0px', bottom: '0px', margin: 'auto', border: '0px', cursor: 'pointer'});
- player['contentImage'].addEventListener('load', function() {
- if (this.width/this.height >= player['contentWidth']/player['contentHeight']) {
- this.style.width = '100%';
- }
- else {
- this.style.height = '100%';
- }
- });
- }
-
/* Resize My Player */
if (option['widesize']) resizeMyPlayer('widesize');
if (option['fullsize']) resizeMyPlayer('fullsize');
/* Play My Video */
- playMyVideo(option['autoplay']);
+ playMyVideo();
}
promise = browser.storage.local.get(Object.keys(option));
promise.then(onGot, onGot);
@@ -295,25 +265,17 @@
player['contentVideo'].appendChild(player['contentAudio']);
}
- function playMyVideo(play) {
- player['isPlaying'] = play;
+ function playMyVideo() {
modifyMyElement(player['playerContent'], 'div', '', true);
- if (play) {
- if (player['videoList'][player['videoPlay']] == 'DASH')
- playDASHwithHTML5();
- else
- player['contentVideo'] = createMyElement('video', player['videoList'][player['videoPlay']], '', '', '');
- player['contentVideo'].width = player['contentWidth'];
- player['contentVideo'].height = player['contentHeight'];
- player['contentVideo'].poster = player['videoThumb'];
- styleMyElement(player['contentVideo'], {position: 'relative', width: player['contentWidth'] + 'px', height: player['contentHeight'] + 'px'});
- player['playerContent'].appendChild(player['contentVideo']);
- }
- else {
- if (player['contentImage'])
- player['playerContent'].appendChild(player['contentImage']);
- else showMyMessage('!thumb');
- }
+ if (player['videoList'][player['videoPlay']] == 'DASH')
+ playDASHwithHTML5();
+ else
+ player['contentVideo'] = createMyElement('video', player['videoList'][player['videoPlay']], '', '', '');
+ player['contentVideo'].width = player['contentWidth'];
+ player['contentVideo'].height = player['contentHeight'];
+ player['contentVideo'].poster = player['videoThumb'];
+ styleMyElement(player['contentVideo'], {position: 'relative', width: player['contentWidth'] + 'px', height: player['contentHeight'] + 'px'});
+ player['playerContent'].appendChild(player['contentVideo']);
}
function resizeMyPlayer(size) {
@@ -347,9 +309,6 @@
if (!player['resizeListener']) player['resizeListener'] = function() {resizeMyPlayer('fullsize')};
page.win.addEventListener('resize', player['resizeListener'], false);
player['isFullsize'] = true;
- if (player['isPlaying']) {
- if (player['contentVideo'] && player['contentVideo'].paused) player['contentVideo'].play();
- }
}
}
else {
@@ -364,9 +323,6 @@
styleMyElement(page.body.parentNode, {overflow: 'auto'});
page.win.removeEventListener('resize', player['resizeListener'], false);
player['isFullsize'] = false;
- if (player['isPlaying']) {
- if (player['contentVideo'] && player['contentVideo'].paused) player['contentVideo'].play();
- }
}
break;
}
@@ -386,11 +342,9 @@
player['contentWidth'] = playerWidth;
player['contentHeight'] = playerHeight - player['panelHeight'] - player['panelPadding'] * 2;
styleMyElement(player['playerContent'], {width: player['contentWidth'] + 'px', height: player['contentHeight'] + 'px'});
- if (player['isPlaying']) {
- player['contentVideo'].width = player['contentWidth'];
- player['contentVideo'].height = player['contentHeight'];
- styleMyElement(player['contentVideo'], {width: player['contentWidth'] + 'px', height: player['contentHeight'] + 'px'});
- }
+ player['contentVideo'].width = player['contentWidth'];
+ player['contentVideo'].height = player['contentHeight'];
+ styleMyElement(player['contentVideo'], {width: player['contentWidth'] + 'px', height: player['contentHeight'] + 'px'});
}
function cleanMyContent(content, unesc) {
--
cgit v1.2.3