diff options
Diffstat (limited to 'Source/WebCore/Modules/modern-media-controls/media/media-controller.js')
-rw-r--r-- | Source/WebCore/Modules/modern-media-controls/media/media-controller.js | 203 |
1 files changed, 203 insertions, 0 deletions
diff --git a/Source/WebCore/Modules/modern-media-controls/media/media-controller.js b/Source/WebCore/Modules/modern-media-controls/media/media-controller.js new file mode 100644 index 000000000..710517482 --- /dev/null +++ b/Source/WebCore/Modules/modern-media-controls/media/media-controller.js @@ -0,0 +1,203 @@ +/* + * Copyright (C) 2016 Apple Inc. All Rights Reserved. + * + * Redistribution and use in source and binary forms, with or without + * modification, are permitted provided that the following conditions + * are met: + * 1. Redistributions of source code must retain the above copyright + * notice, this list of conditions and the following disclaimer. + * 2. Redistributions in binary form must reproduce the above copyright + * notice, this list of conditions and the following disclaimer in the + * documentation and/or other materials provided with the distribution. + * + * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY + * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE + * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR + * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR + * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, + * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, + * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR + * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY + * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT + * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE + * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. + */ + +const CompactModeMaxWidth = 241; +const ReducedPaddingMaxWidth = 300; +const AudioTightPaddingMaxWidth = 400; + +class MediaController +{ + + constructor(shadowRoot, media, host) + { + this.shadowRoot = shadowRoot; + this.media = media; + this.host = host; + + this.container = shadowRoot.appendChild(document.createElement("div")); + this.container.className = "media-controls-container"; + this.container.addEventListener("click", this, true); + + if (host) { + host.controlsDependOnPageScaleFactor = this.layoutTraits & LayoutTraits.iOS; + this.container.appendChild(host.textTrackContainer); + } + + this._updateControlsIfNeeded(); + + shadowRoot.addEventListener("resize", this); + + media.videoTracks.addEventListener("addtrack", this); + media.videoTracks.addEventListener("removetrack", this); + + if (media.webkitSupportsPresentationMode) + media.addEventListener("webkitpresentationmodechanged", this); + else + media.addEventListener("webkitfullscreenchange", this); + } + + // Public + + get layoutTraits() + { + let traits = window.navigator.platform === "MacIntel" ? LayoutTraits.macOS : LayoutTraits.iOS; + if (this.media.webkitSupportsPresentationMode) { + if (this.media.webkitPresentationMode === "fullscreen") + return traits | LayoutTraits.Fullscreen; + } else if (this.media.webkitDisplayingFullscreen) + return traits | LayoutTraits.Fullscreen; + + const controlsWidth = this._controlsWidth(); + if (controlsWidth <= CompactModeMaxWidth) + return traits | LayoutTraits.Compact; + + const isAudio = this.media instanceof HTMLAudioElement || this.media.videoTracks.length === 0; + if (isAudio && controlsWidth <= AudioTightPaddingMaxWidth) + return traits | LayoutTraits.TightPadding; + + if (!isAudio && controlsWidth <= ReducedPaddingMaxWidth) + return traits | LayoutTraits.ReducedPadding; + + return traits; + } + + togglePlayback() + { + if (this.media.paused) + this.media.play(); + else + this.media.pause(); + } + + // Protected + + set pageScaleFactor(pageScaleFactor) + { + this.controls.scaleFactor = pageScaleFactor; + this._updateControlsSize(); + } + + set usesLTRUserInterfaceLayoutDirection(flag) + { + this.controls.usesLTRUserInterfaceLayoutDirection = flag; + } + + macOSControlsBackgroundWasClicked() + { + // Toggle playback when clicking on the video but not on any controls on macOS. + if (this.media.controls) + this.togglePlayback(); + } + + handleEvent(event) + { + if (event instanceof TrackEvent && event.currentTarget === this.media.videoTracks) + this._updateControlsIfNeeded(); + else if (event.type === "resize" && event.currentTarget === this.shadowRoot) + this._updateControlsIfNeeded(); + else if (event.type === "click" && event.currentTarget === this.container) + this._containerWasClicked(event); + else if (event.currentTarget === this.media) { + this._updateControlsIfNeeded(); + if (event.type === "webkitpresentationmodechanged") + this._returnMediaLayerToInlineIfNeeded(); + } + } + + // Private + + _containerWasClicked(event) + { + // We need to call preventDefault() here since, in the case of Media Documents, + // playback may be toggled when clicking on the video. + event.preventDefault(); + } + + _updateControlsIfNeeded() + { + const layoutTraits = this.layoutTraits; + const previousControls = this.controls; + const ControlsClass = this._controlsClassForLayoutTraits(layoutTraits); + if (previousControls && previousControls.constructor === ControlsClass) { + this.controls.layoutTraits = layoutTraits; + this._updateControlsSize(); + return; + } + + // Before we reset the .controls property, we need to destroy the previous + // supporting objects so we don't leak. + if (this._supportingObjects) { + for (let supportingObject of this._supportingObjects) + supportingObject.destroy(); + } + + this.controls = new ControlsClass; + this.controls.delegate = this; + + if (this.shadowRoot.host && this.shadowRoot.host.dataset.autoHideDelay) + this.controls.controlsBar.autoHideDelay = this.shadowRoot.host.dataset.autoHideDelay; + + if (previousControls) { + this.controls.fadeIn(); + this.container.replaceChild(this.controls.element, previousControls.element); + this.controls.usesLTRUserInterfaceLayoutDirection = previousControls.usesLTRUserInterfaceLayoutDirection; + } else + this.container.appendChild(this.controls.element); + + this.controls.layoutTraits = layoutTraits; + this._updateControlsSize(); + + this._supportingObjects = [AirplaySupport, ControlsVisibilitySupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, StartSupport, StatusSupport, TimeLabelsSupport, TracksSupport, VolumeSupport, VolumeDownSupport, VolumeUpSupport].map(SupportClass => { + return new SupportClass(this); + }, this); + } + + _updateControlsSize() + { + this.controls.width = this._controlsWidth(); + this.controls.height = Math.round(this.media.offsetHeight * this.controls.scaleFactor); + } + + _controlsWidth() + { + return Math.round(this.media.offsetWidth * (this.controls ? this.controls.scaleFactor : 1)); + } + + _returnMediaLayerToInlineIfNeeded() + { + if (this.host) + window.requestAnimationFrame(() => this.host.setPreparedToReturnVideoLayerToInline(this.media.webkitPresentationMode !== PiPMode)); + } + + _controlsClassForLayoutTraits(layoutTraits) + { + if (layoutTraits & LayoutTraits.iOS) + return IOSInlineMediaControls; + if (layoutTraits & LayoutTraits.Fullscreen) + return MacOSFullscreenMediaControls; + return MacOSInlineMediaControls; + } + +} |