<commit_before>// Copyright 2014 Globo.com Player authors. All rights reserved.
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.

/**
 * The MediaControl is responsible for displaying the Player controls.
 */

import {Config, Fullscreen, formatTime, extend, removeArrayItem} from 'base/utils'
import {Kibo} from 'vendor'

import Events from 'base/events'
import Styler from 'base/styler'
import UIObject from 'base/ui_object'
import Browser from 'components/browser'
import Mediator from 'components/mediator'
import template from 'base/template'
import Playback from 'base/playback'

import $ from 'clappr-zepto'
import merge from 'lodash.merge'

import mediaControlStyle from './public/media-control.scss'
import mediaControlHTML from './public/media-control.html'

import playIcon from 'icons/01-play.svg'
import pauseIcon from 'icons/02-pause.svg'
import stopIcon from 'icons/03-stop.svg'
import volumeIcon from 'icons/04-volume.svg'
import volumeMuteIcon from 'icons/05-mute.svg'
import fullscreenIcon from 'icons/06-expand.svg'
import exitFullscreenIcon from 'icons/07-shrink.svg'
import hdIcon from 'icons/08-hd.svg'

export default class MediaControl extends UIObject {
  get name() { return 'MediaControl' }
  get disabled() { return this.userDisabled || (this.container && this.container.getPlaybackType() === Playback.NO_OP)}

  get attributes() {
    return {
      'class': 'media-control',
      'data-media-control': ''
    }
  }

  get events() {
    return {
      'click [data-play]': 'play',
      'click [data-pause]': 'pause',
      'click [data-playpause]': 'togglePlayPause',
      'click [data-stop]': 'stop',
      'click [data-playstop]': 'togglePlayStop',
      'click [data-fullscreen]': 'toggleFullscreen',
      'click .bar-container[data-seekbar]': 'seek',
      'click .bar-container[data-volume]': 'onVolumeClick',
      'click .drawer-icon[data-volume]': 'toggleMute',
      'mouseenter .drawer-container[data-volume]': 'showVolumeBar',
      'mouseleave .drawer-container[data-volume]': 'hideVolumeBar',
      'mousedown .bar-container[data-volume]': 'startVolumeDrag',
      'mousemove .bar-container[data-volume]': 'mousemoveOnVolumeBar',
      'mousedown .bar-scrubber[data-seekbar]': 'startSeekDrag',
      'mousemove .bar-container[data-seekbar]': 'mousemoveOnSeekBar',
      'mouseleave .bar-container[data-seekbar]': 'mouseleaveOnSeekBar',
      'mouseenter .media-control-layer[data-controls]': 'setUserKeepVisible',
      'mouseleave .media-control-layer[data-controls]': 'resetUserKeepVisible'
    }
  }

  get template() { return template(mediaControlHTML) }

  get stylesheet() { return Styler.getStyleFor(mediaControlStyle, {baseUrl: this.options.baseUrl}) }

  get volume() { return (this.container && this.container.isReady) ? this.container.volume : this.intendedVolume }
  get muted() { return this.volume === 0 }

  constructor(options) {
    super(options)
    this.persistConfig = this.options.persistConfig
    this.container = options.container
    this.currentPositionValue = null
    this.currentDurationValue = null
    const initialVolume = (this.persistConfig) ? Config.restore('volume') : 100
    this.setVolume(this.options.mute ? 0 : initialVolume)
    this.keepVisible = false
    this.fullScreenOnVideoTagSupported = null // unknown
    this.addEventListeners()
    this.settings = {
      left: ['play', 'stop', 'pause'],
      right: ['volume'],
      default: ['position', 'seekbar', 'duration']
    }

    if (this.container) {
      if (!$.isEmptyObject(this.container.settings)) {
        this.settings = $.extend({}, this.container.settings)
      }
    } else {
      this.settings = {}
    }

    this.userDisabled = false
    if ((this.container && this.container.mediaControlDisabled) || this.options.chromeless) {
      this.disable()
    }
    this.stopDragHandler = (event) => this.stopDrag(event)
    this.updateDragHandler = (event) => this.updateDrag(event)
    $(document).bind('mouseup', this.stopDragHandler)
    $(document).bind('mousemove', this.updateDragHandler)
  }

