Remove unnecessary `const double` method arguments
[WebKit-https.git] / Source / WebCore / Modules / mediacontrols / mediaControlsiOS.js
index f9afa40..9d6d28a 100644 (file)
@@ -25,34 +25,33 @@ function ControllerIOS(root, video, host)
 /* Enums */
 ControllerIOS.StartPlaybackControls = 2;
 
-
 ControllerIOS.prototype = {
     /* Constants */
-    MinimumTimelineWidth: 200,
+    MinimumTimelineWidth: 150,
     ButtonWidth: 42,
 
-    addVideoListeners: function() {
-        Controller.prototype.addVideoListeners.call(this);
-
-        this.listenFor(this.video, 'webkitbeginfullscreen', this.handleFullscreenChange);
-        this.listenFor(this.video, 'webkitendfullscreen', this.handleFullscreenChange);
-        this.listenFor(this.video, 'webkitpresentationmodechanged', this.handlePresentationModeChange);
-    },
-
-    removeVideoListeners: function() {
-        Controller.prototype.removeVideoListeners.call(this);
-
-        this.stopListeningFor(this.video, 'webkitbeginfullscreen', this.handleFullscreenChange);
-        this.stopListeningFor(this.video, 'webkitendfullscreen', this.handleFullscreenChange);
-        this.stopListeningFor(this.video, 'webkitpresentationmodechanged', this.handlePresentationModeChange);
+    get idiom()
+    {
+        return "ios";
     },
 
     createBase: function() {
         Controller.prototype.createBase.call(this);
 
-        var startPlaybackButton = this.controls.startPlaybackButton = document.createElement('button');
+        var startPlaybackButton = this.controls.startPlaybackButton = document.createElement('div');
         startPlaybackButton.setAttribute('pseudo', '-webkit-media-controls-start-playback-button');
         startPlaybackButton.setAttribute('aria-label', this.UIString('Start Playback'));
+        startPlaybackButton.setAttribute('role', 'button');
+
+        var startPlaybackBackground = document.createElement('div');
+        startPlaybackBackground.setAttribute('pseudo', '-webkit-media-controls-start-playback-background');
+        startPlaybackBackground.classList.add('webkit-media-controls-start-playback-background');
+        startPlaybackButton.appendChild(startPlaybackBackground);
+
+        var startPlaybackGlyph = document.createElement('div');
+        startPlaybackGlyph.setAttribute('pseudo', '-webkit-media-controls-start-playback-glyph');
+        startPlaybackGlyph.classList.add('webkit-media-controls-start-playback-glyph');
+        startPlaybackButton.appendChild(startPlaybackGlyph);
 
         this.listenFor(this.base, 'gesturestart', this.handleBaseGestureStart);
         this.listenFor(this.base, 'gesturechange', this.handleBaseGestureChange);
@@ -126,9 +125,9 @@ ControllerIOS.prototype = {
         this.listenFor(this.controls.fullscreenButton, 'touchstart', this.handleFullscreenTouchStart);
         this.listenFor(this.controls.fullscreenButton, 'touchend', this.handleFullscreenTouchEnd);
         this.listenFor(this.controls.fullscreenButton, 'touchcancel', this.handleFullscreenTouchCancel);
-        this.listenFor(this.controls.optimizedFullscreenButton, 'touchstart', this.handleOptimizedFullscreenTouchStart);
-        this.listenFor(this.controls.optimizedFullscreenButton, 'touchend', this.handleOptimizedFullscreenTouchEnd);
-        this.listenFor(this.controls.optimizedFullscreenButton, 'touchcancel', this.handleOptimizedFullscreenTouchCancel);
+        this.listenFor(this.controls.pictureInPictureButton, 'touchstart', this.handlePictureInPictureTouchStart);
+        this.listenFor(this.controls.pictureInPictureButton, 'touchend', this.handlePictureInPictureTouchEnd);
+        this.listenFor(this.controls.pictureInPictureButton, 'touchcancel', this.handlePictureInPictureTouchCancel);
         this.listenFor(this.controls.timeline, 'touchstart', this.handleTimelineTouchStart);
         this.stopListeningFor(this.controls.playButton, 'click', this.handlePlayButtonClicked);
 
@@ -148,6 +147,7 @@ ControllerIOS.prototype = {
 
     addStartPlaybackControls: function() {
         this.base.appendChild(this.controls.startPlaybackButton);
+        this.showShowControlsButton(false);
     },
 
     removeStartPlaybackControls: function() {
@@ -180,8 +180,7 @@ ControllerIOS.prototype = {
             // Hide the scrubber on audio until the user starts playing.
             this.controls.timelineBox.classList.add(this.ClassNames.hidden);
         } else {
-            if (Controller.gSimulateOptimizedFullscreenAvailable || ('webkitSupportsPresentationMode' in this.video && this.video.webkitSupportsPresentationMode('optimized')))
-                this.controls.panel.appendChild(this.controls.optimizedFullscreenButton);
+            this.updatePictureInPictureButton();
             this.controls.panel.appendChild(this.controls.fullscreenButton);
         }
     },
@@ -288,9 +287,10 @@ ControllerIOS.prototype = {
     handlePlayButtonTouchEnd: function(event) {
         this.controls.playButton.classList.remove('active');
 
-        if (this.canPlay())
+        if (this.canPlay()) {
             this.video.play();
-        else
+            this.showControls();
+        } else
             this.video.pause();
 
         return true;
@@ -347,15 +347,11 @@ ControllerIOS.prototype = {
 
         this.mostRecentNumberOfTargettedTouches = event.targetTouches.length;
 
-        if (this.controlsAreHidden()) {
+        if (this.controlsAreHidden() || !this.controls.panel.classList.contains(this.ClassNames.show)) {
             this.showControls();
-            if (this.hideTimer)
-                clearTimeout(this.hideTimer);
-            this.hideTimer = setTimeout(this.hideControls.bind(this), this.HideControlsDelay);
+            this.resetHideControlsTimer();
         } else if (!this.canPlay())
             this.hideControls();
-
-        return true;
     },
 
     handlePanelTouchStart: function(event) {
@@ -383,21 +379,6 @@ ControllerIOS.prototype = {
         }
     },
 
-    presentationMode: function() {
-        if ('webkitPresentationMode' in this.video)
-            return this.video.webkitPresentationMode;
-
-        if (this.isFullScreen())
-            return 'fullscreen';
-
-        return 'inline';
-    },
-
-    isFullScreen: function()
-    {
-        return this.video.webkitDisplayingFullscreen && this.presentationMode() != 'optimized';
-    },
-
     handleFullscreenButtonClicked: function(event) {
         if ('webkitSetPresentationMode' in this.video) {
             if (this.presentationMode() === 'fullscreen')
@@ -431,43 +412,37 @@ ControllerIOS.prototype = {
         return true;
     },
 
-    handleOptimizedFullscreenButtonClicked: function(event) {
-        if (!('webkitSetPresentationMode' in this.video))
-            return;
-
-        if (this.presentationMode() === 'optimized')
-            this.video.webkitSetPresentationMode('inline');
-        else
-            this.video.webkitSetPresentationMode('optimized');
+    handlePictureInPictureTouchStart: function() {
+        this.controls.pictureInPictureButton.classList.add('active');
     },
 
-    handleOptimizedFullscreenTouchStart: function() {
-        this.controls.optimizedFullscreenButton.classList.add('active');
-    },
+    handlePictureInPictureTouchEnd: function(event) {
+        this.controls.pictureInPictureButton.classList.remove('active');
 
-    handleOptimizedFullscreenTouchEnd: function(event) {
-        this.controls.optimizedFullscreenButton.classList.remove('active');
-
-        this.handleOptimizedFullscreenButtonClicked();
+        this.handlePictureInPictureButtonClicked();
 
         return true;
     },
 
-    handleOptimizedFullscreenTouchCancel: function(event) {
-        this.controls.optimizedFullscreenButton.classList.remove('active');
+    handlePictureInPictureTouchCancel: function(event) {
+        this.controls.pictureInPictureButton.classList.remove('active');
         return true;
     },
 
     handleStartPlaybackButtonTouchStart: function(event) {
         this.controls.startPlaybackButton.classList.add('active');
+        this.controls.startPlaybackButton.querySelector('.webkit-media-controls-start-playback-glyph').classList.add('active');
     },
 
     handleStartPlaybackButtonTouchEnd: function(event) {
         this.controls.startPlaybackButton.classList.remove('active');
+        this.controls.startPlaybackButton.querySelector('.webkit-media-controls-start-playback-glyph').classList.remove('active');
+
         if (this.video.error)
             return true;
 
         this.video.play();
+        this.canToggleShowControlsButton = true;
         this.updateControls();
 
         return true;
@@ -520,6 +495,7 @@ ControllerIOS.prototype = {
     updateStatusDisplay: function(event)
     {
         this.controls.startPlaybackButton.classList.toggle(this.ClassNames.failed, this.video.error !== null);
+        this.controls.startPlaybackButton.querySelector(".webkit-media-controls-start-playback-glyph").classList.toggle(this.ClassNames.failed, this.video.error !== null);
         Controller.prototype.updateStatusDisplay.call(this, event);
     },
 
@@ -541,13 +517,14 @@ ControllerIOS.prototype = {
     showControls: function()
     {
         this.updateShouldListenForPlaybackTargetAvailabilityEvent();
-        if (this.showInlinePlaybackPlaceholderOnly())
+        if (!this.video.controls)
             return;
-        
+
         this.updateForShowingControls();
         if (this.shouldHaveControls() && !this.controls.panelContainer.parentElement) {
             this.base.appendChild(this.controls.inlinePlaybackPlaceholder);
             this.base.appendChild(this.controls.panelContainer);
+            this.showShowControlsButton(false);
         }
     },
 
@@ -559,64 +536,91 @@ ControllerIOS.prototype = {
         Controller.prototype.setShouldListenForPlaybackTargetAvailabilityEvent.call(this, shouldListen);
     },
 
-    handlePresentationModeChange: function(event)
+    shouldReturnVideoLayerToInline: function()
+    {
+        return this.presentationMode() === 'inline';
+    },
+
+    updatePictureInPicturePlaceholder: function(event)
     {
         var presentationMode = this.presentationMode();
 
         switch (presentationMode) {
             case 'inline':
-                this.controls.inlinePlaybackPlaceholder.style.backgroundImage = "";
-                this.controls.inlinePlaybackPlaceholder.classList.add(this.ClassNames.hidden);
-                this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.optimized);
-                this.controls.inlinePlaybackPlaceholderTextTop.classList.remove(this.ClassNames.optimized);
-                this.controls.inlinePlaybackPlaceholderTextBottom.classList.remove(this.ClassNames.optimized);
-
-                this.controls.optimizedFullscreenButton.classList.remove(this.ClassNames.returnFromOptimized);
+                this.controls.panelContainer.classList.remove(this.ClassNames.pictureInPicture);
                 break;
-            case 'optimized':
-                var backgroundImage = "url('" + this.host.mediaUIImageData("optimized-fullscreen-placeholder") + "')";
-                this.controls.inlinePlaybackPlaceholder.style.backgroundImage = backgroundImage;
-                this.controls.inlinePlaybackPlaceholder.setAttribute('aria-label', "video playback placeholder");
-                this.controls.inlinePlaybackPlaceholder.classList.add(this.ClassNames.optimized);
-                this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.hidden);
-
-                this.controls.inlinePlaybackPlaceholderTextTop.innerText = this.host.mediaUIImageData("optimized-fullscreen-placeholder-text");
-                this.controls.inlinePlaybackPlaceholderTextTop.classList.add(this.ClassNames.optimized);
-                this.controls.inlinePlaybackPlaceholderTextBottom.innerText = "";
-                this.controls.inlinePlaybackPlaceholderTextBottom.classList.add(this.ClassNames.optimized);
-
-                this.controls.optimizedFullscreenButton.classList.add(this.ClassNames.returnFromOptimized);
+            case 'picture-in-picture':
+                this.controls.panelContainer.classList.add(this.ClassNames.pictureInPicture);
                 break;
             default:
-                this.controls.inlinePlaybackPlaceholder.style.backgroundImage = "";
-                this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.optimized);
-                this.controls.inlinePlaybackPlaceholderTextTop.classList.remove(this.ClassNames.optimized);
-                this.controls.inlinePlaybackPlaceholderTextBottom.classList.remove(this.ClassNames.optimized);
-
-                this.controls.optimizedFullscreenButton.classList.remove(this.ClassNames.returnFromOptimized);
+                this.controls.panelContainer.classList.remove(this.ClassNames.pictureInPicture);
                 break;
         }
 
-        this.updateControls();
-        this.updateCaptionContainer();
-        if (presentationMode != 'fullscreen' && this.video.paused && this.controlsAreHidden())
-            this.showControls();
+        Controller.prototype.updatePictureInPicturePlaceholder.call(this, event);
     },
 
-    handleFullscreenChange: function(event)
+    // Due to the bad way we are faking inheritance here, in particular the extends method
+    // on Controller.prototype, we don't copy getters and setters from the prototype. This
+    // means we have to implement them again, here in the subclass.
+    // FIXME: Use ES6 classes!
+
+    get scrubbing()
     {
-        Controller.prototype.handleFullscreenChange.call(this, event);
-        this.handlePresentationModeChange(event);
+        return Object.getOwnPropertyDescriptor(Controller.prototype, "scrubbing").get.call(this);
     },
 
-    controlsAlwaysVisible: function()
+    set scrubbing(flag)
     {
-        if (this.presentationMode() === 'optimized')
-            return true;
+        Object.getOwnPropertyDescriptor(Controller.prototype, "scrubbing").set.call(this, flag);
+    },
 
-        return Controller.prototype.controlsAlwaysVisible.call(this);
+    get pageScaleFactor()
+    {
+        return this._pageScaleFactor;
     },
 
+    set pageScaleFactor(newScaleFactor)
+    {
+        if (!newScaleFactor || this._pageScaleFactor === newScaleFactor)
+            return;
+
+        this._pageScaleFactor = newScaleFactor;
+
+        var scaleValue = 1 / newScaleFactor;
+        var scaleTransform = "scale(" + scaleValue + ")";
+
+        function applyScaleFactorToElement(element) {
+            if (scaleValue > 1) {
+                element.style.zoom = scaleValue;
+                element.style.webkitTransform = "scale(1)";
+            } else {
+                element.style.zoom = 1;
+                element.style.webkitTransform = scaleTransform;
+            }
+        }
+
+        if (this.controls.startPlaybackButton)
+            applyScaleFactorToElement(this.controls.startPlaybackButton);
+        if (this.controls.panel) {
+            applyScaleFactorToElement(this.controls.panel);
+            if (scaleValue > 1) {
+                this.controls.panel.style.width = "100%";
+                this.controls.timelineBox.style.webkitTextSizeAdjust = (100 * scaleValue) + "%";
+            } else {
+                var bottomAligment = -2 * scaleValue;
+                this.controls.panel.style.bottom = bottomAligment + "px";
+                this.controls.panel.style.paddingBottom = -(newScaleFactor * bottomAligment) + "px";
+                this.controls.panel.style.width = Math.round(newScaleFactor * 100) + "%";
+                this.controls.timelineBox.style.webkitTextSizeAdjust = "auto";
+            }
+            this.controls.panelBackground.style.height = (50 * scaleValue) + "px";
+
+            this.setNeedsTimelineMetricsUpdate();
+            this.updateProgress();
+            this.scheduleUpdateLayoutForDisplayedWidth();
+        }
+    },
 
 };