Make double-tap-to-seek an opt-in feature

AirenSoft · Oct 12, 2023 · a5c0616 · a5c0616
1 parent 42b5dc4
commit a5c0616
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 9 deletions.
diff --git a/demo/demo.html b/demo/demo.html
@@ -287,6 +287,17 @@ <h6>General Options</h6>
                         <i class="fas fa-external-link-alt"></i>
                       </a>
                     </div>
+                    <div class="form-check">
+                      <input class="form-check-input" type="checkbox" value="" id="doubleTapToSeek"
+                        v-model="playerOption.doubleTapToSeek" @change="changeOptions" />
+                      <label class="form-check-label" for="doubleTapToSeek">
+                        doubleTapToSeek
+                      </label>
+                      <a href="https://airensoft.gitbook.io/ovenplayer/initialization#doubletaptoseek" class="ms-1"
+                        target="_blank">
+                        <i class="fas fa-external-link-alt"></i>
+                      </a>
+                    </div>
                   </fieldset>
                 </div>
                 <div class="col-lg-4 border-start border-2 mb-3 mb-lg-0">
@@ -594,7 +605,8 @@ <h6 class="text-uppercase mb-4 font-weight-bold">Contact</h6>
       autoStart: true,
       autoFallback: true,
       mute: false,
-      sources: []
+      sources: [],
+      doubleTapToSeek: false
     };
 
     if (urlOption && urlOption.playerOption) {

diff --git a/src/js/api/Configurator.js b/src/js/api/Configurator.js
@@ -35,7 +35,8 @@ const Configurator = function(options, provider){
             loadingRetryCount: 0,
             expandFullScreenUI: true,
             fullscreenOption: null,
-            showBigPlayButton: true
+            showBigPlayButton: true,
+            doubleTapToSeek: false,
         };
         const serialize = function (val) {
             if (val === undefined) {

diff --git a/src/js/utils/getTouchSection.js b/src/js/utils/getTouchSection.js
@@ -4,9 +4,6 @@
  * @returns {'left'|'middle'|'right'}
  */
 export default function getTouchSection(event) {
-    // get the elements width
-    console.log(event.target);
-
     /**
      * @type {DOMRect}
      */

diff --git a/src/js/view/view.js b/src/js/view/view.js
@@ -8,6 +8,7 @@ import PanelManager from "view/global/PanelManager";
 import ContextPanel from 'view/components/helpers/contextPanel';
 import LA$ from 'utils/likeA$';
 import ResizeSensor from "utils/resize-sensor";
+import getTouchSection from "utils/getTouchSection";
 import {
     READY,
     DESTROY,
@@ -198,26 +199,26 @@ const View = function($container){
             }
         },
         "dblclick .ovenplayer" : function(event, $current, template){
-
             if (api) {
                     const touchPosition = getTouchSection(event);
                     const currentPosition = api.getPosition();
+                    const tapToSeekEnabled = api.getConfig().doubleTapToSeek;
 
                     // seek back 10s
-                    if (touchPosition == 'left') {
+                    if (tapToSeekEnabled && touchPosition == 'left') {
                         const newPosition = Math.max(currentPosition - 10, 0);
                         OvenPlayerConsole.log(`Seeking to ${newPosition}`);
                         api.seek(newPosition);
                     }
 
                     // seek forward 10s
-                    if (touchPosition === 'right') {
+                    if (tapToSeekEnabled && touchPosition === 'right') {
                         const newPosition = Math.min(currentPosition + 10, api.getDuration());
                         OvenPlayerConsole.log(`Seeking to ${newPosition}`);
                         api.seek(newPosition);
                     }
 
-                    if (touchPosition === 'middle') {
+                    if (touchPosition === 'middle' || !tapToSeekEnabled) {
                         OvenPlayerConsole.log(`Toggling fullscreen`);
                 if (api.getConfig().expandFullScreenUI && api.toggleFullScreen) {