<commit_before>new Vue({
  el: '#app',
  data: {
    playerStatus: {},
    history: [],
    activeTab: 'playlist'
  },
  computed: {
    nowPlayingContent() {
      const { nowPlayingIdx: idx, playlist } = this.playerStatus;
      return (playlist && idx < playlist.length && playlist[idx]) || null;
    },
    bindPlayer() {
      return {
        playlist: this.playerStatus.playlist,
        state: this.playerStatus.state,
        loopMode: this.playerStatus.loopMode,
        shuffleMode: this.playerStatus.shuffleMode,
        nowPlayingIdx: this.playerStatus.nowPlayingIdx,
        nowPlayingContent: this.nowPlayingContent,
        volume: this.playerStatus.volume
      };
    },
    bindPlaylist() {
      return {
        contents: this.playerStatus.playlist,
        nowPlayingIdx: this.playerStatus.nowPlayingIdx,
        nowPlayingContent: this.nowPlayingContent
      };
    },
    tracks() {
      return this.activeTab === 'playlist' ? this.bindPlaylist : this.history;
    }
  },
  async created() {
    await this.init();
    this.setupSocket();
  },
  watch: {
    /* eslint-disable no-useless-computed-key, object-shorthand */
    ['playerStatus.nowPlayingIdx'](nowPlayingIdx) {
      const appName = 'jukebox';
      document.title =
        nowPlayingIdx >= 0
          ? `${this.playerStatus.playlist[nowPlayingIdx].title} - ${appName}`
          : appName;
    }
    /* eslint-enable no-useless-computed-key, object-shorthand */
  },
  methods: {
    async init() {
      const status = await fetch('/player/status');
      this.playerStatus = await status.json();

      const history = await fetch('/history');
      this.history = await history.json();
    },
    teardown() {
      this.playerStatus = {};
      this.history = [];
    },
    setupSocket() {
      const socket = new WebSocket(`ws://${location.host}/socket`);

      socket.addEventListener('message', event => {
        const { name, data } = JSON.parse(event.data);
        if (name === 'update-history') {
          this.history = data;
        } else if (name === 'update-status') {
          this.playerStatus = data;
        }
      });
      socket.addEventListener('close', () => {<commit_msg>Fix the bug when not be playing<commit_after>new Vue({
  el: '#app',
  data: {
    playerStatus: {},
    history: [],
    activeTab: 'playlist'
  },
  computed: {
    nowPlayingContent() {
      const { nowPlayingIdx: idx, playlist } = this.playerStatus;
      return (playlist && idx < playlist.length && playlist[idx]) || null;
    },
    bindPlayer() {
      return {
        playlist: this.playerStatus.playlist,
        state: this.playerStatus.state,
        loopMode: this.playerStatus.loopMode,
        shuffleMode: this.playerStatus.shuffleMode,
        nowPlayingIdx: this.playerStatus.nowPlayingIdx,
        nowPlayingContent: this.nowPlayingContent,
        volume: this.playerStatus.volume
      };
    },
    bindPlaylist() {
      return {
        contents: this.playerStatus.playlist,
        nowPlayingIdx: this.playerStatus.nowPlayingIdx,
        nowPlayingContent: this.nowPlayingContent
      };
    },
    tracks() {
      return this.activeTab === 'playlist' ? this.bindPlaylist : this.history;
    }
  },
  async created() {
    await this.init();
    this.setupSocket();
  },
  watch: {
    /* eslint-disable no-useless-computed-key, object-shorthand */
    ['playerStatus.state'](state) {
      const appName = 'jukebox';
      document.title =
        state === 'playing'
          ? `${this.playerStatus.playlist[this.playerStatus.nowPlayingIdx].title} - ${appName}`
          : appName;
    }
    /* eslint-enable no-useless-computed-key, object-shorthand */
  },
  methods: {
    async init() {
      const status = await fetch('/player/status');
      this.playerStatus = await status.json();

      const history = await fetch('/history');
      this.history = await history.json();
    },
    teardown() {
      this.playerStatus = {};
      this.history = [];
    },
    setupSocket() {
      const socket = new WebSocket(`ws://${location.host}/socket`);

      socket.addEventListener('message', event => {
        const { name, data } = JSON.parse(event.data);
        if (name === 'update-history') {
          this.history = data;
        } else if (name === 'update-status') {
          this.playerStatus = data;
        }
      });
      socket.addEventListener('close', () => {
{'fraction_non_alphanumeric': 0.1434398368456832, 'fraction_numerical': 0.00022660321776569228, 'mean_word_length': 2.4137664346481054, 'pattern_counts': {'":': 0, '<': 5, '<?xml version=': 0, '>': 8, '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': '3781403', 'n_tokens_mistral': 1323, 'n_tokens_neox': 1301, 'n_words': 240}