Index: Source/core/html/shadow/MediaControls.js |
diff --git a/Source/core/html/shadow/MediaControls.js b/Source/core/html/shadow/MediaControls.js |
new file mode 100644 |
index 0000000000000000000000000000000000000000..2bd044a7b98ec721d1ba66f4adbdbef1ebe9c526 |
--- /dev/null |
+++ b/Source/core/html/shadow/MediaControls.js |
@@ -0,0 +1,672 @@ |
+// 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; |
+ }; |
+}); |