✨ Add option to select play or pause when loading

Author: noraworld

options.css

@@ -105,3 +105,7 @@ label, #button-wrap {
   width: 79px;
   text-align: center;
 }
+
+select {
+  border: 1px solid #cccccc;
+}

options.html

@@ -75,6 +75,15 @@ <h3>Shortcuts</h3>
       <input id="skip-time-amount" type="text" value="">
     </div>
 
+    <div class="settings">
+      <label for="play-or-pause-when-loading">Play or pause when loading</label>
+      <select id="play-or-pause-when-loading" name="play-or-pause-when-loading">
+        <option value="default">Leave it to a site</option>
+        <option value="play">Play automatically</option>
+        <option value="pause">Always pause</option>
+      </select>
+    </div>
+
     <div class="settings">
       <label for="scroll-to-player">Scroll to a player automatically</label>
       <div id="checkbox-wrapper"><input id="scroll-to-player" type="checkbox"></div>

options.js

@@ -1,19 +1,20 @@
 var defaultKey = {
-  togglePlayAndPauseKeyCode:      'p',
-  jumpToBeginningKeyCode:         'h',
-  jumpToEndKeyCode:               'e',
-  rewindTimeKeyCode:              'a',
-  advanceTimeKeyCode:             's',
-  speedDownKeyCode:               'd',
-  speedUpKeyCode:                 'u',
-  resetSpeedKeyCode:              'r',
-  toggleFullscreenKeyCode:        'f',
-  partialLoopKeyCode:             'l',
-  partialLoopPrecision:           100,
-  skipTimeAmount:                   5,
-  scrollToPlayerChecked:        false,
-  rememberPlaybackSpeedChecked:  true,
-  alwaysShowProgressBarChecked: false,
+  togglePlayAndPauseKeyCode:          'p',
+  jumpToBeginningKeyCode:             'h',
+  jumpToEndKeyCode:                   'e',
+  rewindTimeKeyCode:                  'a',
+  advanceTimeKeyCode:                 's',
+  speedDownKeyCode:                   'd',
+  speedUpKeyCode:                     'u',
+  resetSpeedKeyCode:                  'r',
+  toggleFullscreenKeyCode:            'f',
+  partialLoopKeyCode:                 'l',
+  partialLoopPrecision:               100,
+  skipTimeAmount:                       5,
+  playOrPauseWhenLoadingSelect: 'default',
+  scrollToPlayerChecked:            false,
+  rememberPlaybackSpeedChecked:      true,
+  alwaysShowProgressBarChecked:     false,
 };
 
 $(function() {
@@ -39,6 +40,7 @@ $(function() {
 
 function loadOptions() {
   chrome.storage.sync.get(defaultKey, function(storage) {
+    // key
     updateInputText('toggle-play-and-pause', storage.togglePlayAndPauseKeyCode);
     updateInputText('jump-to-beginning',     storage.jumpToBeginningKeyCode);
     updateInputText('jump-to-end',           storage.jumpToEndKeyCode);
@@ -49,8 +51,15 @@ function loadOptions() {
     updateInputText('reset-speed',           storage.resetSpeedKeyCode);
     updateInputText('toggle-fullscreen',     storage.toggleFullscreenKeyCode);
     updateInputText('partial-loop',          storage.partialLoopKeyCode);
+
+    // numeric
     document.getElementById('partial-loop-precision').value = storage.partialLoopPrecision;
     document.getElementById('skip-time-amount').value = storage.skipTimeAmount;
+
+    // select menu
+    document.getElementById('play-or-pause-when-loading').value = storage.playOrPauseWhenLoadingSelect;
+
+    // check box
     document.getElementById('scroll-to-player').checked = storage.scrollToPlayerChecked;
     document.getElementById('remember-playback-speed').checked = storage.rememberPlaybackSpeedChecked;
     document.getElementById('always-show-progress-bar').checked = storage.alwaysShowProgressBarChecked;
@@ -75,6 +84,7 @@ function saveOptions() {
   var partialLoopKeyCode           = document.getElementById('partial-loop').value;
   var partialLoopPrecision         = document.getElementById('partial-loop-precision').value;
   var skipTimeAmount               = document.getElementById('skip-time-amount').value;
+  var playOrPauseWhenLoadingSelect = document.getElementById('play-or-pause-when-loading').value;
   var scrollToPlayerChecked        = document.getElementById('scroll-to-player').checked;
   var rememberPlaybackSpeedChecked = document.getElementById('remember-playback-speed').checked;
   var alwaysShowProgressBarChecked = document.getElementById('always-show-progress-bar').checked;
@@ -92,9 +102,10 @@ function saveOptions() {
   validateFlag[9]  = checkValidate('partial-loop');
   validateFlag[10] = checkValidateNumeric('partial-loop-precision');
   validateFlag[11] = checkValidateNumeric('skip-time-amount');
-  validateFlag[12] = checkValidateChecked('scroll-to-player');
-  validateFlag[13] = checkValidateChecked('remember-playback-speed');
-  validateFlag[14] = checkValidateChecked('always-show-progress-bar');
+  validateFlag[12] = checkValidateSelect('play-or-pause-when-loading', ['default', 'play', 'pause']);
+  validateFlag[13] = checkValidateChecked('scroll-to-player');
+  validateFlag[14] = checkValidateChecked('remember-playback-speed');
+  validateFlag[15] = checkValidateChecked('always-show-progress-bar');
 
   // when some input is wrong.
   for (var i = 0; i < validateFlag.length; i++) {
@@ -116,6 +127,7 @@ function saveOptions() {
     partialLoopKeyCode:           partialLoopKeyCode,
     partialLoopPrecision:         partialLoopPrecision,
     skipTimeAmount:               skipTimeAmount,
+    playOrPauseWhenLoadingSelect: playOrPauseWhenLoadingSelect,
     scrollToPlayerChecked:        scrollToPlayerChecked,
     rememberPlaybackSpeedChecked: rememberPlaybackSpeedChecked,
     alwaysShowProgressBarChecked: alwaysShowProgressBarChecked
@@ -234,4 +246,25 @@ function checkValidateChecked(inputID) {
   } else {
     $(inputID).css('border', '1px solid #cccccc');
   }
+
+  // return value: true -> save the options, false -> do not save.
+  if (errorFlag === true) {
+    return false;
+  } else {
+    return true;
+  }
+}
+
+function checkValidateSelect(inputID, menu) {
+  var inputID = '#' + inputID;
+  $(inputID).parent().children('.invalid-value').remove();
+  if (menu.includes($(inputID).val())) {
+    $(inputID).css('border', '1px solid #cccccc');
+    return true;
+  }
+  else {
+    $(inputID).css('border', '1px solid red');
+    $(inputID).parent().append('<div class="invalid-value">Invalid value</div>');
+    return false;
+  }
 }

script.js

@@ -2,22 +2,23 @@ $(function() {
 
   var settings = {
     // オプションで変更可能なキーコード
-    togglePlayAndPauseKeyCode:      'p',
-    jumpToBeginningKeyCode:         'h',
-    jumpToEndKeyCode:               'e',
-    rewindTimeKeyCode:              'a',
-    advanceTimeKeyCode:             's',
-    speedDownKeyCode:               'd',
-    speedUpKeyCode:                 'u',
-    resetSpeedKeyCode:              'r',
-    toggleFullscreenKeyCode:        'f',
-    partialLoopKeyCode:             'l',
-    partialLoopPrecision:           100,
-    skipTimeAmount:                   5,
-    scrollToPlayerChecked:        false,
-    rememberPlaybackSpeedChecked:  true,
-    alwaysShowProgressBarChecked: false,
-    playbackSpeed:                  1.0,
+    togglePlayAndPauseKeyCode:          'p',
+    jumpToBeginningKeyCode:             'h',
+    jumpToEndKeyCode:                   'e',
+    rewindTimeKeyCode:                  'a',
+    advanceTimeKeyCode:                 's',
+    speedDownKeyCode:                   'd',
+    speedUpKeyCode:                     'u',
+    resetSpeedKeyCode:                  'r',
+    toggleFullscreenKeyCode:            'f',
+    partialLoopKeyCode:                 'l',
+    partialLoopPrecision:               100,
+    skipTimeAmount:                       5,
+    playOrPauseWhenLoadingSelect: 'default',
+    scrollToPlayerChecked:            false,
+    rememberPlaybackSpeedChecked:      true,
+    alwaysShowProgressBarChecked:     false,
+    playbackSpeed:                      1.0,
   };
   var fixed = {
     // 固定のキーコード
@@ -38,8 +39,9 @@ $(function() {
     settings.resetSpeedKeyCode            = storage.resetSpeedKeyCode;
     settings.toggleFullscreenKeyCode      = storage.toggleFullscreenKeyCode;
     settings.partialLoopKeyCode           = storage.partialLoopKeyCode;
-    settings.partialLoopPrecision         = storage.partialLoopPrecision;
+    settings.partialLoopPrecision         = Number(storage.partialLoopPrecision);
     settings.skipTimeAmount               = Number(storage.skipTimeAmount);
+    settings.playOrPauseWhenLoadingSelect = storage.playOrPauseWhenLoadingSelect;
     settings.scrollToPlayerChecked        = Boolean(storage.scrollToPlayerChecked);
     settings.rememberPlaybackSpeedChecked = Boolean(storage.rememberPlaybackSpeedChecked);
     settings.alwaysShowProgressBarChecked = Boolean(storage.alwaysShowProgressBarChecked);
@@ -83,12 +85,10 @@ $(function() {
         getPlaybackSpeed();
         showAndHideProgressBar();
 
-        // Originally in YouTube, etc., video plays automatically when loading the watching page,
-        // but because of calling createFullscreenVideoWrapper(), somehow video pauses.
-        // I suspect the frontend JavaScript doesn't work correctly
-        // by wrapping video player (by changing HTML element structure).
-        // So it plays video manually when loading the page.
-        player.play();
+        switch (settings.playOrPauseWhenLoadingSelect) {
+          case 'play':  player.play();  break;
+          case 'pause': player.pause(); break;
+        }
 
         return false;
       }