\n\n\n\n\n\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PlayerBitmovin.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PlayerBitmovin.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./PlayerBitmovin.vue?vue&type=template&id=27b0a297&scoped=true\"\nimport script from \"./PlayerBitmovin.vue?vue&type=script&lang=js\"\nexport * from \"./PlayerBitmovin.vue?vue&type=script&lang=js\"\nimport style0 from \"./PlayerBitmovin.vue?vue&type=style&index=0&id=27b0a297&prod&lang=css&scoped=true\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"27b0a297\",\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-col',{staticClass:\"tt-video\",attrs:{\"md\":\"12\",\"align\":\"center\"}},[_c('b-overlay',{attrs:{\"show\":_vm.show,\"rounded\":\"sm\"},scopedSlots:_vm._u([{key:\"overlay\",fn:function(){return [_c('div',{staticClass:\"text-center\"},[_c('div',{staticClass:\"h2 mb-0\"},[_c('b-icon-watch',{attrs:{\"font-scale\":\"3\",\"animation\":\"cylon\"}})],1),_c('h2',{staticClass:\"text-dark\"},[_vm._v(\"Cargando ...\")])])]},proxy:true}])},[_c('div',{attrs:{\"id\":\"my-player\"}})])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","// Copyright 2021 Google LLC. All Rights Reserved.\n//\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\n\"use strict\";\n\nexport const useCast = () => {\n /**\n * Media source root URL\n * @const\n */\n var MEDIA_SOURCE_ROOT =\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/\";\n\n /**\n * Width of progress bar in pixel\n * @const\n */\n var PROGRESS_BAR_WIDTH = 600;\n\n /** @const {number} Time in milliseconds for minimal progress update */\n var TIMER_STEP = 1000;\n\n /** @const {number} Cast volume upon initial connection */\n var DEFAULT_VOLUME = 0.5;\n\n /** @const {number} Height, in pixels, of volume bar */\n var FULL_VOLUME_HEIGHT = 100;\n\n /**\n * Constants of states for media playback\n * @enum {string}\n */\n var PLAYER_STATE = {\n IDLE: \"IDLE\",\n LOADING: \"LOADING\",\n LOADED: \"LOADED\",\n PLAYING: \"PLAYING\",\n PAUSED: \"PAUSED\",\n STOPPED: \"STOPPED\",\n ERROR: \"ERROR\"\n };\n\n /**\n * Cast player object\n * Main variables:\n * - PlayerHandler object for handling media playback\n * - Cast player variables for controlling Cast mode media playback\n * - Current media variables for transition between Cast and local modes\n * @struct @constructor\n */\n var CastPlayer = function() {\n /** @type {PlayerHandler} Delegation proxy for media playback */\n this.playerHandler = new PlayerHandler(this);\n\n /** @type {PLAYER_STATE} A state for media playback */\n this.playerState = PLAYER_STATE.IDLE;\n\n /* Cast player variables */\n /** @type {cast.framework.RemotePlayer} */\n this.remotePlayer = null;\n /** @type {cast.framework.RemotePlayerController} */\n this.remotePlayerController = null;\n\n /* Current media variables */\n /** @type {number} A number for current media index */\n this.currentMediaIndex = 0;\n /** @type {number} A number for current media time */\n this.currentMediaTime = 0;\n /** @type {number} A number for current media duration */\n this.currentMediaDuration = -1;\n /** @type {?number} A timer for tracking progress of media */\n this.timer = null;\n\n /** @type {Object} media contents from JSON */\n this.mediaContents = null;\n\n /** @type {boolean} Fullscreen mode on/off */\n this.fullscreen = false;\n\n /** @type {function()} */\n this.incrementMediaTimeHandler = this.incrementMediaTime.bind(this);\n\n this.setupLocalPlayer();\n //this.addVideoThumbs();\n //this.initializeUI();\n };\n\n CastPlayer.prototype.initializeCastPlayer = function() {\n var options = {};\n\n // Set the receiver application ID to your own (created in the\n // Google Cast Developer Console), or optionally\n // use the chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID\n options.receiverApplicationId = chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID;\n\n // Auto join policy can be one of the following three:\n // ORIGIN_SCOPED - Auto connect from same appId and page origin\n // TAB_AND_ORIGIN_SCOPED - Auto connect from same appId, page origin, and tab\n // PAGE_SCOPED - No auto connect\n options.autoJoinPolicy = chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED;\n options.androidReceiverCompatible = false;\n\n cast.framework.CastContext.getInstance().setOptions(options);\n\n let credentialsData = new chrome.cast.CredentialsData(\n '{\"userId\": \"abc\"}'\n );\n cast.framework.CastContext.getInstance().setLaunchCredentialsData(\n credentialsData\n );\n\n this.remotePlayer = new cast.framework.RemotePlayer();\n this.remotePlayerController = new cast.framework.RemotePlayerController(\n this.remotePlayer\n );\n this.remotePlayerController.addEventListener(\n cast.framework.RemotePlayerEventType.IS_CONNECTED_CHANGED,\n this.switchPlayer.bind(this)\n );\n };\n\n /*\n * PlayerHandler and setup functions\n */\n\n CastPlayer.prototype.switchPlayer = function() {\n this.stopProgressTimer();\n this.resetVolumeSlider();\n this.playerHandler.stop();\n this.playerState = PLAYER_STATE.IDLE;\n if (cast && cast.framework) {\n if (this.remotePlayer.isConnected) {\n this.setupRemotePlayer();\n return;\n }\n }\n this.setupLocalPlayer();\n };\n\n /**\n * PlayerHandler\n *\n * This is a handler through which the application will interact\n * with both the RemotePlayer and LocalPlayer. Combining these two into\n * one interface is one approach to the dual-player nature of a Cast\n * Chrome application. Otherwise, the state of the RemotePlayer can be\n * queried at any time to decide whether to interact with the local\n * or remote players.\n *\n * To set the player used, implement the following methods for a target object\n * and call setTarget(target).\n *\n * Methods to implement:\n * - play()\n * - pause()\n * - stop()\n * - seekTo(time)\n * - load(mediaIndex)\n * - getMediaDuration()\n * - getCurrentMediaTime()\n * - setVolume(volumeSliderPosition)\n * - mute()\n * - unMute()\n * - isMuted()\n * - updateDisplayMessage()\n */\n var PlayerHandler = function(castPlayer) {\n this.target = {};\n\n this.setTarget = function(target) {\n this.target = target;\n };\n\n this.play = function() {\n if (\n castPlayer.playerState !== PLAYER_STATE.PLAYING &&\n castPlayer.playerState !== PLAYER_STATE.PAUSED &&\n castPlayer.playerState !== PLAYER_STATE.LOADED\n ) {\n this.load(castPlayer.currentMediaIndex);\n return;\n }\n\n this.target.play();\n castPlayer.playerState = PLAYER_STATE.PLAYING;\n document.getElementById(\"play\").style.display = \"none\";\n document.getElementById(\"pause\").style.display = \"block\";\n this.updateDisplayMessage();\n };\n\n this.pause = function() {\n if (castPlayer.playerState !== PLAYER_STATE.PLAYING) {\n return;\n }\n\n this.target.pause();\n castPlayer.playerState = PLAYER_STATE.PAUSED;\n document.getElementById(\"play\").style.display = \"block\";\n document.getElementById(\"pause\").style.display = \"none\";\n this.updateDisplayMessage();\n };\n\n this.stop = function() {\n this.pause();\n castPlayer.playerState = PLAYER_STATE.STOPPED;\n this.updateDisplayMessage();\n };\n\n this.load = function(mediaIndex) {\n castPlayer.playerState = PLAYER_STATE.LOADING;\n\n document.getElementById(\"media_title\").innerHTML =\n castPlayer.mediaContents[castPlayer.currentMediaIndex][\"title\"];\n document.getElementById(\"media_subtitle\").innerHTML =\n castPlayer.mediaContents[castPlayer.currentMediaIndex][\n \"subtitle\"\n ];\n document.getElementById(\"media_desc\").innerHTML =\n castPlayer.mediaContents[castPlayer.currentMediaIndex][\n \"description\"\n ];\n\n this.target.load(mediaIndex);\n this.updateDisplayMessage();\n };\n\n this.loaded = function() {\n castPlayer.currentMediaDuration = this.getMediaDuration();\n castPlayer.updateMediaDuration();\n castPlayer.playerState = PLAYER_STATE.LOADED;\n if (castPlayer.currentMediaTime > 0) {\n this.seekTo(castPlayer.currentMediaTime);\n }\n this.play();\n castPlayer.startProgressTimer();\n this.updateDisplayMessage();\n };\n\n this.getCurrentMediaTime = function() {\n return this.target.getCurrentMediaTime();\n };\n\n this.getMediaDuration = function() {\n return this.target.getMediaDuration();\n };\n\n this.updateDisplayMessage = function() {\n this.target.updateDisplayMessage();\n };\n this.setVolume = function(volumeSliderPosition) {\n this.target.setVolume(volumeSliderPosition);\n };\n\n this.mute = function() {\n this.target.mute();\n document.getElementById(\"audio_on\").style.display = \"none\";\n document.getElementById(\"audio_off\").style.display = \"block\";\n };\n\n this.unMute = function() {\n this.target.unMute();\n document.getElementById(\"audio_on\").style.display = \"block\";\n document.getElementById(\"audio_off\").style.display = \"none\";\n };\n\n this.isMuted = function() {\n return this.target.isMuted();\n };\n\n this.seekTo = function(time) {\n this.target.seekTo(time);\n this.updateDisplayMessage();\n };\n };\n\n /**\n * Set the PlayerHandler target to use the video-element player\n */\n CastPlayer.prototype.setupLocalPlayer = function() {\n var localPlayer = document.getElementById(\"my-player\");\n localPlayer.addEventListener(\n \"loadeddata\",\n this.onMediaLoadedLocally.bind(this)\n );\n\n // This object will implement PlayerHandler callbacks with localPlayer\n var playerTarget = {};\n\n playerTarget.play = function() {\n localPlayer.play();\n\n var vi = document.getElementById(\"video_image\");\n vi.style.display = \"none\";\n localPlayer.style.display = \"block\";\n };\n\n playerTarget.pause = function() {\n localPlayer.pause();\n };\n\n playerTarget.stop = function() {\n localPlayer.stop();\n };\n\n playerTarget.load = function(mediaIndex) {\n localPlayer.src = this.mediaContents[mediaIndex][\"sources\"][0];\n localPlayer.load();\n }.bind(this);\n\n playerTarget.getCurrentMediaTime = function() {\n return localPlayer.currentTime;\n };\n\n playerTarget.getMediaDuration = function() {\n return localPlayer.duration;\n };\n\n playerTarget.updateDisplayMessage = function() {\n document.getElementById(\"playerstate\").style.display = \"none\";\n document.getElementById(\"playerstatebg\").style.display = \"none\";\n document.getElementById(\"video_image_overlay\").style.display =\n \"none\";\n };\n\n playerTarget.setVolume = function(volumeSliderPosition) {\n localPlayer.volume =\n volumeSliderPosition < FULL_VOLUME_HEIGHT\n ? volumeSliderPosition / FULL_VOLUME_HEIGHT\n : 1;\n var p = document.getElementById(\"audio_bg_level\");\n p.style.height = volumeSliderPosition + \"px\";\n p.style.marginTop = -volumeSliderPosition + \"px\";\n };\n\n playerTarget.mute = function() {\n localPlayer.muted = true;\n };\n\n playerTarget.unMute = function() {\n localPlayer.muted = false;\n };\n\n playerTarget.isMuted = function() {\n return localPlayer.muted;\n };\n\n playerTarget.seekTo = function(time) {\n localPlayer.currentTime = time;\n };\n\n this.playerHandler.setTarget(playerTarget);\n\n this.playerHandler.setVolume(DEFAULT_VOLUME * FULL_VOLUME_HEIGHT);\n\n this.showFullscreenButton();\n\n if (this.currentMediaTime > 0) {\n this.playerHandler.play();\n }\n };\n\n /**\n * Set the PlayerHandler target to use the remote player\n */\n CastPlayer.prototype.setupRemotePlayer = function() {\n var castSession = cast.framework.CastContext.getInstance().getCurrentSession();\n\n // Add event listeners for player changes which may occur outside sender app\n this.remotePlayerController.addEventListener(\n cast.framework.RemotePlayerEventType.IS_PAUSED_CHANGED,\n function() {\n if (this.remotePlayer.isPaused) {\n this.playerHandler.pause();\n } else {\n this.playerHandler.play();\n }\n }.bind(this)\n );\n\n this.remotePlayerController.addEventListener(\n cast.framework.RemotePlayerEventType.IS_MUTED_CHANGED,\n function() {\n if (this.remotePlayer.isMuted) {\n this.playerHandler.mute();\n } else {\n this.playerHandler.unMute();\n }\n }.bind(this)\n );\n\n this.remotePlayerController.addEventListener(\n cast.framework.RemotePlayerEventType.VOLUME_LEVEL_CHANGED,\n function() {\n var newVolume =\n this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;\n var p = document.getElementById(\"audio_bg_level\");\n p.style.height = newVolume + \"px\";\n p.style.marginTop = -newVolume + \"px\";\n }.bind(this)\n );\n\n // This object will implement PlayerHandler callbacks with\n // remotePlayerController, and makes necessary UI updates specific\n // to remote playback\n var playerTarget = {};\n\n playerTarget.play = function() {\n if (this.remotePlayer.isPaused) {\n this.remotePlayerController.playOrPause();\n }\n\n var vi = document.getElementById(\"video_image\");\n vi.style.display = \"block\";\n var localPlayer = document.getElementById(\"my-player\");\n localPlayer.style.display = \"none\";\n }.bind(this);\n\n playerTarget.pause = function() {\n if (!this.remotePlayer.isPaused) {\n this.remotePlayerController.playOrPause();\n }\n }.bind(this);\n\n playerTarget.stop = function() {\n this.remotePlayerController.stop();\n }.bind(this);\n\n playerTarget.load = function(mediaIndex) {\n console.log(\"Loading...\" + this.mediaContents[mediaIndex][\"title\"]);\n var mediaInfo = new chrome.cast.media.MediaInfo(\n this.mediaContents[mediaIndex][\"sources\"][0],\n \"video/mp4\"\n );\n\n mediaInfo.metadata = new chrome.cast.media.GenericMediaMetadata();\n mediaInfo.metadata.metadataType =\n chrome.cast.media.MetadataType.GENERIC;\n mediaInfo.metadata.title = this.mediaContents[mediaIndex][\"title\"];\n mediaInfo.metadata.images = [\n {\n url:\n MEDIA_SOURCE_ROOT +\n this.mediaContents[mediaIndex][\"thumb\"]\n }\n ];\n\n var request = new chrome.cast.media.LoadRequest(mediaInfo);\n request.credentials = \"user-credentials\";\n request.atvCredentials = \"atv-user-credentials\";\n castSession.loadMedia(request).then(\n this.playerHandler.loaded.bind(this.playerHandler),\n function(errorCode) {\n this.playerState = PLAYER_STATE.ERROR;\n console.log(\n \"Remote media load error: \" +\n CastPlayer.getErrorMessage(errorCode)\n );\n }.bind(this)\n );\n }.bind(this);\n\n playerTarget.getCurrentMediaTime = function() {\n return this.remotePlayer.currentTime;\n }.bind(this);\n\n playerTarget.getMediaDuration = function() {\n return this.remotePlayer.duration;\n }.bind(this);\n\n playerTarget.updateDisplayMessage = function() {\n document.getElementById(\"playerstate\").style.display = \"block\";\n document.getElementById(\"playerstatebg\").style.display = \"block\";\n document.getElementById(\"video_image_overlay\").style.display =\n \"block\";\n document.getElementById(\"playerstate\").innerHTML =\n this.mediaContents[this.currentMediaIndex][\"title\"] +\n \" \" +\n this.playerState +\n \" on \" +\n castSession.getCastDevice().friendlyName;\n }.bind(this);\n\n playerTarget.setVolume = function(volumeSliderPosition) {\n // Add resistance to avoid loud volume\n var currentVolume = this.remotePlayer.volumeLevel;\n var p = document.getElementById(\"audio_bg_level\");\n if (volumeSliderPosition < FULL_VOLUME_HEIGHT) {\n var vScale = this.currentVolume * FULL_VOLUME_HEIGHT;\n if (volumeSliderPosition > vScale) {\n volumeSliderPosition = vScale + (pos - vScale) / 2;\n }\n p.style.height = volumeSliderPosition + \"px\";\n p.style.marginTop = -volumeSliderPosition + \"px\";\n currentVolume = volumeSliderPosition / FULL_VOLUME_HEIGHT;\n } else {\n currentVolume = 1;\n }\n this.remotePlayer.volumeLevel = currentVolume;\n this.remotePlayerController.setVolumeLevel();\n }.bind(this);\n\n playerTarget.mute = function() {\n if (!this.remotePlayer.isMuted) {\n this.remotePlayerController.muteOrUnmute();\n }\n }.bind(this);\n\n playerTarget.unMute = function() {\n if (this.remotePlayer.isMuted) {\n this.remotePlayerController.muteOrUnmute();\n }\n }.bind(this);\n\n playerTarget.isMuted = function() {\n return this.remotePlayer.isMuted;\n }.bind(this);\n\n playerTarget.seekTo = function(time) {\n this.remotePlayer.currentTime = time;\n this.remotePlayerController.seek();\n }.bind(this);\n\n this.playerHandler.setTarget(playerTarget);\n\n // Setup remote player volume right on setup\n // The remote player may have had a volume set from previous playback\n if (this.remotePlayer.isMuted) {\n this.playerHandler.mute();\n }\n var currentVolume = this.remotePlayer.volumeLevel * FULL_VOLUME_HEIGHT;\n var p = document.getElementById(\"audio_bg_level\");\n p.style.height = currentVolume + \"px\";\n p.style.marginTop = -currentVolume + \"px\";\n\n this.hideFullscreenButton();\n\n this.playerHandler.play();\n };\n\n /**\n * Callback when media is loaded in local player\n */\n CastPlayer.prototype.onMediaLoadedLocally = function() {\n var localPlayer = document.getElementById(\"my-player\");\n localPlayer.currentTime = this.currentMediaTime;\n\n this.playerHandler.loaded();\n };\n\n /**\n * Select a media content\n * @param {number} mediaIndex A number for media index\n */\n CastPlayer.prototype.selectMedia = function(mediaIndex) {\n console.log(\"Media index selected: \" + mediaIndex);\n\n this.currentMediaIndex = mediaIndex;\n\n // Set video image\n var vi = document.getElementById(\"video_image\");\n vi.src = MEDIA_SOURCE_ROOT + this.mediaContents[mediaIndex][\"thumb\"];\n\n // Reset progress bar\n var pi = document.getElementById(\"progress_indicator\");\n var p = document.getElementById(\"progress\");\n p.style.width = \"0px\";\n pi.style.marginLeft = -21 - PROGRESS_BAR_WIDTH + \"px\";\n\n // Reset currentMediaTime\n this.currentMediaTime = 0;\n\n this.playerState = PLAYER_STATE.IDLE;\n this.playerHandler.play();\n };\n\n /**\n * Media seek function\n * @param {Event} event An event object from seek\n */\n CastPlayer.prototype.seekMedia = function(event) {\n var pos = parseInt(event.offsetX, 10);\n var pi = document.getElementById(\"progress_indicator\");\n var p = document.getElementById(\"progress\");\n if (event.currentTarget.id == \"progress_indicator\") {\n var curr = parseInt(\n this.currentMediaTime +\n (this.currentMediaDuration * pos) / PROGRESS_BAR_WIDTH,\n 10\n );\n var pp = parseInt(pi.style.marginLeft, 10) + pos;\n var pw = parseInt(p.style.width, 10) + pos;\n } else {\n var curr = parseInt(\n (pos * this.currentMediaDuration) / PROGRESS_BAR_WIDTH,\n 10\n );\n var pp = pos - 21 - PROGRESS_BAR_WIDTH;\n var pw = pos;\n }\n\n if (\n this.playerState === PLAYER_STATE.PLAYING ||\n this.playerState === PLAYER_STATE.PAUSED\n ) {\n this.currentMediaTime = curr;\n p.style.width = pw + \"px\";\n pi.style.marginLeft = pp + \"px\";\n }\n\n this.playerHandler.seekTo(curr);\n };\n\n /**\n * Set current player volume\n * @param {Event} mouseEvent\n */\n CastPlayer.prototype.setVolume = function(mouseEvent) {\n var p = document.getElementById(\"audio_bg_level\");\n var pos = 0;\n if (mouseEvent.currentTarget.id === \"audio_bg_track\") {\n pos = FULL_VOLUME_HEIGHT - parseInt(mouseEvent.offsetY, 10);\n } else {\n pos =\n parseInt(p.clientHeight, 10) - parseInt(mouseEvent.offsetY, 10);\n }\n this.playerHandler.setVolume(pos);\n };\n\n /**\n * Starts the timer to increment the media progress bar\n */\n CastPlayer.prototype.startProgressTimer = function() {\n this.stopProgressTimer();\n\n // Start progress timer\n this.timer = setInterval(this.incrementMediaTimeHandler, TIMER_STEP);\n };\n\n /**\n * Stops the timer to increment the media progress bar\n */\n CastPlayer.prototype.stopProgressTimer = function() {\n if (this.timer) {\n clearInterval(this.timer);\n this.timer = null;\n }\n };\n\n /**\n * Helper function\n * Increment media current position by 1 second\n */\n CastPlayer.prototype.incrementMediaTime = function() {\n // First sync with the current player's time\n this.currentMediaTime = this.playerHandler.getCurrentMediaTime();\n this.currentMediaDuration = this.playerHandler.getMediaDuration();\n\n if (this.playerState === PLAYER_STATE.PLAYING) {\n if (this.currentMediaTime < this.currentMediaDuration) {\n this.currentMediaTime += 1;\n this.updateProgressBarByTimer();\n } else {\n this.endPlayback();\n }\n }\n };\n\n /**\n * Update progress bar based on timer\n */\n CastPlayer.prototype.updateProgressBarByTimer = function() {\n var p = document.getElementById(\"progress\");\n if (isNaN(parseInt(p.style.width, 10))) {\n p.style.width = 0;\n }\n if (this.currentMediaDuration > 0) {\n var pp = Math.floor(\n (PROGRESS_BAR_WIDTH * this.currentMediaTime) /\n this.currentMediaDuration\n );\n }\n\n p.style.width = pp + \"px\";\n var pi = document.getElementById(\"progress_indicator\");\n pi.style.marginLeft = -21 - PROGRESS_BAR_WIDTH + pp + \"px\";\n\n if (pp >= PROGRESS_BAR_WIDTH) {\n this.endPlayback();\n }\n };\n\n /**\n * End playback. Called when media ends.\n */\n CastPlayer.prototype.endPlayback = function() {\n this.currentMediaTime = 0;\n this.stopProgressTimer();\n this.playerState = PLAYER_STATE.IDLE;\n this.playerHandler.updateDisplayMessage();\n\n document.getElementById(\"play\").style.display = \"block\";\n document.getElementById(\"pause\").style.display = \"none\";\n };\n\n /**\n * @param {number} durationInSec\n * @return {string}\n */\n CastPlayer.getDurationString = function(durationInSec) {\n var durationString = \"\" + Math.floor(durationInSec % 60);\n var durationInMin = Math.floor(durationInSec / 60);\n if (durationInMin === 0) {\n return durationString;\n }\n durationString = (durationInMin % 60) + \":\" + durationString;\n var durationInHour = Math.floor(durationInMin / 60);\n if (durationInHour === 0) {\n return durationString;\n }\n return durationInHour + \":\" + durationString;\n };\n\n /**\n * Updates media duration text in UI\n */\n CastPlayer.prototype.updateMediaDuration = function() {\n document.getElementById(\n \"duration\"\n ).innerHTML = CastPlayer.getDurationString(this.currentMediaDuration);\n };\n\n /**\n * Request full screen mode\n */\n CastPlayer.prototype.requestFullScreen = function() {\n // Supports most browsers and their versions.\n var element = document.getElementById(\"my-player\");\n var requestMethod =\n element[\"requestFullScreen\"] || element[\"webkitRequestFullScreen\"];\n\n if (requestMethod) {\n // Native full screen.\n requestMethod.call(element);\n console.log(\"Requested fullscreen\");\n }\n };\n\n /**\n * Exit full screen mode\n */\n CastPlayer.prototype.cancelFullScreen = function() {\n // Supports most browsers and their versions.\n var requestMethod =\n document[\"cancelFullScreen\"] || document[\"webkitCancelFullScreen\"];\n\n if (requestMethod) {\n requestMethod.call(document);\n }\n };\n\n /**\n * Exit fullscreen mode by escape\n */\n CastPlayer.prototype.fullscreenChangeHandler = function() {\n this.fullscreen = !this.fullscreen;\n };\n\n /**\n * Show expand/collapse fullscreen button\n */\n CastPlayer.prototype.showFullscreenButton = function() {\n if (this.fullscreen) {\n document.getElementById(\"fullscreen_expand\").style.display = \"none\";\n document.getElementById(\"fullscreen_collapse\").style.display =\n \"block\";\n } else {\n document.getElementById(\"fullscreen_expand\").style.display =\n \"block\";\n document.getElementById(\"fullscreen_collapse\").style.display =\n \"none\";\n }\n };\n\n /**\n * Hide expand/collapse fullscreen button\n */\n CastPlayer.prototype.hideFullscreenButton = function() {\n document.getElementById(\"fullscreen_expand\").style.display = \"none\";\n document.getElementById(\"fullscreen_collapse\").style.display = \"none\";\n };\n\n /**\n * Show the media control\n */\n CastPlayer.prototype.showMediaControl = function() {\n document.getElementById(\"media_control\").style.opacity = 0.7;\n };\n\n /**\n * Hide the media control\n */\n CastPlayer.prototype.hideMediaControl = function() {\n document.getElementById(\"media_control\").style.opacity = 0;\n };\n\n /**\n * Show the volume slider\n */\n CastPlayer.prototype.showVolumeSlider = function() {\n if (!this.playerHandler.isMuted()) {\n document.getElementById(\"audio_bg\").style.opacity = 1;\n document.getElementById(\"audio_bg_track\").style.opacity = 1;\n document.getElementById(\"audio_bg_level\").style.opacity = 1;\n document.getElementById(\"audio_indicator\").style.opacity = 1;\n }\n };\n\n /**\n * Hide the volume slider\n */\n CastPlayer.prototype.hideVolumeSlider = function() {\n document.getElementById(\"audio_bg\").style.opacity = 0;\n document.getElementById(\"audio_bg_track\").style.opacity = 0;\n document.getElementById(\"audio_bg_level\").style.opacity = 0;\n document.getElementById(\"audio_indicator\").style.opacity = 0;\n };\n\n /**\n * Reset the volume slider\n */\n CastPlayer.prototype.resetVolumeSlider = function() {\n var volumeTrackHeight = document.getElementById(\"audio_bg_track\")\n .clientHeight;\n var defaultVolumeSliderHeight = DEFAULT_VOLUME * volumeTrackHeight;\n document.getElementById(\"audio_bg_level\").style.height =\n defaultVolumeSliderHeight + \"px\";\n document.getElementById(\"audio_on\").style.display = \"block\";\n document.getElementById(\"audio_off\").style.display = \"none\";\n };\n\n /**\n * Initialize UI components and add event listeners\n */\n CastPlayer.prototype.initializeUI = function() {\n // Set initial values for title, subtitle, and description\n document.getElementById(\n \"media_title\"\n ).innerHTML = this.mediaContents[0][\"title\"];\n document.getElementById(\n \"media_subtitle\"\n ).innerHTML = this.mediaContents[this.currentMediaIndex][\"subtitle\"];\n document.getElementById(\"media_desc\").innerHTML = this.mediaContents[\n this.currentMediaIndex\n ][\"description\"];\n\n // Add event handlers to UI components\n document\n .getElementById(\"progress_bg\")\n .addEventListener(\"click\", this.seekMedia.bind(this));\n document\n .getElementById(\"progress\")\n .addEventListener(\"click\", this.seekMedia.bind(this));\n document\n .getElementById(\"progress_indicator\")\n .addEventListener(\"dragend\", this.seekMedia.bind(this));\n document\n .getElementById(\"audio_on\")\n .addEventListener(\n \"click\",\n this.playerHandler.mute.bind(this.playerHandler)\n );\n document\n .getElementById(\"audio_off\")\n .addEventListener(\n \"click\",\n this.playerHandler.unMute.bind(this.playerHandler)\n );\n document\n .getElementById(\"audio_bg\")\n .addEventListener(\"mouseover\", this.showVolumeSlider.bind(this));\n document\n .getElementById(\"audio_on\")\n .addEventListener(\"mouseover\", this.showVolumeSlider.bind(this));\n document\n .getElementById(\"audio_bg_level\")\n .addEventListener(\"mouseover\", this.showVolumeSlider.bind(this));\n document\n .getElementById(\"audio_bg_track\")\n .addEventListener(\"mouseover\", this.showVolumeSlider.bind(this));\n document\n .getElementById(\"audio_bg_level\")\n .addEventListener(\"click\", this.setVolume.bind(this));\n document\n .getElementById(\"audio_bg_track\")\n .addEventListener(\"click\", this.setVolume.bind(this));\n document\n .getElementById(\"audio_bg\")\n .addEventListener(\"mouseout\", this.hideVolumeSlider.bind(this));\n document\n .getElementById(\"audio_on\")\n .addEventListener(\"mouseout\", this.hideVolumeSlider.bind(this));\n document\n .getElementById(\"main_video\")\n .addEventListener(\"mouseover\", this.showMediaControl.bind(this));\n document\n .getElementById(\"main_video\")\n .addEventListener(\"mouseout\", this.hideMediaControl.bind(this));\n document\n .getElementById(\"media_control\")\n .addEventListener(\"mouseover\", this.showMediaControl.bind(this));\n document\n .getElementById(\"media_control\")\n .addEventListener(\"mouseout\", this.hideMediaControl.bind(this));\n document\n .getElementById(\"fullscreen_expand\")\n .addEventListener(\"click\", this.requestFullScreen.bind(this));\n document\n .getElementById(\"fullscreen_collapse\")\n .addEventListener(\"click\", this.cancelFullScreen.bind(this));\n document.addEventListener(\n \"fullscreenchange\",\n this.fullscreenChangeHandler.bind(this),\n false\n );\n document.addEventListener(\n \"webkitfullscreenchange\",\n this.fullscreenChangeHandler.bind(this),\n false\n );\n\n // Enable play/pause buttons\n document\n .getElementById(\"play\")\n .addEventListener(\n \"click\",\n this.playerHandler.play.bind(this.playerHandler)\n );\n document\n .getElementById(\"pause\")\n .addEventListener(\n \"click\",\n this.playerHandler.pause.bind(this.playerHandler)\n );\n document.getElementById(\"progress_indicator\").draggable = true;\n };\n\n /**\n * Add video thumbnails div's to UI for media JSON contents\n */\n CastPlayer.prototype.addVideoThumbs = function() {\n this.mediaContents = mediaJSON[\"categories\"][0][\"videos\"];\n var ni = document.getElementById(\"carousel\");\n var newdiv = null;\n var divIdName = null;\n for (var i = 0; i < this.mediaContents.length; i++) {\n newdiv = document.createElement(\"div\");\n divIdName = \"thumb\" + i + \"Div\";\n newdiv.setAttribute(\"id\", divIdName);\n newdiv.setAttribute(\"class\", \"thumb\");\n newdiv.innerHTML =\n '';\n newdiv.addEventListener(\"click\", this.selectMedia.bind(this, i));\n ni.appendChild(newdiv);\n }\n };\n\n /**\n * Makes human-readable message from chrome.cast.Error\n * @param {chrome.cast.Error} error\n * @return {string} error message\n */\n CastPlayer.getErrorMessage = function(error) {\n switch (error.code) {\n case chrome.cast.ErrorCode.API_NOT_INITIALIZED:\n return (\n \"The API is not initialized.\" +\n (error.description ? \" :\" + error.description : \"\")\n );\n case chrome.cast.ErrorCode.CANCEL:\n return (\n \"The operation was canceled by the user\" +\n (error.description ? \" :\" + error.description : \"\")\n );\n case chrome.cast.ErrorCode.CHANNEL_ERROR:\n return (\n \"A channel to the receiver is not available.\" +\n (error.description ? \" :\" + error.description : \"\")\n );\n case chrome.cast.ErrorCode.EXTENSION_MISSING:\n return (\n \"The Cast extension is not available.\" +\n (error.description ? \" :\" + error.description : \"\")\n );\n case chrome.cast.ErrorCode.INVALID_PARAMETER:\n return (\n \"The parameters to the operation were not valid.\" +\n (error.description ? \" :\" + error.description : \"\")\n );\n case chrome.cast.ErrorCode.RECEIVER_UNAVAILABLE:\n return (\n \"No receiver was compatible with the session request.\" +\n (error.description ? \" :\" + error.description : \"\")\n );\n case chrome.cast.ErrorCode.SESSION_ERROR:\n return (\n \"A session could not be created, or a session was invalid.\" +\n (error.description ? \" :\" + error.description : \"\")\n );\n case chrome.cast.ErrorCode.TIMEOUT:\n return (\n \"The operation timed out.\" +\n (error.description ? \" :\" + error.description : \"\")\n );\n }\n };\n\n /**\n * Hardcoded media json objects\n */\n var mediaJSON = {\n categories: [\n {\n name: \"Movies\",\n videos: [\n {\n description:\n \"Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. When one sunny day three rodents rudely harass him, something snaps... and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge.\\n\\nLicensed under the Creative Commons Attribution license\\nhttp://www.bigbuckbunny.org\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\"\n ],\n subtitle: \"By Blender Foundation\",\n thumb: \"images/BigBuckBunny.jpg\",\n title: \"Big Buck Bunny\"\n },\n {\n description: \"The first Blender Open Movie from 2006\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ElephantsDream.mp4\"\n ],\n subtitle: \"By Blender Foundation\",\n thumb: \"images/ElephantsDream.jpg\",\n title: \"Elephant Dream\"\n },\n {\n description:\n \"HBO GO now works with Chromecast -- the easiest way to enjoy online video on your TV. For when you want to settle into your Iron Throne to watch the latest episodes. For $35.\\nLearn how to use Chromecast with HBO GO and more at google.com/chromecast.\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4\"\n ],\n subtitle: \"By Google\",\n thumb: \"images/ForBiggerBlazes.jpg\",\n title: \"For Bigger Blazes\"\n },\n {\n description:\n \"Introducing Chromecast. The easiest way to enjoy online video and music on your TV. For when Batman's escapes aren't quite big enough. For $35. Learn how to use Chromecast with Google Play Movies and more at google.com/chromecast.\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerEscapes.mp4\"\n ],\n subtitle: \"By Google\",\n thumb: \"images/ForBiggerEscapes.jpg\",\n title: \"For Bigger Escape\"\n },\n {\n description:\n \"Introducing Chromecast. The easiest way to enjoy online video and music on your TV. For $35. Find out more at google.com/chromecast.\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerFun.mp4\"\n ],\n subtitle: \"By Google\",\n thumb: \"images/ForBiggerFun.jpg\",\n title: \"For Bigger Fun\"\n },\n {\n description:\n \"Introducing Chromecast. The easiest way to enjoy online video and music on your TV. For the times that call for bigger joyrides. For $35. Learn how to use Chromecast with YouTube and more at google.com/chromecast.\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerJoyrides.mp4\"\n ],\n subtitle: \"By Google\",\n thumb: \"images/ForBiggerJoyrides.jpg\",\n title: \"For Bigger Joyrides\"\n },\n {\n description:\n \"Introducing Chromecast. The easiest way to enjoy online video and music on your TV. For when you want to make Buster's big meltdowns even bigger. For $35. Learn how to use Chromecast with Netflix and more at google.com/chromecast.\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerMeltdowns.mp4\"\n ],\n subtitle: \"By Google\",\n thumb: \"images/ForBiggerMeltdowns.jpg\",\n title: \"For Bigger Meltdowns\"\n },\n {\n description:\n \"Sintel is an independently produced short film, initiated by the Blender Foundation as a means to further improve and validate the free/open source 3D creation suite Blender. With initial funding provided by 1000s of donations via the internet community, it has again proven to be a viable development model for both open 3D technology as for independent animation film.\\nThis 15 minute film has been realized in the studio of the Amsterdam Blender Institute, by an international team of artists and developers. In addition to that, several crucial technical and creative targets have been realized online, by developers and artists and teams all over the world.\\nwww.sintel.org\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4\"\n ],\n subtitle: \"By Blender Foundation\",\n thumb: \"images/Sintel.jpg\",\n title: \"Sintel\"\n },\n {\n description:\n \"Smoking Tire takes the all-new Subaru Outback to the highest point we can find in hopes our customer-appreciation Balloon Launch will get some free T-shirts into the hands of our viewers.\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/SubaruOutbackOnStreetAndDirt.mp4\"\n ],\n subtitle: \"By Garage419\",\n thumb: \"images/SubaruOutbackOnStreetAndDirt.jpg\",\n title: \"Subaru Outback On Street And Dirt\"\n },\n {\n description:\n \"Tears of Steel was realized with crowd-funding by users of the open source 3D creation tool Blender. Target was to improve and test a complete open and free pipeline for visual effects in film - and to make a compelling sci-fi film in Amsterdam, the Netherlands. The film itself, and all raw material used for making it, have been released under the Creatieve Commons 3.0 Attribution license. Visit the tearsofsteel.org website to find out more about this, or to purchase the 4-DVD box with a lot of extras. (CC) Blender Foundation - http://www.tearsofsteel.org\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/TearsOfSteel.mp4\"\n ],\n subtitle: \"By Blender Foundation\",\n thumb: \"images/TearsOfSteel.jpg\",\n title: \"Tears of Steel\"\n },\n {\n description:\n \"The Smoking Tire heads out to Adams Motorsports Park in Riverside, CA to test the most requested car of 2010, the Volkswagen GTI. Will it beat the Mazdaspeed3's standard-setting lap time? Watch and see...\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/VolkswagenGTIReview.mp4\"\n ],\n subtitle: \"By Garage419\",\n thumb: \"images/VolkswagenGTIReview.jpg\",\n title: \"Volkswagen GTI Review\"\n },\n {\n description:\n \"The Smoking Tire is going on the 2010 Bullrun Live Rally in a 2011 Shelby GT500, and posting a video from the road every single day! The only place to watch them is by subscribing to The Smoking Tire or watching at BlackMagicShine.com\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WeAreGoingOnBullrun.mp4\"\n ],\n subtitle: \"By Garage419\",\n thumb: \"images/WeAreGoingOnBullrun.jpg\",\n title: \"We Are Going On Bullrun\"\n },\n {\n description:\n \"The Smoking Tire meets up with Chris and Jorge from CarsForAGrand.com to see just how far $1,000 can go when looking for a car. The Smoking Tire meets up with Chris and Jorge from CarsForAGrand.com to see just how far $1,000 can go when looking for a car.\",\n sources: [\n \"http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/WhatCarCanYouGetForAGrand.mp4\"\n ],\n subtitle: \"By Garage419\",\n thumb: \"images/WhatCarCanYouGetForAGrand.jpg\",\n title: \"What care can you get for a grand?\"\n }\n ]\n }\n ]\n };\n\n return {\n CastPlayer\n };\n};\n","\n \n \n \n
\n
\n \n
\n
Cargando ...
\n
\n \n \n \n \n\n\n\n\n\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PlayerJs.vue?vue&type=script&lang=js\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./PlayerJs.vue?vue&type=script&lang=js\"","import { render, staticRenderFns } from \"./PlayerJs.vue?vue&type=template&id=155ca987&scoped=true\"\nimport script from \"./PlayerJs.vue?vue&type=script&lang=js\"\nexport * from \"./PlayerJs.vue?vue&type=script&lang=js\"\nimport style0 from \"./PlayerJs.vue?vue&type=style&index=0&id=155ca987&prod&lang=css&scoped=true\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n \"155ca987\",\n null\n \n)\n\nexport default component.exports","\n