{"version":3,"sources":["components/video.js"],"names":["dmx","Component","constructor","node","parent","this","inView","bind","updateState","throttle","BaseComponent","call","initialData","position","duration","ended","muted","paused","playbackRate","volume","tag","attributes","src","type","String","default","autopause","Boolean","playinview","methods","pos","$node","currentTime","rate","load","play","pause","render","prototype","ondurationchange","onended","onpause","onplay","onplaying","onratechange","onseeked","ontimeupdate","onvolumechange","window","IntersectionObserver","observer","entries","forEach","entry","isIntersecting","data","props","set","observe","addEventListener","update","rect","getBoundingClientRect","bottom","right","top","innerHeight","document","documentElement","clientHeight","left","innerWidth","clientWidth","NaN","destroy","disconnect","removeEventListener"],"mappings":"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","file":"../dmxVideo/dmxVideo.js","sourcesContent":["dmx.Component('video', {\r\n\r\n  constructor: function(node, parent) {\r\n    this.inView = this.inView.bind(this);\r\n    this.updateState = dmx.throttle(this.updateState.bind(this));\r\n    dmx.BaseComponent.call(this, node, parent);\r\n  },\r\n\r\n  initialData: {\r\n      position: 0,\r\n      duration: 0,\r\n      ended: false,\r\n      muted: false,\r\n      paused: false,\r\n      playbackRate: 1,\r\n      volume: 1,\r\n      inView: false\r\n  },\r\n\r\n  tag: 'video',\r\n\r\n  attributes: {\r\n    src: {\r\n      type: String,\r\n      default: null\r\n    },\r\n\r\n    autopause: {\r\n      type: Boolean,\r\n      default: false\r\n    },\r\n\r\n    playinview: {\r\n      type: Boolean,\r\n      default: false\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    position: function(pos) {\r\n      this.$node.currentTime = pos;\r\n    },\r\n\r\n    playbackRate: function(rate) {\r\n      this.$node.playbackRate = rate;\r\n    },\r\n\r\n    volume: function(volume) {\r\n      this.$node.volume = volume;\r\n    },\r\n\r\n    load: function(src) {\r\n      this.$node.src = src;\r\n      this.$node.load();\r\n    },\r\n\r\n    play: function() {\r\n      this.$node.play();\r\n    },\r\n\r\n    pause: function() {\r\n      this.$node.pause();\r\n    }\r\n  },\r\n\r\n  render: function(node) {\r\n    dmx.BaseComponent.prototype.render.call(this, node);\r\n\r\n    this.$node.ondurationchange = this.updateState;\r\n    this.$node.onended = this.updateState;\r\n    this.$node.onpause = this.updateState;\r\n    this.$node.onplay = this.updateState;\r\n    this.$node.onplaying = this.updateState;\r\n    this.$node.onratechange = this.updateState;\r\n    this.$node.onseeked = this.updateState;\r\n    this.$node.ontimeupdate = this.updateState;\r\n    this.$node.onvolumechange = this.updateState;\r\n\r\n    if (window.IntersectionObserver) {\r\n      this.observer = new IntersectionObserver(entries => {\r\n        entries.forEach(entry => {\r\n          const inView = entry.isIntersecting;\r\n\r\n          if (!inView && this.data.inView && this.props.autopause) {\r\n            this.$node.pause();\r\n          }\r\n      \r\n          if (inView && !this.data.inView && this.props.playinview) {\r\n            this.$node.play();\r\n          }\r\n      \r\n          this.set('inView', inView);\r\n        });\r\n      });\r\n      this.observer.observe(this.$node);\r\n    } else {\r\n      window.addEventListener('scroll', this.inView);\r\n      window.addEventListener('resize', this.inView);\r\n      this.inView();\r\n    }\r\n\r\n    this.update({});\r\n    this.updateState();\r\n  },\r\n\r\n  inView: function() {\r\n    var rect = this.$node.getBoundingClientRect();\r\n    var inView = (\r\n      rect.bottom > 0 &&\r\n      rect.right > 0 &&\r\n      rect.top < (window.innerHeight || document.documentElement.clientHeight) &&\r\n      rect.left < (window.innerWidth || document.documentElement.clientWidth)\r\n    );\r\n\r\n    if (!inView && this.data.inView && this.props.autopause) {\r\n      this.$node.pause();\r\n    }\r\n\r\n    if (inView && !this.data.inView && this.props.playinview) {\r\n      this.$node.play();\r\n    }\r\n\r\n    this.set('inView', inView);\r\n  },\r\n\r\n  update: function(props) {\r\n    if (props.src != this.props.src) {\r\n      this.$node.src = this.props.src;\r\n      this.$node.load();\r\n    }\r\n  },\r\n\r\n  updateState: function() {\r\n    this.set('position', this.$node.currentTime);\r\n    this.set('duration', this.$node.duration == NaN ? 0 : this.$node.duration);\r\n    this.set('ended', this.$node.ended);\r\n    this.set('muted', this.$node.muted);\r\n    this.set('paused', this.$node.paused);\r\n    this.set('playbackRate', this.$node.playbackRate);\r\n    this.set('volume', this.$node.volume);\r\n  },\r\n\r\n  destroy: function() {\r\n    if (window.IntersectionObserver) {\r\n      this.observer.disconnect();\r\n      this.observer = null;\r\n    } else {\r\n      window.removeEventListener('scroll', this.inView);\r\n      window.removeEventListener('resize', this.inView);\r\n    }\r\n  }\r\n\r\n});\r\n"]}