[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';
+
+installClass('MediaControls', function(global, MediaControlsPrototype) {
+
+    var kFadeInDuration = 0.1;
+    var kFadeOutDuration = 0.3;
+
+    function show(element) {
+        element.style.removeProperty('display');
+    }
+
+    function hide(element) {
+        element.style.setProperty('display', 'none')
+    }
+
+    function createElement(parent, pseudoId) {
+        var e = global.document.createElement(parent);
+        if (!e) {
+            return null;
+        }
+        e.setAttribute('pseudo', pseudoId);
+        return e;
+    }
+
+    function createPanel() {
+        var panel = createElement('div', '-webkit-media-controls-panel')
+        panel.isDisplayed_ = false;
+        panel.opaque_ = true;
+        panel.transitionTimer_ = null;
+        panel.startTimer = function() {
+            stopTimer();
+            this.transitionTimer_ = setTimeout(kFadeOutDuration, this.transitionTimerFired);

[abarth-chromium, 2014/08/11 18:04:12]

Why not listen for the transition end event?

[hajimehoshi, 2014/08/12 06:54:09]

I'm just copying implementation from C++. Now I still can't confirm this
transition's behavior because I've not implemented the other methods and event
handlers. I'll replace this as you suggested. I added a comment for now.

+        };
+        panel.stopTimer = function() {
+            if (this.transitionTimer_ !== null) {
+                clearTimeout(this.this.transitionTimer_);
+                this.transitionTimer_ = null;
+            }
+        };
+        panel.transitionTimerFired = function() {
+            if (!this.opaque_) {
+                hide();
+            }
+            this.stopTimer();
+        };

[abarth-chromium, 2014/08/11 18:04:12]

Should we use a web animation instead of a CSS transition?

[hajimehoshi, 2014/08/12 06:54:09]

Same as above.

+        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 createTimeline() {
+        var timeline = createElement('input', '-webkit-media-controls-timeline');
+        timeline.setAttribute('type', 'range');
+        timeline.setAttribute('step', 'any');
+        timeline.defaultEventHandler = function(event) {
+            // TODO
+        };
+        timeline.willRespondToMouseClickEvents = function() {
+            // TODO
+        };
+        timeline.setPosition = function(currentTime) {
+            this.value = currentTime;
+        };
+        timeline.setDuration = function(duration) {
+            this.setAttribute('max', isFinite(duration) ? duration : 0);
+        };
+        return timeline;
+    }
+
+    MediaControlsPrototype.createdCallback = function(mediaElement) {
+        this.mediaElement_ = mediaElement;
+
+        this.setAttribute('pseudo', '-webkit-media-controls');
+
+        // TODO: Maybe OverlayEnclosure is needed
+
+        var enclosure = createElement('div', '-webkit-media-controls-enclosure');
+        this.panel_ = createPanel();
+
+        var playButton = createElement('input', '-webkit-media-controls-play-button');
+        this.panel_.appendChild(playButton);
+        this.timeline_ = createTimeline();
+        this.panel_.appendChild(this.timeline_);
+        var currentTimeDisplay = createElement('div', '-webkit-media-controls-current-time-display');
+        this.panel_.appendChild(currentTimeDisplay);
+        this.durationDisplay_ = createElement('div', '-webkit-media-controls-time-remaining-display');
+        this.panel_.appendChild(this.durationDisplay_);
+        var muteButton = createElement('input', '-webkit-media-controls-mute-button');
+        this.panel_.appendChild(muteButton);
+        this.volumeSlider_ = createElement('input', '-webkit-media-controls-volume-slider');
+        this.panel_.appendChild(this.volumeSlider_);
+        this.fullscreenButton_ = createElement('input', '-webkit-media-controls-fullscreen-button');
+        this.panel_.appendChild(this.fullscreenButton_);
+
+        enclosure.appendChild(this.panel_);
+        this.appendChild(enclosure);
+    };
+
+    MediaControlsPrototype.reset = function() {
+        var duration = this.mediaElement_.duration;
+        this.durationDisplay_.innerText = "foo"; // TODO
+        //this.durationDisplay_.setCurrentValue(duration);
+        this.updatePlayState();
+        this.updateCurrentTimeDisplay();
+        this.timeline_.setDuration(duration);
+        this.timeline_.setPosition(this.mediaElement_.currentTime);
+        if (this.mediaElement_.hasAudio()) {
+            hide(this.volumeSlider_);
+        } else {
+            show(this.volumeSlider_);
+        }
+        this.updateVolume();
+        this.refreshClosedCaptionsButtonVisibility();
+        if (this.mediaElement_.hasVideo() && this.fullscreenIsSupported()) {
+            show(this.fullscreenButton_);
+        } else {
+            hide(this.fullscreenButton_);
+        }
+    };
+
+    MediaControlsPrototype.show = function() {
+        // TODO

[haraken, 2014/08/11 11:09:33]

Nit: Blink uses FIXME instead of TODO.

+    };
+
+    MediaControlsPrototype.mediaElementFocused = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.hide = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.makeOpaque = function() {
+        this.panel_.makeOpaque();
+    };
+
+    MediaControlsPrototype.makeTransparent = function() {
+        this.panel_.makeTransparent();
+    };
+
+    MediaControlsPrototype.shouldHideMediaControls = function(behaviorFlags) {
+        // TODO
+    };
+
+    MediaControlsPrototype.playbackStarted = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.updatePlayState = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.beginScrubbing = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.endScrubbing = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.updateCurrentTimeDisplay = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.updateVolume = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.changedClosedCaptionsVisibility = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.refreshClosedCaptionsButtonVisibility = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.closedCaptionTracksChanged = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.enteredFullscreen = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.exitedFullscreen = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.defaultEventHandler = function(event) {
+        // TODO
+    };
+
+    MediaControlsPrototype.hideMediaControlsTimerFired = function(timer) {
+        // TODO
+    };
+
+    MediaControlsPrototype.startHideMediaControlsTimer = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.stopHideMediaControlsTimer = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.containsRelatedTarget = function(event) {
+        // TODO
+    };
+
+    MediaControlsPrototype.createTextTrackDisplay = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.showTextTarckDisplay = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.hideTextTrackDisplay = function() {
+        // TODO
+    };
+
+    MediaControlsPrototype.updateTextTrackDisplay = function() {
+        // TODO
+    };
+});