<commit_before><template>
  <div class="h5p-audio-recorder-view">
    <vuMeter :avgMicFrequency="avgMicFrequency" :enablePulse="state === 'recording'"></vuMeter>

    <div v-if="state !== 'done'  && title" class="title">{{ title }}</div>

    <div role="status" v-bind:class="state">{{statusMessages[state] | unEscape}}</div>

    <audio class="h5p-audio-recorder-player" v-if="state === 'done' && audioSrc !== ''"
           controls="controls">
      Your browser does not support the <code>audio</code> element.
      <source v-bind:src="audioSrc">
    </audio>

    <timer ref="timer" v-bind:stopped="state !== 'recording'" v-if="state !== 'unsupported' && state !== 'done' && state !== 'insecure-not-allowed'"></timer>

    <div v-if="state !== 'blocked' && state !== 'unsupported' && state === 'done'" class="h5p-audio-recorder-download">
      {{ l10n.downloadRecording }}
    </div>

    <div class="button-row">
      <div class="button-row-double">
        <button class="button record"
                v-if="state === 'ready' || state === 'blocked'"
                ref="button-record"
                v-on:click="record">
          <span class="fa-circle"></span>
          {{ l10n.recordAnswer }}
        </button>

        <button class="button retry small"
                v-if="state === 'recording' || state === 'paused'"
                v-on:click="retry">
          <span class="fa-undo"></span>
          <span class="small-screen-hidden">{{ l10n.retry }}</span>
        </button>
        <button class="button pause"
                ref="button-pause"
                v-if="state === 'recording'"
                v-on:click="pause">
          <span class="fa-pause"></span>
          <span class="small-screen-hidden">{{ l10n.pause }}</span>
        </button>
        <button class="button record"
                ref="button-continue"
                v-if="state === 'paused'"
                v-on:click="record">
          <span class="fa-circle"></span>
          <span class="small-screen-hidden">{{ l10n.continue }}</span>
        </button>
        <button class="button done small"
                v-if="state === 'recording' || state === 'paused'"
                v-on:click="done">
          <span class="fa-play-circle"></span>
          <span class="small-screen-hidden">{{ l10n.done }}</span>
        </button>
      </div>

      <span class="button-row-left">
        <a class="button download"
           ref="button-download"
           v-if="state === 'done'"
           v-bind:href="audioSrc"
           v-bind:download="audioFilename">
          <span class="icon-download"></span>
          {{ l10n.download }}
        </a>
      </span>

      <span class="button-row-right">
        <button class="button retry"
                v-if="state === 'done' || state === 'cant-create-audio-file'"
                v-on:click="retry">
          <span class="fa-undo"></span>
          <span class="small-screen-hidden">{{ l10n.retry }}</span>
        </button>
      </span>
    </div>
  </div>
</template>

