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.

1 files 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) {