  addEventListeners() {
    if (this.container) {
      Mediator.on(`${this.options.playerId}:${Events.PLAYER_RESIZE}`, this.playerResize, this)
      this.listenTo(this.container, Events.CONTAINER_PLAY, this.changeTogglePlay)
      this.listenTo(this.container, Events.CONTAINER_PAUSE, this.changeTogglePlay)
      this.listenTo(this.container, Events.CONTAINER_DBLCLICK, this.toggleFullscreen)
      this.listenTo(this.container, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate)
      this.listenTo(this.container, Events.CONTAINER_PROGRESS, this.updateProgressBar)
      this.listenTo(this.container, Events.CONTAINER_SETTINGSUPDATE, this.settingsUpdate)
      this.listenTo(this.container, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.settingsUpdate)
      this.listenTo(this.container, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate)
      this.listenTo(this.container, Events.CONTAINER_MEDIACONTROL_DISABLE, this.disable)
      this.listenTo(this.container, Events.CONTAINER_MEDIACONTROL_ENABLE, this.enable)
      this.listenTo(this.container, Events.CONTAINER_ENDED, this.ended)<commit_msg>media_control: listens to stop container to toggle play<commit_after>// Copyright 2014 Globo.com Player authors. All rights reserved.
// Use of this source code is governed by a BSD-style
// license that can be found in the LICENSE file.

/**
 * The MediaControl is responsible for displaying the Player controls.
 */

import {Config, Fullscreen, formatTime, extend, removeArrayItem} from 'base/utils'
import {Kibo} from 'vendor'

import Events from 'base/events'
import Styler from 'base/styler'
import UIObject from 'base/ui_object'
import Browser from 'components/browser'
import Mediator from 'components/mediator'
import template from 'base/template'
import Playback from 'base/playback'

import $ from 'clappr-zepto'
import merge from 'lodash.merge'

import mediaControlStyle from './public/media-control.scss'
import mediaControlHTML from './public/media-control.html'

import playIcon from 'icons/01-play.svg'
import pauseIcon from 'icons/02-pause.svg'
import stopIcon from 'icons/03-stop.svg'
import volumeIcon from 'icons/04-volume.svg'
import volumeMuteIcon from 'icons/05-mute.svg'
import fullscreenIcon from 'icons/06-expand.svg'
import exitFullscreenIcon from 'icons/07-shrink.svg'
import hdIcon from 'icons/08-hd.svg'

export default class MediaControl extends UIObject {
  get name() { return 'MediaControl' }
  get disabled() { return this.userDisabled || (this.container && this.container.getPlaybackType() === Playback.NO_OP)}

  get attributes() {
    return {
      'class': 'media-control',
      'data-media-control': ''
    }
  }

  get events() {
    return {
      'click [data-play]': 'play',
      'click [data-pause]': 'pause',
      'click [data-playpause]': 'togglePlayPause',
      'click [data-stop]': 'stop',
      'click [data-playstop]': 'togglePlayStop',
      'click [data-fullscreen]': 'toggleFullscreen',
      'click .bar-container[data-seekbar]': 'seek',
      'click .bar-container[data-volume]': 'onVolumeClick',
      'click .drawer-icon[data-volume]': 'toggleMute',
      'mouseenter .drawer-container[data-volume]': 'showVolumeBar',
      'mouseleave .drawer-container[data-volume]': 'hideVolumeBar',
      'mousedown .bar-container[data-volume]': 'startVolumeDrag',
      'mousemove .bar-container[data-volume]': 'mousemoveOnVolumeBar',
      'mousedown .bar-scrubber[data-seekbar]': 'startSeekDrag',
      'mousemove .bar-container[data-seekbar]': 'mousemoveOnSeekBar',
      'mouseleave .bar-container[data-seekbar]': 'mouseleaveOnSeekBar',
      'mouseenter .media-control-layer[data-controls]': 'setUserKeepVisible',
      'mouseleave .media-control-layer[data-controls]': 'resetUserKeepVisible'
    }
  }

  get template() { return template(mediaControlHTML) }

  get stylesheet() { return Styler.getStyleFor(mediaControlStyle, {baseUrl: this.options.baseUrl}) }

  get volume() { return (this.container && this.container.isReady) ? this.container.volume : this.intendedVolume }
  get muted() { return this.volume === 0 }

  constructor(options) {
    super(options)
    this.persistConfig = this.options.persistConfig
    this.container = options.container
    this.currentPositionValue = null
    this.currentDurationValue = null
    const initialVolume = (this.persistConfig) ? Config.restore('volume') : 100
    this.setVolume(this.options.mute ? 0 : initialVolume)
    this.keepVisible = false
    this.fullScreenOnVideoTagSupported = null // unknown
    this.addEventListeners()
    this.settings = {
      left: ['play', 'stop', 'pause'],
      right: ['volume'],
      default: ['position', 'seekbar', 'duration']
    }

    if (this.container) {
      if (!$.isEmptyObject(this.container.settings)) {
        this.settings = $.extend({}, this.container.settings)
      }
    } else {
      this.settings = {}
    }

    this.userDisabled = false
    if ((this.container && this.container.mediaControlDisabled) || this.options.chromeless) {
      this.disable()
    }
    this.stopDragHandler = (event) => this.stopDrag(event)
    this.updateDragHandler = (event) => this.updateDrag(event)
    $(document).bind('mouseup', this.stopDragHandler)
    $(document).bind('mousemove', this.updateDragHandler)
  }

  addEventListeners() {
    if (this.container) {
      Mediator.on(`${this.options.playerId}:${Events.PLAYER_RESIZE}`, this.playerResize, this)
      this.listenTo(this.container, Events.CONTAINER_PLAY, this.changeTogglePlay)
      this.listenTo(this.container, Events.CONTAINER_PAUSE, this.changeTogglePlay)
      this.listenTo(this.container, Events.CONTAINER_STOP, this.changeTogglePlay)
      this.listenTo(this.container, Events.CONTAINER_DBLCLICK, this.toggleFullscreen)
      this.listenTo(this.container, Events.CONTAINER_TIMEUPDATE, this.onTimeUpdate)
      this.listenTo(this.container, Events.CONTAINER_PROGRESS, this.updateProgressBar)
      this.listenTo(this.container, Events.CONTAINER_SETTINGSUPDATE, this.settingsUpdate)
      this.listenTo(this.container, Events.CONTAINER_PLAYBACKDVRSTATECHANGED, this.settingsUpdate)
      this.listenTo(this.container, Events.CONTAINER_HIGHDEFINITIONUPDATE, this.highDefinitionUpdate)
      this.listenTo(this.container, Events.CONTAINER_MEDIACONTROL_DISABLE, this.disable)
      this.listenTo(this.container, Events.CONTAINER_MEDIACONTROL_ENABLE, this.enable)
      this.listenTo(this.container, Events.CONTAINER_ENDED, this.ended)
{'fraction_non_alphanumeric': 0.12932174570187038, 'fraction_numerical': 0.004723219346306443, 'mean_word_length': 4.228148148148148, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 7, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5992013', 'n_tokens_mistral': 3312, 'n_tokens_neox': 3223, 'n_words': 661}