{this.getCurrentPage()}
\n }\n}\n","import Panel from \"./Panel.js\"\n\nexport default class Quality extends Panel {\n\n constructor(props, context) {\n super(props, context)\n this.listOptions = [\n { label: \"Auto\", value: \"0.25\" } // TODO: Auto needs to be localized\n ]\n this.qualityLevels = []\n this.state.title = \"Quality\" // TODO: This needs to be localized\n this.state.activeIndex = -1\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n componentWillMount() {\n super.componentWillMount()\n this.onqualitylevelsloaded({detail: this.player.qualityLevels})\n this.onqualitychanging({detail: this.player.qualityLevels[this.player.quality]})\n this.open = true\n }\n\n clickHandler(object, index) {\n this.player.quality = index - 1\n if (!index)\n this.onqualitychanging()\n }\n\n onqualitylevelsloaded(event) {\n this.qualityLevels = event.detail\n this.qualityLevels.forEach((item) => {\n this.listOptions.push({\"label\": `${Math.round(item.bitrate / 1000)} Kbps`})\n })\n this.setState({redraw: true})\n }\n\n onqualitychanging(event) {\n let index = -1, autoLevel = false\n try {\n autoLevel = this.player.qualityMode\n index = autoLevel == \"auto\" ? -1 : (event.detail ? this.qualityLevels.findIndex(levelObject => levelObject.qualityIndex == event.detail.qualityIndex && levelObject.level == event.detail.level) : this.props.quality.quality)\n } catch (e) {}\n\n this.setState({activeIndex: index})\n }\n\n isOptionSelected(item, index) {\n return (index - 1 === this.state.activeIndex)\n }\n}\n","import Panel from \"./Panel.js\"\n\nexport default class PlaybackRate extends Panel {\n\n constructor(props, context) {\n super(props, context)\n this.state.title = \"Speed\" // TODO: This needs to be localized\n this.listOptions = [\n { label: \"0.25\", value: 0.25 },\n { label: \"0.5\", value: 0.5 },\n { label: \"Normal\", value: 1 },\n { label: \"1.25\", value: 1.25 },\n { label: \"1.5\", value: 1.5 },\n { label: \"2\", value: 2 }\n ]\n\n this.state.activeIndex = 2\n this.listOptions.forEach((option, index) => {\n if (option.value == this.player.playbackRate) {\n this.state.activeIndex = index\n }\n })\n this.classList.add(\"amp-playback-rate\")\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n clickHandler(object, index) {\n this.player.playbackRate = object.value\n super.clickHandler(object, index)\n }\n\n isOptionSelected(item, index) {\n return (parseFloat(item.value) === parseFloat(this.player.playbackRate))\n }\n}\n","import Panel from \"./Panel.js\"\n\nexport default class AudioTracks extends Panel {\n\n constructor(props, context) {\n super(props, context)\n this.listOptions = []\n this.audioTracks = []\n this.activeIds = []\n this.state.title = \"Audio\" // TODO: Should be localized\n this.state.activeIndex = -1\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n componentWillMount() {\n super.componentWillMount()\n this.audioTracks = this.player.audioTracks\n this.oncanplaythrough({detail: this.audioTracks})\n this.open = true\n }\n\n clickHandler(object, index) {\n this.player.audioTracks[index].enabled = true\n this.setState({activeIndex: index-1})\n this.setState({redraw: true})\n }\n\n onmediachange(event) {\n \tthis.listOptions = []\n \tthis.activeIds = []\n }\n\n oncanplaythrough(event) {\n \tthis.audioTracks = this.player.audioTracks\n this.audioTracks.forEach((item) => {\n if (this.activeIds[item.id] == null) {\n const lang = this.player.localization.getLanguageString(item.language) || item.language\n \tconst label = item.label || lang || item.id || this.player.localization.getString(\"MSG_UNKNOWN\")\n this.activeIds[item.id] = true\n this.listOptions.push({label})\n }\n })\n this.setState({redraw: true})\n }\n\n isOptionSelected(item, index) {\n return this.player.audioTracks[index].enabled\n }\n}\n","import PanelMenu from \"./PanelMenu.js\"\nimport CaptionSettings from \"./CaptionSettings.js\"\nimport Quality from \"./Quality.js\"\nimport PlaybackRate from \"./PlaybackRate.js\"\nimport AudioTracks from \"./AudioTracks.js\"\nimport ListItem from \"./ListItem.js\"\nimport Utils from \"./Utils.js\"\n\nexport default class SettingsPanel extends PanelMenu {\n\n constructor(props, context) {\n super(props, context)\n this.state.settingsLevel = 0\n this.state.bitrateLabel = \"Auto\"\n this.state.captioningSettingState = null\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n onready(event) {\n this.setState({\"autoplay\": this.player.autoplay})\n }\n\n onseeked(event) {\n \tthis.open = false\n }\n\n toggle() {\n super.toggle()\n this.state.settingsLevel = 0\n }\n\n onqualitychanging(event) {\n let brLabel = this.player.qualityMode === \"auto\" ? \"Auto\" : (Math.round(event.detail.bitrate / 1000) + \"Kbps\") // TODO: Needs to be localized\n this.state.quality = this.state.qualityLevels ? this.state.qualityLevels.findIndex(levelObject => levelObject.qualityIndex == event.detail.qualityIndex && levelObject.level == event.detail.level) : -1\n this.setState({bitrateLabel: brLabel})\n }\n\n changeState(value, event) {\n if (event.type == \"keydown\" && (event.keyCode == 13 || event.keyCode == 32 || event.keyCode == 37 || event.keyCode == 38 || event.keyCode == 39 || event.keyCode == 40) && this.mouseFocus != true) {\n if (event.keyCode == 37 && this.state.settingsLevel == 0)\n return\n this.state.keyDown = true\n }\n setTimeout(() => { this.setState({settingsLevel:value});}, 100)\n }\n\n autoplayToggle() {\n this.setState({\"autoplay\": (this.player.autoplay = !this.player.autoplay)})\n }\n\n componentWillUpdate(nextProps, nextState) {\n if(nextState.settingsLevel == 1 && this.refs.firstElem.state.captionsettings)\n this.setState({'captioningSettingState': this.refs.firstElem.state.captionsettings})\n else if ((this.refs.firstElem != null) && !isNaN(this.refs.firstElem.state.activeIndex))\n this.setState({'playbackSettingState': this.refs.firstElem.state.activeIndex})\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (this.state.keyDown) {\n if (typeof this.refs.firstElem.focus === \"function\") {\n this.refs.firstElem.focus()\n }\n else {\n this.refs.firstElem.refs.element.childNodes[1].focus()\n }\n this.state.keyDown = false\n }\n }\n\n currentAudioTrackLabel () {\n let audioTracks = this.player.audioTracks\n for (var i=0; i\n { isCaptionEnabled &&\n \n Subtitles\n \n {this.player.captioning.hidden ? \"Off\": this.player.localization.getLanguageString(this.player.captioning.track.language)}\n \n }\n { isQualityEnabled &&\n \n Quality\n \n {this.state.bitrateLabel}\n \n }\n { this.player.mode != \"flash\" &&\n \n Speed\n \n {this.player.playbackRate === 1 ? 'Normal' : this.player.playbackRate}\n \n }\n { audioTracksAvailable &&\n \n Audio\n \n {this.currentAudioTrackLabel()}\n \n }\n {\n \n Autoplay\n \n \n }\n
)\n break\n case 1:\n return (\n \n
)\n break\n case 2:\n return (\n
)\n break\n case 3:\n return (\n
)\n break\n case 4:\n return (\n
)\n break\n }\n\n }\n}\n","import PanelControl from \"./PanelControl.js\"\nimport Utils from \"./Utils.js\"\n\nexport default class ShareButton extends PanelControl {\n\n constructor(props, context) {\n super(props, context)\n this.classList.add(\"amp-share\", true)\n this.state.altText = \"MSG_SHARE\"\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n}\n","import PanelMenu from \"./PanelMenu.js\"\nimport ListItem from \"./ListItem.js\"\nimport Utils from \"./Utils.js\"\n\nexport default class SharePanel extends PanelMenu {\n\n constructor(props, context) {\n super(props, context)\n this.listOptions = [\n {label: \"Facebook\", id: \"facebook\", url: \"www.facebook.html\"},\n {label: \"Twitter\", id: \"twitter\", url: \"www.twitter.com\"},\n {label: \"Email\", id: \"email\", url: \"\"},\n {label: \"Embed\", id: \"embed\", url: \"\"}\n ]\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n clickHandler(object, index, event) {\n const media = this.player.media\n this.player.dispatch(\"share\", {provider: object, link: media.link, embed: media.embed})\n }\n\n componentDidUpdate(prevProps, prevState) {\n if (this.state.keyDown) {\n this.refs.element.childNodes[0].focus()\n this.state.keyDown = false\n }\n }\n\n render() {\n const OptionsList = this.listOptions.map((object,index) => {\n return \n {OptionsList}\n
\n }\n}\n","import Toggle from \"./Toggle.js\"\nimport Utils from \"./Utils.js\"\n\nexport default class CaptionToggleButton extends Toggle {\n\n constructor(props, context) {\n super(props, context)\n this.classList.add(\"amp-cc\")\n this.state.altText = \"MSG_CLOSED_CAPTIONING\"\n this.state.toggled = this.player.captioning ? !this.player.captioning.hidden : false\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n onmediachange() {\n setTimeout(this.forceUpdate.bind(this), 1)\n }\n\n onChange(event) {\n this.player.captioning.hidden = !this.player.captioning.hidden\n }\n\n render() {\n if (!Utils.componentEnabled(this.plugin, \"captioning\"))\n return null\n\n return super.render()\n }\n}\n","import Control from \"./Control.js\"\n\nexport default class JumpBack extends Control {\n\n constructor(props, context) {\n super(props, context)\n this.classList.add(\"amp-jump-back\", true)\n this.state.altText = \"MSG_JUMP_BACK\"\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n onClick() {\n const player = this.player\n if (player.playState === \"playing\" || player.playState === \"paused\") {\n this.player.currentTime = Math.max(this.player.currentTime - 10, 0)\n }\n else if (player.ended === true) {\n this.player.replay()\n }\n }\n\n}\n","import Control from \"./Control.js\"\n\nexport default class JumpForward extends Control {\n\n constructor(props, context) {\n super(props, context)\n this.classList.add(\"amp-jump-forward\", true)\n this.state.altText = \"MSG_JUMP_AHEAD\"\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n onClick(event) {\n \tconst player = this.player\n if (!player.ended && (player.playState == \"playing\" || player.playState == \"paused\")) {\n player.currentTime = Math.min(this.player.currentTime + 10, this.player.duration - 1)\n }\n }\n\n}\n","import Component from \"./Component.js\"\n\nexport default class Poster extends Component {\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n onmediachange(event) {\n this.setState({src: this.player.evaluateBindings(this.player.media.poster)})\n }\n\n render() {\n return (\n \n \n
\n )\n }\n}\n","import Component from \"./Component.js\"\n\nexport default class ContextMenu extends Component {\n\n constructor(props, context) {\n super(props, context)\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n render() {\n const menuItems = [\n - \n {menuItems}\n
\n \n
\n )\n }\n}\n","import Control from \"./Control.js\"\n\nexport default class Airplay extends Control {\n\n constructor(props, context) {\n super(props, context)\n this.state.available = false\n this.state.playing = false\n this.classList.add(\"amp-airplay\", true)\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n get isAvailable() {\n return (window.WebKitPlaybackTargetAvailabilityEvent != null)\n }\n\n get available() {\n return (this.isAvailable && this.state.available)\n }\n\n set playing(value) {\n this.state.playing = value\n this.plugin.container.classList.update({\"amp-playback-target-airplay\": value})\n }\n\n get playing() {\n return this.state.playing\n }\n\n onready(event) {\n if (this.isAvailable === false)\n return\n\n const video = this.player.mediaElement\n video.setAttribute(\"x-webkit-airplay\", \"allow\")\n video.addEventListener(\"webkitplaybacktargetavailabilitychanged\", (event) => {\n this.state.available = (event.availability == \"available\")\n this.playing = video.webkitCurrentPlaybackTargetIsWireless\n this.forceUpdate()\n })\n window.addEventListener(\"webkitcurrentplaybacktargetiswireless\", (event) => {\n this.playing = video.webkitCurrentPlaybackTargetIsWireless\n })\n }\n\n onClick() {\n this.player.mediaElement.webkitShowPlaybackTargetPicker()\n }\n\n render() {\n if (this.available === false)\n return null\n\n return super.render()\n }\n}\n","import Control from \"./Control.js\"\n\nexport default class PiP extends Control {\n\n constructor(props, context) {\n super(props, context)\n this.classList.add(\"amp-pip\", true)\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n get available() {\n const mediaElement = this.player.mediaElement\n if (mediaElement == null || typeof mediaElement.webkitSupportsPresentationMode != \"function\" || typeof mediaElement.webkitSetPresentationMode != \"function\")\n return false\n else\n return mediaElement.webkitSupportsPresentationMode(\"picture-in-picture\")\n }\n\n onplaying(event) {\n this.forceUpdate()\n }\n\n onClick(event) {\n const mediaElement = this.player.mediaElement\n mediaElement.webkitSetPresentationMode(mediaElement.webkitPresentationMode === \"picture-in-picture\" ? \"inline\" : \"picture-in-picture\");\n }\n\n render() {\n if (!this.available)\n return null\n\n return super.render()\n }\n}\n","import Control from \"./Control.js\"\nimport Utils from \"./Utils.js\"\n\nexport default class ChromeCast extends Control {\n\n constructor(props, context) {\n super(props, context)\n this.state.available = false\n this.classList.add(\"amp-chromecast\", true)\n }\n\n static get contextTypes() {\n return super.contextTypes\n }\n\n onready() {\n if (!Utils.componentEnabled(this.plugin, \"chromecast\"))\n return\n\n this.setState({available: this.player.chromecast.available})\n }\n\n onplaybacktargetavailabilitychange(event) {\n if (event.detail.target === \"chromecast\") {\n this.setState({available: event.detail.available})\n }\n }\n\n get available() {\n return this.state.available\n }\n\n onClick() {\n this.player.chromecast.launch()\n }\n\n render() {\n if (this.available === false)\n return null\n\n return super.render()\n }\n}\n","export default class Mode {\n\n constructor() {\n }\n\n static get AUTO() { return \"auto\" }\n static get FIXED() { return \"fixed\" }\n static get PERSISTENT() { return \"persistent\" }\n}\n","export default class ActiveState {\n\n constructor() {\n }\n\n static get ACTIVE() { return \"active\" }\n static get INACTIVE() { return \"inactive\" }\n static get IDLE() { return \"idle\" }\n}\n","import Component from \"./Component.js\"\nimport Container from \"./Container.js\"\nimport PanelControl from \"./PanelControl.js\"\nimport PlayPause from \"./PlayPause.js\"\nimport PauseOverlay from \"./PauseOverlay.js\"\nimport BufferingOverlay from \"./BufferingOverlay.js\"\nimport CurrentTime from \"./CurrentTime.js\"\nimport Live from \"./Live.js\"\nimport Duration from \"./Duration.js\"\nimport Progress from \"./Progress.js\"\nimport Volume from \"./Volume.js\"\nimport Mute from \"./Mute.js\"\nimport Unmute from \"./Unmute.js\"\nimport Fullscreen from \"./Fullscreen.js\"\nimport SettingsButton from \"./SettingsButton.js\"\nimport SettingsPanel from \"./SettingsPanel.js\"\nimport ShareButton from \"./ShareButton.js\"\nimport SharePanel from \"./SharePanel.js\"\nimport CaptionToggleButton from \"./CaptionToggleButton.js\"\nimport JumpBack from \"./JumpBack.js\"\nimport JumpForward from \"./JumpForward.js\"\nimport Poster from \"./Poster.js\"\nimport Title from \"./Title.js\"\nimport ErrorMsg from \"./ErrorMsg.js\"\nimport Utils from \"./Utils.js\"\nimport ContextMenu from \"./ContextMenu.js\"\nimport Ads from \"./Ads.js\"\nimport Airplay from \"./Airplay.js\"\nimport PiP from \"./PiP.js\"\nimport ChromeCast from \"./ChromeCast.js\"\nimport AudioTracks from \"./AudioTracks.js\"\nimport Mode from \"./Mode.js\"\nimport ActiveState from \"./ActiveState.js\"\nimport Panel from \"./Panel.js\"\n\nexport default class UI extends Component {\n\n constructor(props) {\n super(props)\n this.feature = \"ui\"\n this.state.playState = \"ready\"\n this.state.open = false\n this.state.dragging = false\n this.state.mode = this.config.mode\n this.isTouchDevice = akamai.amp.Utils.isTouch\n this.contextMenuClick = this.contextMenuClick.bind(this)\n this.autoHide = (this.config.autoHide != null) ? this.config.autoHide : 3\n this.timeout = null\n\n const dispatcher = new akamai.amp.EventDispatcher(this)\n for (let key in dispatcher) {\n let value = dispatcher[key]\n if (typeof value == \"function\") {\n this[key] = value.bind(dispatcher)\n }\n }\n this.dispatcher = dispatcher\n\n this.bindHandlers([\"onMouseEnter\", \"onMouseLeave\", \"onFocus\", \"onBlur\", \"onKeyDown\", \"onContextMenu\", \"onClick\"])\n }\n\n getChildContext() {\n return {\n player: this.props.player,\n config: this.props.config,\n plugin: this\n }\n }\n\n get adMode() {\n return (this.config.adMode != null) ? this.config.adMode : Mode.AUTO\n }\n\n get debug() {\n return (this.config.debug != null) ? this.config.debug : this.player.config.debug\n }\n\n get container() {\n return this.refs.container\n }\n\n get ads() {\n return this.refs.ads\n }\n\n get components() {\n return this.refs\n }\n\n get controls() {\n return this.refs.controls\n }\n\n get mode() {\n return this.state.mode || Mode.AUTO\n }\n\n set mode(value) {\n value = value || Mode.AUTO\n const mode = this.state.mode\n this.container.classList.update({\n [`amp-controls-${mode}`]: false,\n [`amp-controls-${value}`]: true\n })\n this.setState({mode: value})\n\n if (value === Mode.AUTO) {\n if (this.idleUtil == null) {\n this.idleUtil = new akamai.amp.IdleUtil(this.player.viewComponent, this.autoHide * 1000)\n this.idleUtil.addEventListener(\"activechange\", (event) => {\n this.activeState = (event.detail.active !== true) ? ActiveState.INACTIVE : ActiveState.ACTIVE\n })\n }\n this.idleUtil.start()\n }\n else {\n if (this.idleUtil != null) {\n this.idleUtil.stop()\n }\n }\n\n // TODO: Remove these when controls plugin is completely removed from amp-web\n this.player.container.classList.remove(`amp-controls-${mode}`)\n this.player.container.classList.add(`amp-controls-${value}`)\n }\n\n get dragging() {\n return this.state.dragging\n }\n\n set dragging(value) {\n if (value == true) {\n this.stopActiveTimeout()\n }\n else {\n this.startActiveTimeout()\n }\n this.container.classList.update({[`amp-dragging`]: value})\n this.setState({dragging: value})\n }\n\n get open() {\n return this.state.open\n }\n\n set open(value) {\n this.container.classList.update({[`amp-open`]: value})\n this.setState({open: value})\n }\n\n onready(event) {\n\n if (this.config.mode != null)\n this.mode = this.config.mode\n\n this.container.classList.add(`amp-${this.player.mode}`)\n this.container.classList.update({\n \"amp-cc-active\": this.player.captioning && !this.player.captioning.hidden,\n \"amp-touch\": this.isTouchDevice\n })\n\n if (this.player.captioning != null) {\n this.player.captioning.addEventListener(\"visibilitychange\", this.onvisibilitychange.bind(this))\n }\n\n this.player.container.addEventListener(\"mouseenter\", this.onMouseEnter)\n this.player.container.addEventListener(\"mouseleave\", this.onMouseLeave)\n\n // Workaround for UI flicker and FOUT\n setTimeout(() => {\n this.container.element.style.display = \"block\"\n }, 10)\n }\n\n ondestroy() {\n this.stopActiveTimeout()\n this.player.container.removeEventListener(\"mouseenter\", this.onMouseEnter)\n this.player.container.removeEventListener(\"mouseleave\", this.onMouseLeave)\n }\n\n onvisibilitychange(event) {\n this.container.classList.update({\"amp-cc-active\": event.detail})\n }\n\n onplaybacktargetchange(event) {\n this.container.classList.update({\"amp-remote-playback\": (event.detail.value != \"amp\")})\n }\n\n onmediachange(event) {\n const media = this.player.media\n this.container.classList.update({\"amp-audio\": media.medium == \"audio\"})\n this.container.classList.update({\"amp-text-tracks\": media.tracks && media.tracks.length})\n }\n\n onmutemouseover(event) {\n \tthis.stopActiveTimeout()\n \tthis.refs.volume.open = true\n }\n\n onmutemouseout(event) {\n \tthis.stopActiveTimeout()\n \tthis.timeout = setTimeout(() => {\n this.refs.volume.open = false\n }, 350)\n }\n\n onvolumemouseover(event) {\n \tthis.stopActiveTimeout()\n }\n\n onfullscreenchange(event) {\n this.container.classList.update({\"amp-full-screen\": event.detail})\n }\n\n onmutechange(event) {\n this.container.classList.update({\"amp-muted\": event.detail})\n }\n\n onplaystatechange(event) {\n const updates = {\n [`amp-waiting`]: false,\n [`amp-${event.detail.previous}`]: false,\n [`amp-${event.detail.value}`]: true\n }\n this.container.classList.update(updates)\n }\n\n oncanplaythrough(event) {\n this.container.classList.update({\"amp-can-play\": true})\n }\n\n onplaying(event) {\n this.container.classList.update({\"amp-waiting\": false})\n this.container.classList.remove(\"amp-qualitychange-manual\")\n this.container.classList.remove(\"amp-qualitychange-auto\")\n\n if (!this.isTouchDevice)\n return\n\n this.startActiveTimeout()\n }\n\n onwaiting(event) {\n this.container.classList.update({\"amp-waiting\": true})\n this.player.once(\"timeupdate\", () => {\n if (this.player.seeking === false) {\n this.container.classList.update({\"amp-waiting\": false})\n }\n })\n }\n\n onbusy(event) {\n this.container.classList.update({\"amp-busy\": event.detail})\n }\n\n onseeking(event) {\n this.container.classList.update({\"amp-waiting\": true})\n }\n\n onseeked(event) {\n this.container.classList.update({\"amp-waiting\": false})\n }\n\n onerror(event) {\n this.container.classList.update({\"amp-error\": true})\n }\n\n onislive(event) {\n this.container.classList.update({\"amp-is-live\": event.detail})\n }\n\n ontemporaltypechange(event) {\n const updates = {\n [`amp-${event.detail.previous}`]: false,\n [`amp-${event.detail.value}`]: true\n }\n this.container.classList.update(updates)\n }\n\n onqualitychanging(event) {\n this.container.classList.add(`amp-qualitychange-${this.player.qualityMode}`)\n }\n\n onqualitychange(event) {\n this.container.classList.remove(`amp-qualitychange-${this.player.qualityMode}`)\n }\n\n onqualityswitched(event) {\n this.onqualitychange(event)\n }\n\n togglePlayPause() {\n if (this.player.playState == \"ready\" || this.player.paused) {\n this.player.play()\n } else {\n this.player.pause()\n }\n }\n\n set activeState(value) {\n const active = (value == ActiveState.ACTIVE)\n const inactive = (value == ActiveState.INACTIVE)\n const idle = (value == ActiveState.IDLE)\n this.container.classList.update({\"amp-active\": active, \"amp-inactive\": inactive, \"amp-idle\": idle})\n\n // TODO: Remove these when controls plugin is completely removed from amp-web\n let action = active ? \"add\" : \"remove\"\n this.player.container.classList[action](\"amp-active\")\n\n action = inactive ? \"add\" : \"remove\"\n this.player.container.classList[action](\"amp-inactive\")\n\n if (inactive === true) {\n for (let key in this.refs) {\n const value = this.refs[key]\n if (value instanceof Panel && value.open === true) {\n value.open = false\n }\n }\n this.startActiveTimeout()\n }\n }\n\n get activeState() {\n switch (true) {\n case this.container.classList.contains(\"amp-active\"):\n return ActiveState.ACTIVE\n\n case this.container.classList.contains(\"amp-inactive\"):\n return ActiveState.INACTIVE\n\n default:\n return ActiveState.IDLE\n }\n }\n\n get adInProgress() {\n return (this.player.ads && this.player.ads.inProgress)\n }\n\n startActiveTimeout() {\n if(this.refs.settingsPanel.open) {\n this.refs.settingsPanel.close()\n this.refs.volume.open = false\n }\n this.stopActiveTimeout()\n this.timeout = setTimeout(() => {\n this.activeState = ActiveState.IDLE\n }, this.autoHide * 1000)\n }\n\n stopActiveTimeout() {\n clearTimeout(this.timeout)\n }\n\n onMouseEnter(event) {\n this.stopActiveTimeout()\n this.activeState = ActiveState.ACTIVE\n }\n\n onMouseLeave(event) {\n const element = document.elementFromPoint(event.clientX, event.clientY)\n if (this.player.playState == \"ready\" || this.open || this.player.container.contains(element))\n return\n\n if (this.dragging) {\n const handler = () => {\n window.removeEventListener(\"mouseup\", handler)\n if (!akamai.amp.Utils.isMouseOverElement(this.container.element))\n this.onMouseLeave(event)\n }\n window.addEventListener(\"mouseup\", handler)\n return\n }\n\n this.activeState = ActiveState.INACTIVE\n }\n\n onClick() {\n if (this.isTouchDevice) {\n if (this.activeState == ActiveState.ACTIVE) {\n this.activeState = ActiveState.IDLE\n }\n else {\n this.activeState = ActiveState.ACTIVE\n this.startActiveTimeout()\n }\n }\n else {\n this.togglePlayPause()\n }\n }\n\n isFocused(element) {\n const container = this.container.element\n return (element == container || container.contains(element))\n }\n\n onFocus(event) {\n const focused = this.isFocused(event.target)\n this.focused = (event.target.nodeName != \"BUTTON\" && focused)\n if (focused)\n this.container.classList.add(\"amp-active\")\n }\n\n onBlur(event) {\n const focused = this.isFocused(event.target)\n this.focused = (event.target.nodeName != \"BUTTON\" && focused)\n if (!focused)\n this.onMouseLeave(event)\n }\n\n onKeyDown(event) {\n switch (event.keyCode) {\n case 77: // M\n this.player.muted = !this.player.muted\n break;\n\n case 67: // C\n this.player.captioning.hidden = !this.player.captioning.hidden\n break;\n\n case 70: // F\n this.player.displayState == this.player.displayState == 'full-screen'? this.player.exitFullScreen() : this.player.enterFullScreen()\n break;\n }\n\n if (this.focused == false)\n return\n\n switch (event.keyCode) {\n case 13: // Enter\n case 32: // Space\n this.togglePlayPause()\n break;\n\n case 39: // Left\n case 37: // Right\n if (this.refs.volume.focused === false)\n this.refs.progress.onKeyDown(event)\n break;\n\n case 38: // Up\n case 40: // Down\n if (this.refs.progress.focused === false)\n this.refs.volume.onKeyDown(event)\n break;\n }\n }\n\n contextMenuClick(event) {\n if (/selectable/.test(event.target.className))\n return false\n this.removeContextMenu(event)\n return false\n }\n\n removeContextMenu(event) {\n document.body.removeEventListener(\"click\", this.contextMenuClick)\n const parent = document.body\n parent.removeChild(this.contextMenu)\n this.contextMenu = null\n }\n\n onContextMenu(event) {\n if (this.debug === true)\n return\n\n event.preventDefault()\n\n const parent = document.body\n const contextMenu = (\n \n
\n {this.state.msg}
\n \n \n {time}
\n \n
\n