<script>
  import State from '../components/State';

  // focus on ref when state is changed
  const refToFocusOnStateChange = {};
  refToFocusOnStateChange[State.READY] = 'button-record';
  refToFocusOnStateChange[State.RECORDING] = 'button-pause';
  refToFocusOnStateChange[State.PAUSED] = 'button-continue';
  refToFocusOnStateChange[State.DONE] = 'button-download';

  export default {
    methods: {
      record: function() {
        this.$emit(State.RECORDING);
      },

      pause: function() {
        this.state = State.PAUSED;
        this.$emit(this.state);
      },

      done: function() {
        this.state = State.DONE;
        this.$emit(State.DONE);
      },

      retry: function() {
        const dialog = new H5P.ConfirmationDialog(
          {
            headerText: this.l10n.retryDialogHeaderText,
            dialogText: this.l10n.retryDialogBodyText,
            cancelText: this.l10n.retryDialogCancelText,
            confirmText: this.l10n.retryDialogConfirmText
          }
        );
        dialog.appendTo(this.$el);
        dialog.show();
        dialog.on('confirmed', () => {
          this.state = State.READY;
          this.$refs.timer.reset();
          this.$emit('retry');
        });
      }
    },

    filters: {
      unEscape: str => {
        return str.replace(/&#039;/g, '\'');
      },
    },<commit_msg>Don't use arrow function in filter. HFP-1002<commit_after><template>
  <div class="h5p-audio-recorder-view">
    <vuMeter :avgMicFrequency="avgMicFrequency" :enablePulse="state === 'recording'"></vuMeter>

    <div v-if="state !== 'done'  && title" class="title">{{ title }}</div>

    <div role="status" v-bind:class="state">{{statusMessages[state] | unEscape}}</div>

    <audio class="h5p-audio-recorder-player" v-if="state === 'done' && audioSrc !== ''"
           controls="controls">
      Your browser does not support the <code>audio</code> element.
      <source v-bind:src="audioSrc">
    </audio>

    <timer ref="timer" v-bind:stopped="state !== 'recording'" v-if="state !== 'unsupported' && state !== 'done' && state !== 'insecure-not-allowed'"></timer>

    <div v-if="state !== 'blocked' && state !== 'unsupported' && state === 'done'" class="h5p-audio-recorder-download">
      {{ l10n.downloadRecording }}
    </div>

    <div class="button-row">
      <div class="button-row-double">
        <button class="button record"
                v-if="state === 'ready' || state === 'blocked'"
                ref="button-record"
                v-on:click="record">
          <span class="fa-circle"></span>
          {{ l10n.recordAnswer }}
        </button>

        <button class="button retry small"
                v-if="state === 'recording' || state === 'paused'"
                v-on:click="retry">
          <span class="fa-undo"></span>
          <span class="small-screen-hidden">{{ l10n.retry }}</span>
        </button>
        <button class="button pause"
                ref="button-pause"
                v-if="state === 'recording'"
                v-on:click="pause">
          <span class="fa-pause"></span>
          <span class="small-screen-hidden">{{ l10n.pause }}</span>
        </button>
        <button class="button record"
                ref="button-continue"
                v-if="state === 'paused'"
                v-on:click="record">
          <span class="fa-circle"></span>
          <span class="small-screen-hidden">{{ l10n.continue }}</span>
        </button>
        <button class="button done small"
                v-if="state === 'recording' || state === 'paused'"
                v-on:click="done">
          <span class="fa-play-circle"></span>
          <span class="small-screen-hidden">{{ l10n.done }}</span>
        </button>
      </div>

      <span class="button-row-left">
        <a class="button download"
           ref="button-download"
           v-if="state === 'done'"
           v-bind:href="audioSrc"
           v-bind:download="audioFilename">
          <span class="icon-download"></span>
          {{ l10n.download }}
        </a>
      </span>

      <span class="button-row-right">
        <button class="button retry"
                v-if="state === 'done' || state === 'cant-create-audio-file'"
                v-on:click="retry">
          <span class="fa-undo"></span>
          <span class="small-screen-hidden">{{ l10n.retry }}</span>
        </button>
      </span>
    </div>
  </div>
</template>

<script>
  import State from '../components/State';

  // focus on ref when state is changed
  const refToFocusOnStateChange = {};
  refToFocusOnStateChange[State.READY] = 'button-record';
  refToFocusOnStateChange[State.RECORDING] = 'button-pause';
  refToFocusOnStateChange[State.PAUSED] = 'button-continue';
  refToFocusOnStateChange[State.DONE] = 'button-download';

  export default {
    methods: {
      record: function() {
        this.$emit(State.RECORDING);
      },

      pause: function() {
        this.state = State.PAUSED;
        this.$emit(this.state);
      },

      done: function() {
        this.state = State.DONE;
        this.$emit(State.DONE);
      },

      retry: function() {
        const dialog = new H5P.ConfirmationDialog(
          {
            headerText: this.l10n.retryDialogHeaderText,
            dialogText: this.l10n.retryDialogBodyText,
            cancelText: this.l10n.retryDialogCancelText,
            confirmText: this.l10n.retryDialogConfirmText
          }
        );
        dialog.appendTo(this.$el);
        dialog.show();
        dialog.on('confirmed', () => {
          this.state = State.READY;
          this.$refs.timer.reset();
          this.$emit('retry');
        });
      }
    },

    filters: {
      unEscape: function(str) {
        return str.replace(/&#039;/g, '\'');
      },
    },
{'fraction_non_alphanumeric': 0.17835331372992536, 'fraction_numerical': 0.007464374575887808, 'mean_word_length': 2.1313739376770537, 'pattern_counts': {'":': 0, '<': 135, '<?xml version=': 0, '>': 138, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 16, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6786555', 'n_tokens_mistral': 2766, 'n_tokens_neox': 2671, 'n_words': 472}