[WIP] Re-implement MediaControls in Blink-in-JS

Source/core/html/shadow/MediaControls.js

+// Copyright 2014 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+'use strict';
+
+// FIXME: AXObject
+
+installClass('MediaControls', function(MediaControlsPrototype) {
+
+    var kFadeInDuration = 0.1;
+    var kFadeOutDuration = 0.3;
+
+    // If you change this value, then also update the corresponding value in
+    // LayoutTests/media/media-controls.js.
+    var kTimeWithoutMouseMovementBeforeHidingMediaControls = 3;
+
+    var kIgnoreVideoHover = 1 << 0;
+    var kIgnoreFocus = 1 << 1;
+
+    function fillZero(num, length) {
+        var str = num.toString();
+        while (str.length < length) {
+            str = '0' + str;
+        }
+        return str;
+    }
+
+    function formatMediaControlsTime(time, duration) {
+        if (!isFinite(time)) {
+            time = 0;
+        }
+        if (!isFinite(duration)) {
+            duration = 0;
+        }
+        var seconds = Math.floor(Math.abs(time));
+        var hours = Math.floor(seconds / (60 * 60));
+        var minutes = Math.floor((seconds / 60) % 60);
+        seconds %= 60;
+
+        // duration defines the format of how the time is rendered
+        var durationSecs = Math.floor(Math.abs(duration));
+        var durationHours = Math.floor(durationSecs / (60 * 60));
+        var durationMins = Math.floor((durationSecs / 60) % 60);
+
+        var sign = time < 0 ? '-' : '';
+        if (durationHours || hours) {
+            return sign + fillZero(hours, 1) + ':' + fillZero(minutes, 2) + ':' + fillZero(seconds, 2);
+        }
+        if (durationMins > 9) {
+            return sign + fillZero(minutes, 2) + ':' + fillZero(seconds, 2);
+        }
+        return sign + fillZero(minutes, 1) + ':' + fillZero(seconds, 2);
+    }
+
+    function show(element) {
+        element.style.removeProperty('display');
+    }
+
+    function hide(element) {
+        element.style.setProperty('display', 'none')
+    }
+
+    function createElement(parent, pseudoId) {
+        var e = window.document.createElement(parent);
+        if (!e) {
+            throw 'not reached';
+        }
+        e.setAttribute('pseudo', pseudoId);
+        return e;
+    }
+
+    function createOverlayPlayButton(mediaControls) {
+        var button = createElement('input', '-webkit-media-controls-overlay-play-button');
+        button.mediaControls_ = mediaControls;
+        button.type = 'button';
+        button.onclick = function(e) {
+            this.mediaControls_.togglePlayState();
+            this.updateDisplayType();
+            e.preventDefault();
+        };
+        button.updateDisplayType = function() {
+            if (this.mediaControls_.shouldShowControls() && this.mediaControls_.togglePlayStateWillPlay()) {
+                show(this);
+            } else {
+                hide(this);
+            }
+        };
+        button.updateDisplayType();
+        return button;
+    }
+
+    function createPanel() {
+        var panel = createElement('div', '-webkit-media-controls-panel')
+        panel.isDisplayed_ = false;
+        panel.opaque_ = true;
+        panel.transitionTimer_ = null;
+        panel.startTimer = function() {
+            stopTimer();
+            // FIXME: Use transition end event
+            this.transitionTimer_ = setTimeout(kFadeOutDuration, this.transitionTimerFired);
+        };
+        panel.stopTimer = function() {
+            if (this.transitionTimer_ !== null) {
+                clearTimeout(this.this.transitionTimer_);
+                this.transitionTimer_ = null;
+            }
+        };
+        panel.transitionTimerFired = function() {
+            if (!this.opaque_) {
+                hide(this);
+            }
+            // FIXME: Use web animation
+            this.stopTimer();
+        };
+        panel.makeOpaque = function() {
+            if (this.opaque_) {
+                return;
+            }
+            this.style.transformProperty = 'opacity';
+            this.style.transformDuration = kFadeInDuration + 's';
+            this.style.opacity = 1.0;
+            this.opaque_ = true;
+            if (this.isDisplayed_) {
+                show(this);
+            }
+        };
+        panel.makeTransparent = function() {
+            if (!this.opaque_) {
+                return;
+            }
+            this.style.transformProperty = 'opacity';
+            this.style.transformDuration = kFadeOutDuration + 's';
+            this.style.opacity = 0.0;
+            this.opacity_ = false;
+            this.startTimer();
+        };
+        panel.setIsDisplayed = function(isDisplayed) {
+            this.isDisplayed_ = isDisplayed;
+        };
+        return panel;
+    }
+
+    function createPlayButton(mediaControls) {
+        var imagePlay = 'url(' + mediaControls.getResourceDataURL('mediaplayerPlay') + ')';
+        var imagePause = 'url(' + mediaControls.getResourceDataURL('mediaplayerPause') + ')';
+        var imagePlayDisabled = 'url(' + mediaControls.getResourceDataURL('mediaplayerPlayDisabled') + ')';
+
+        // FIXME: Consider MediaControlInputElement::isMouseFocusable()
+
+        var button = createElement('input', '-webkit-media-controls-play-button');
+        button.mediaControls_ = mediaControls;
+        button.style.backgroundSize = '100%';
+        button.setAttribute('type', 'button');
+        button.onclick = function(e) {
+            this.mediaControls_.togglePlayState();
+            this.updateDisplayType();
+            e.preventDefault();
+        };
+        button.updateDisplayType = function() {
+            if (!this.mediaControls_.hasSource()) {
+                this.style.backgroundImage = imagePlayDisabled;
+                return;
+            }
+            if (this.mediaControls_.togglePlayStateWillPlay()) {
+                this.style.backgroundImage = imagePlay;
+            } else {
+                this.style.backgroundImage = imagePause;
+            }
+        };
+        button.updateDisplayType();
+        return button;
+    }
+
+    function createTimeline(mediaControls) {
+        var timeline = createElement('input', '-webkit-media-controls-timeline');
+        timeline.mediaControls_ = mediaControls;
+        timeline.setAttribute('type', 'range');
+        timeline.setAttribute('step', 'any');
+        timeline.onmousedown = function(e) {
+            if (e.button != 0) {
+                return;
+            }
+            this.mediaControls_.beginScrubbing();
+            this.mediaControls_.updateCurrentTimeDisplay();
+        };
+        timeline.onmouseup = function(e) {
+            if (e.button != 0) {
+                return;
+            }
+            this.mediaControls_.endScrubbing();
+            this.mediaControls_.updateCurrentTimeDisplay();
+        };
+        timeline.oninput = function(e) {
+            e.preventDefault();
+            this.mediaControls_.setCurrentTime(this.value);
+            this.mediaControls_.updateCurrentTimeDisplay();
+        };
+        timeline.setPosition = function(currentTime) {
+            this.value = currentTime;
+        };
+        timeline.setDuration = function(duration) {
+            this.setAttribute('max', isFinite(duration) ? duration : 0);
+        };
+        return timeline;
+    }
+
+    function createCurrentTimeDisplay() {
+        var display = createElement('div', '-webkit-media-controls-current-time-display');;
+        return display;
+    }
+
+    function createTimeRemainingDisplay() {
+        var display = createElement('div', '-webkit-media-controls-time-remaining-display');;
+        return display;
+    }
+
+    function createMuteButton(mediaControls) {
+        var imageSoundLevel3 = 'url(\'' + mediaControls.getResourceDataURL('mediaplayerSoundLevel3') + '\')';
+        var imageSoundLevel2 = 'url(\'' + mediaControls.getResourceDataURL('mediaplayerSoundLevel2') + '\')';
+        var imageSoundLevel1 = 'url(\'' + mediaControls.getResourceDataURL('mediaplayerSoundLevel1') + '\')';
+        var imageSoundLevel0 = 'url(\'' + mediaControls.getResourceDataURL('mediaplayerSoundLevel0') + '\')';
+        var imageSoundDisabled = 'url(\'' + mediaControls.getResourceDataURL('mediaplayerSoundDisabled') + '\')';
+
+        var button = createElement('input', '-webkit-media-controls-mute-button');
+        button.mediaControls_ = mediaControls;
+        button.setAttribute('type', 'button');
+        button.style.backgroundSize = '100%';
+        button.onclick = function(e) {
+            this.mediaControls_.toggleMuted();
+            e.preventDefault();
+        };
+        button.updateDisplayType = function() {
+            if (!this.mediaControls_.hasSource() || !this.mediaControls_.hasAudio()) {
+                this.style.backgroundImage = imageSoundDisabled;
+                return;
+            }
+            if (this.mediaControls_.isMuted() || this.mediaControls_.volume() <= 0) {
+                this.style.backgroundImage = imageSoundLevel0;
+                return;
+            }
+            if (this.mediaControls_.volume() <= 0.33) {
+                this.style.backgroundImage = imageSoundLevel1;
+                return;
+            }
+            if (this.mediaControls_.volume() <= 0.66) {
+                this.style.backgroundImage = imageSoundLevel2;
+                return;
+            }
+            this.style.backgroundImage = imageSoundLevel3;
+        };
+        button.updateDisplayType();
+        return button
+    }
+
+    function createVolumeSlider(mediaControls) {
+        var slider = createElement('input', '-webkit-media-controls-volume-slider');
+        slider.mediaControls_ = mediaControls;
+        slider.setAttribute('type', 'range');
+        slider.setAttribute('step', 'any');
+        slider.setAttribute('max', '1');
+        var defaultEventHandler = function(e) {
+            if (e.button !== undefined && e.button !== 0) {
+                return;
+            }
+            this.mediaControls_.setVolume(this.value);
+            this.mediaControls_.setMuted(false);
+        };
+        slider.oninput = defaultEventHandler;
+        slider.onmouseup = defaultEventHandler;
+        slider.onmousedown = defaultEventHandler;
+        return slider;
+    }
+
+    function createToggleClosedCaptionsButton(mediaControls) {
+        var imageClosedCaption = 'url(\'' + mediaControls.getResourceDataURL('mediaplayerClosedCaption') + '\')';
+        var imageClosedCaptionDisabled = 'url(\'' + mediaControls.getResourceDataURL('mediaplayerClosedCaptionDisabled') + '\')';
+
+        var button = createElement('input', '-webkit-media-controls-toggle-closed-captions-button');
+        button.mediaControls_ = mediaControls;
+        button.setAttribute('type', 'button');
+        hide(button);
+        button.updateDisplayType = function() {
+            var captionsVisible = this.mediaControls_.isClosedCaptionsVisible();
+            if (captionsVisible) {
+                this.style.backgroundImage = imageClosedCaption;
+            } else {
+                this.style.backgroundImage = imageClosedCaptionDisabled;
+            }
+            this.checked = captionsVisible;
+        };
+        button.onclick = function(e) {
+            this.mediaControls_.toggleClosedCaptionsVisible();
+            this.checked = this.mediaControls_.isClosedCaptionsVisible();
+            this.updateDisplayType();
+            e.preventDefault();
+        };
+        button.updateDisplayType();
+        return button;
+    }
+
+    function createFullscreenButton(mediaControls) {
+        var button = createElement('input', '-webkit-media-controls-fullscreen-button');
+        button.mediaControls_ = mediaControls;
+        button.setAttribute('type', 'button');
+        hide(button);
+        button.onclick = function(e) {
+            this.mediaControls_.toggleFullscreen();
+            e.preventDefault();
+        };
+        button.setIsFullscreen = function(isFullscreen) {
+            // This function will be needed for AXObject.
+        };
+        return button;
+    }
+
+    function createTextTrackContainer(mediaControls) {
+        var container = createElement('div', '-webkit-media-text-track-container');
+        container.updateDisplay = function() {
+            this.mediaControls_.updateTextTrackContainerDisplay(this);
+            if (this.hasChildNodes()) {
+                show(this);
+            } else {
+                hide(this);
+            }
+        };
+        container.updateSizes = function() {
+            this.style.fontSize = this.mediaControls_.getTextTrackContainerFontSize() + 'px';
+        };
+        container.updateDisplay();
+        return container
+    }
+
+    function mouseOverEventHandler(e) {
+        if (!this.containsRelatedTarget_(e)) {
+            this.isMouseOverControls_ = true;
+            if (!this.togglePlayStateWillPlay()) {
+                this.makeOpaque_();
+                if (this.shouldHideMediaControls_()) {
+                    this.startHideMediaControlsTimer_();
+                }
+            }
+        }
+    }
+
+    function mouseOutEventHandler(e) {
+        if (!this.containsRelatedTarget_(e)) {
+            this.isMouseOverControls_ = false;
+            this.stopHideMediaControlsTimer_();
+        }
+    }
+
+    function mouseMoveEventHandler(e) {
+        this.makeOpaque_();
+        if (this.shouldHideMediaControls_(kIgnoreVideoHover)) {
+            this.startHideMediaControlsTimer_();
+        }
+    }
+
+    MediaControlsPrototype.createdCallback = function(mediaElement) {
+        this.mediaElement_ = mediaElement;
+        this.textDisplayContainer_ = null;
+        this.hideMediaControlsTimer_ = null;
+        this.isMouseOverControls_ = false;
+        this.isPausedForScrubbing_ = false;
+
+        this.setAttribute('pseudo', '-webkit-media-controls');
+
+        if (this.isOverlayPlayButtonEnabled()) {
+            this.overlayEnclosure_ = createElement('div', '-webkit-media-controls-overlay-enclosure');
+            this.overlayPlayButton_ = createOverlayPlayButton(this);
+            this.overlayEnclosure_.appendChild(this.overlayPlayButton_);
+            this.appendChild(this.overlayEnclosure_);
+        }
+
+        this.enclosure_ = createElement('div', '-webkit-media-controls-enclosure');
+        this.panel_ = createPanel();
+
+        this.playButton_ = createPlayButton(this);
+        this.panel_.appendChild(this.playButton_);
+        this.timeline_ = createTimeline(this);
+        this.panel_.appendChild(this.timeline_);
+        this.currentTimeDisplay_ = createCurrentTimeDisplay();
+        this.panel_.appendChild(this.currentTimeDisplay_);
+        hide(this.currentTimeDisplay_);
+        this.durationDisplay_ = createTimeRemainingDisplay();
+        this.panel_.appendChild(this.durationDisplay_);
+        this.muteButton_ = createMuteButton(this);
+        this.panel_.appendChild(this.muteButton_);
+        this.volumeSlider_ = createVolumeSlider(this);
+        this.panel_.appendChild(this.volumeSlider_);
+        this.toggleClosedCaptionsButton_ = createToggleClosedCaptionsButton(this);
+        this.panel_.appendChild(this.toggleClosedCaptionsButton_);
+        this.fullscreenButton_ = createFullscreenButton(this);
+        this.panel_.appendChild(this.fullscreenButton_);
+
+        this.enclosure_.appendChild(this.panel_);
+        this.appendChild(this.enclosure_);
+
+        this.onmouseover = mouseOverEventHandler;
+        this.onmouseout = mouseOutEventHandler;
+        this.onmousemove = mouseMoveEventHandler;
+    };
+
+    MediaControlsPrototype.hasSource = function() {
+        return this.mediaElement_.networkState != HTMLMediaElement.NETWORK_EMPTY && this.mediaElement_.networkState != HTMLMediaElement.NETWORK_NO_SOURCE;
+    }
+
+    MediaControlsPrototype.reset = function() {
+        var duration = this.mediaElement_.duration;
+        this.durationDisplay_.innerText = formatMediaControlsTime(duration, duration);
+        // FIXME: this will be needed for AccessibilityMediaTimeDisplay::stringValue
+        // this.durationDisplay_.setCurrentValue(duration);
+        this.updatePlayState_();
+        this.updateCurrentTimeDisplay();
+        this.timeline_.setDuration(duration);
+        this.timeline_.setPosition(this.mediaElement_.currentTime);
+        if (this.hasAudio()) {
+            show(this.volumeSlider_);
+        } else {
+            hide(this.volumeSlider_);
+        }
+        this.updateVolume();
+        this.refreshClosedCaptionsButtonVisibility();
+        if (this.hasVideo() && this.fullscreenIsSupported()) {
+            show(this.fullscreenButton_);
+        } else {
+            hide(this.fullscreenButton_);
+        }
+    };
+
+    MediaControlsPrototype.show = function() {
+        this.makeOpaque_();
+        this.panel_.setIsDisplayed(true);
+        show(this.panel_);
+        if (this.overlayPlayButton_) {
+            this.overlayPlayButton_.updateDisplayType();
+        }
+    };
+
+    MediaControlsPrototype.mediaElementFocused = function() {
+        show(this);
+        this.stopHideMediaControlsTimer_();
+    };
+
+    MediaControlsPrototype.hide = function() {
+        this.panel_.setIsDisplayed(false);
+        hide(this.panel_);
+        if (this.overlayPlayButton_) {
+            hide(this.overlayPlayButton_);
+        }
+    };
+
+    MediaControlsPrototype.makeOpaque_ = function() {
+        this.panel_.makeOpaque();
+    };
+
+    MediaControlsPrototype.makeTransparent_ = function() {
+        this.panel_.makeTransparent();
+    };
+
+    MediaControlsPrototype.shouldHideMediaControls_ = function(behaviorFlags) {
+        if (this.hasVideo()) {
+            return false;
+        }
+        var ignoreVideoHover = behaviorFlags & kIgnoreVideoHover;
+        // FIXME: Implement hovered()
+        if (this.panel_.hovered() || (!ignoreVideoHover && this.isMouseOverControls)) {
+            return false;
+        }
+        var ignoreFocus = behaviroFlags & kIgnoreFocus;
+        // FIXME: Implement contains(document().focusedElement())
+        if (!ignoreFocus || (this.mediaElement_.focused() || false)) {
+            return false;
+        }
+        return true;
+    };
+
+    MediaControlsPrototype.playbackStarted = function() {
+        show(this.currentTimeDisplay_);
+        hide(this.durationDisplay_);
+        this.updatePlayState_();
+        this.timeline_.setPosition(this.mediaElement_.currentTime);
+        this.updateCurrentTimeDisplay();
+        this.startHideMediaControlsTimer_();
+    };
+
+    MediaControlsPrototype.playbackProgressed = function() {
+        this.timeline_.setPosition(this.mediaElement_.currentTime);
+        this.updateCurrentTimeDisplay();
+        if (this.shouldHideMediaControls_()) {
+            this.makeTransparent_();
+        }
+    };
+
+    MediaControlsPrototype.playbackStopped = function() {
+        this.updatePlayState_();
+        this.timeline_.setPosition(this.mediaElement_.currentTime);
+        this.updateCurrentTimeDisplay();
+        this.makeOpaque_();
+        this.stopHideMediaControlsTimer_();
+    };
+
+    MediaControlsPrototype.updatePlayState_ = function() {
+        if (this.isPausedForScrubbing_) {
+            return;
+        }
+        if (this.overlayPlayButton_) {
+            this.overlayPlayButton_.updateDisplayType();
+        }
+        this.playButton_.updateDisplayType();
+    };
+
+    MediaControlsPrototype.beginScrubbing = function() {
+        if (!this.togglePlayStateWillPlay()) {
+            this.isPausedForScrubbing_ = true;
+            this.togglePlayState();
+        }
+    };
+
+    MediaControlsPrototype.endScrubbing = function() {
+        if (this.isPausedForScrubbing_) {
+            this.isPausedForScrubbing_ = false;
+            if (this.togglePlayStateWillPlay()) {
+                this.togglePlayState();
+            }
+        }
+    };
+
+    MediaControlsPrototype.updateCurrentTimeDisplay = function() {
+        var now = this.mediaElement_.currentTime;
+        var duration = this.mediaElement_.duration;
+        if (now > 0) {
+            show(this.currentTimeDisplay_);
+            hide(this.durationDisplay_);
+        }
+        this.currentTimeDisplay_.innerText = formatMediaControlsTime(now, duration);
+        // FIXME: this will be needed for AccessibilityMediaTimeDisplay::stringValue
+        //this.currentTimeDisplay.setCurrentValue(now);
+    };
+
+    MediaControlsPrototype.updateVolume = function() {
+        this.muteButton_.updateDisplayType();
+        if (this.mediaElement_.muted) {
+            this.volumeSlider_.value = 0;
+        } else {
+            this.volumeSlider_.value = this.mediaElement_.volume;
+        }
+    };
+
+    MediaControlsPrototype.changedClosedCaptionsVisibility = function() {
+        // FIXME
+        //this.toggleClosedCaptionsButton_.updateDisplayType();
+    };
+
+    MediaControlsPrototype.refreshClosedCaptionsButtonVisibility = function() {
+        if (this.hasClosedCaptions()) {
+            show(this.toggleClosedCaptionsButton_);
+        } else {
+            hide(this.toggleClosedCaptionsButton_);
+        }
+    };
+
+    MediaControlsPrototype.closedCaptionTracksChanged = function() {
+        this.refreshClosedCaptionsButtonVisibility();
+    };
+
+    MediaControlsPrototype.enteredFullscreen = function() {
+        this.fullscreenButton_.setIsFullscreen(true);
+        this.stopHideMediaControlsTimer_();
+        this.startHideMediaControlsTimer_();
+    };
+
+    MediaControlsPrototype.exitedFullscreen = function() {
+        this.fullscreenButton_.setIsFullscreen(false);
+        this.stopHideMediaControlsTimer_();
+        this.startHideMediaControlsTimer_();
+    };
+
+    MediaControlsPrototype.hideMediaControlsTimerFired_ = function(timer) {
+        if (this.togglePlayStateWillPlay()) {
+            return;
+        }
+        if (!this.shouldHideMediaControls_(kIgnoreFocus | kIgnoreVideoHover)) {
+            return;
+        }
+        this.makeTransparent_();
+    };
+
+    MediaControlsPrototype.startHideMediaControlsTimer_ = function() {
+        // FIXME
+        // this.hideMediaControlsTimer_.startOneShot(timeWithoutMouseMovementBeforeHidingMediaControls, FROM_HERE);
+    };
+
+    MediaControlsPrototype.stopHideMediaControlsTimer_ = function() {
+        // FIXME
+        // this.hideMediaControlsTimer_.stop();
+    };
+
+    MediaControlsPrototype.containsRelatedTarget_ = function(e) {
+        if (!(e instanceof MouseEvent)) {
+            return false;
+        }
+        var relatedTarget = e.relatedTarget;
+        if (!relatedTarget) {
+            return false;
+        }
+        return this.contains(relatedTarget);
+    };
+
+    MediaControlsPrototype.createTextTrackDisplay_ = function() {
+        if (this.textDisplayContainer_) {
+            return;
+        }
+
+        this.textDisplayContainer_ = createTextTrackContainerElement();
+        if (this.overlayEnclosure_ && this.overlayPlayButton_) {
+            this.overlayEnclosure_.insertBefore(this.textDisplayContainer_, this.overlayPlayButton_);
+        } else {
+            this.insertBefore_(this.textDisplayContainer_, this.enclosure_);
+        }
+    };
+
+    MediaControlsPrototype.showTextTarckDisplay_ = function() {
+        if (!this.textDisplayContainer_) {
+            this.createTextTrackDisplay_();
+        }
+        this.textDisplayContainer_.show();
+    };
+
+    MediaControlsPrototype.hideTextTrackDisplay_ = function() {
+        if (!this.textDisplayContainer_) {
+            this.createTextTrackDisplay_();
+        }
+        this.textDisplayContainer_.hide();
+    };
+
+    MediaControlsPrototype.updateTextTrackDisplay = function() {
+        if (!this.textDisplayContainer_) {
+            this.createTextTrackDisplay_();
+        }
+        this.textDisplayContainer_.updateDisplay();
+    };
+
+    MediaControlsPrototype.toggleMuted = function() {
+        this.mediaElement_.muted = !this.mediaElement_.muted;
+    };
+
+    MediaControlsPrototype.isMuted = function() {
+        return this.mediaElement_.muted;
+    };
+
+    MediaControlsPrototype.setMuted = function(muted) {
+        this.mediaElement_.muted = muted;
+    };
+
+    MediaControlsPrototype.volume = function() {
+        return this.mediaElement_.volume;
+    };
+
+    MediaControlsPrototype.setVolume = function(volume) {
+        this.mediaElement_.volume = volume;
+    };
+
+    MediaControlsPrototype.width = function() {
+        return this.mediaElement_.width;
+    };
+
+    MediaControlsPrototype.height = function() {
+        return this.mediaElement_.height;
+    };
+});