<commit_before>var UICorePlugin = require('../../base/ui_core_plugin')
var JST = require('../../base/jst')
var Styler = require('../../base/styler')

class BackgroundButton extends UICorePlugin {
  get template() { return JST.background_button }
  get name() { return 'background_button' }
  get events() {
    return {
      'click .playpause-icon': 'click'
    }
  }
  get attributes() {
    return {
      'class': 'background-button',
      'data-background-button': '',
    }
  }
  constructor(core) {
    super(core)
    this.core = core
    this.settingsUpdate()
  }

  bindEvents() {
    this.listenTo(this.core.mediaControl.container, 'container:state:buffering', this.hide)
    this.listenTo(this.core.mediaControl.container, 'container:state:bufferfull', this.show)
    this.listenTo(this.core.mediaControl.container, 'container:settingsupdate', this.settingsUpdate)
    this.listenTo(this.core.mediaControl.container, 'container:dvr', this.settingsUpdate)
    this.listenTo(this.core.mediaControl, 'mediacontrol:show', this.show)
    this.listenTo(this.core.mediaControl, 'mediacontrol:hide', this.hide)
    this.listenTo(this.core.mediaControl, 'mediacontrol:playing', this.playing)
    this.listenTo(this.core.mediaControl, 'mediacontrol:notplaying', this.notplaying)
  }

  settingsUpdate() {
    if(this.shouldRender()) {
      this.render()
      this.bindEvents()
      if (this.core.mediaControl.container.isPlaying()) {
        this.playing()
      } else {
        this.notplaying()
      }
    } else {
      this.hide()
      this.stopListening()
      this.listenTo(this.core.mediaControl.container, 'container:settingsupdate', this.settingsUpdate)
    }
  }

  shouldRender() {
    //this plugin should render only if there is a playpause icon in media control
    var settings = this.core.mediaControl.settings
    var useBackgroundButton = this.core.options.useBackgroundButton === undefined || !!this.core.options.useBackgroundButton
    return useBackgroundButton && (settings.default.indexOf('playpause') >= 0 ||
      settings.left.indexOf('playpause') >= 0 ||
      settings.right.indexOf('playpause') >= 0)

  }

  click() {
    this.core.mediaControl.togglePlayPause()
  }

  show() {
    this.$el.removeClass('hide')
  }

  hide() {
    this.$el.addClass('hide')
  }

  enable() {
    this.stopListening()
    super()
    this.core.mediaControl.$el.find('[data-playpause]').hide()
  }<commit_msg>background button: fix plugin not showing when changing the current media control container (closes #190)<commit_after>var UICorePlugin = require('../../base/ui_core_plugin')
var JST = require('../../base/jst')
var Styler = require('../../base/styler')

class BackgroundButton extends UICorePlugin {
  get template() { return JST.background_button }
  get name() { return 'background_button' }
  get events() {
    return {
      'click .playpause-icon': 'click'
    }
  }
  get attributes() {
    return {
      'class': 'background-button',
      'data-background-button': '',
    }
  }
  constructor(core) {
    super(core)
    this.core = core
    this.settingsUpdate()
  }

  bindEvents() {
    this.listenTo(this.core.mediaControl.container, 'container:state:buffering', this.hide)
    this.listenTo(this.core.mediaControl.container, 'container:state:bufferfull', this.show)
    this.listenTo(this.core.mediaControl.container, 'container:settingsupdate', this.settingsUpdate)
    this.listenTo(this.core.mediaControl.container, 'container:dvr', this.settingsUpdate)
    this.listenTo(this.core.mediaControl, 'mediacontrol:containerchanged', this.settingsUpdate)
    this.listenTo(this.core.mediaControl, 'mediacontrol:show', this.show)
    this.listenTo(this.core.mediaControl, 'mediacontrol:hide', this.hide)
    this.listenTo(this.core.mediaControl, 'mediacontrol:playing', this.playing)
    this.listenTo(this.core.mediaControl, 'mediacontrol:notplaying', this.notplaying)
  }

  settingsUpdate() {
    this.stopListening()
    if(this.shouldRender()) {
      this.render()
      this.bindEvents()
      if (this.core.mediaControl.container.isPlaying()) {
        this.playing()
      } else {
        this.notplaying()
      }
    } else {
      this.hide()
      this.listenTo(this.core.mediaControl.container, 'container:settingsupdate', this.settingsUpdate)
    }
  }

  shouldRender() {
    //this plugin should render only if there is a playpause icon in media control
    var settings = this.core.mediaControl.settings
    var useBackgroundButton = this.core.options.useBackgroundButton === undefined || !!this.core.options.useBackgroundButton
    return useBackgroundButton && (settings.default.indexOf('playpause') >= 0 ||
      settings.left.indexOf('playpause') >= 0 ||
      settings.right.indexOf('playpause') >= 0)

  }

  click() {
    this.core.mediaControl.togglePlayPause()
  }

  show() {
    this.$el.removeClass('hide')
  }

  hide() {
    this.$el.addClass('hide')
  }

  enable() {
    this.stopListening()
    super()
    this.core.mediaControl.$el.find('[data-playpause]').hide()
  }
{'fraction_non_alphanumeric': 0.14560221870047543, 'fraction_numerical': 0.0017828843106180666, 'mean_word_length': 3.565099457504521, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 9, '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': '4147458', 'n_tokens_mistral': 1578, 'n_tokens_neox': 1528, 'n_words': 255}