<commit_before><template>
  <div id="app">
    <router-view class="content" :class="{ bottombarActive : bottombarShown }"></router-view>
    <transition name="slide">
      <Bottombar v-show="bottombarShown" style="position: fixed; bottom: 0;"></Bottombar>
    </transition>
    <Snackbar></Snackbar>
  </div>
</template>

<script>
import Event from './utils/EventBus.js'
import Snackbar from './components/Snackbar'
import Bottombar from './components/Bottombar'
import { autoInit } from 'material-components-web'

export default {
  name: 'app',
  components: { Snackbar, Bottombar },
  data () {
    return {
      title: 'GeekInc Remote Regie',
      bottombar: false
    }
  },
  watch: {
    'episode.started' (value) {
      if (value !== null && this.episode.ended === null) {
        this.timePlayedHandler = window.setInterval(() => {
          this.timePlayed = !this.episode.started ? 0 : (this.episode.ended ? new Date(this.episode.ended).getTime() : new Date().getTime()) - new Date(this.episode.started).getTime()
        }, 1000)
      }
      this.timePlayed = !this.episode.started ? 0 : (this.episode.ended ? new Date(this.episode.ended).getTime() : new Date().getTime()) - new Date(this.episode.started).getTime()
    },
    'episode.ended' (value) {
      if (value !== null && this.episode.started !== null) {
        window.clearInterval(this.timePlayedHandler)
      }
    }
  },
  computed: {
    bottombarShown () {
      return this.bottombar && this.$route.fullPath.indexOf('xsplit') < 0
    }
  },
  created () {
    Event.$on('bottombar.toggle', (boolean) => {
      this.bottombar = boolean
    })
  },
  mounted: function () {
    autoInit() // autoInit MDC
  },
  sockets: {
    connect: function () {
      console.log('Websocket connection established')
    },
    disconnect: function () {
      console.warn('Disconnected from Websocket')
    }
  }
}
</script>

<style scoped>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s
}
.slide-enter, .slide-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(100%);
}
</style> 

<style>
#app {
  font-family: Roboto,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

body {
  margin: 0;
}

.content,
.content .fab {
  -webkit-transition: margin-bottom 0.5s; /* Safari */
  transition: margin-bottom 0.5s;
}

.content.bottombarActive,
.content.bottombarActive .fab {
  margin-bottom: 56px;
}<commit_msg>[#] bottombarActive class is global to the App<commit_after><template>
  <div id="app" :class="{ bottombarActive : bottombarShown }">
    <router-view class="content"></router-view>
    <transition name="slide">
      <Bottombar v-show="bottombarShown" style="position: fixed; bottom: 0;"></Bottombar>
    </transition>
    <Snackbar></Snackbar>
  </div>
</template>

<script>
import Event from './utils/EventBus.js'
import Snackbar from './components/Snackbar'
import Bottombar from './components/Bottombar'
import { autoInit } from 'material-components-web'

export default {
  name: 'app',
  components: { Snackbar, Bottombar },
  data () {
    return {
      title: 'GeekInc Remote Regie',
      bottombar: false
    }
  },
  watch: {
    'episode.started' (value) {
      if (value !== null && this.episode.ended === null) {
        this.timePlayedHandler = window.setInterval(() => {
          this.timePlayed = !this.episode.started ? 0 : (this.episode.ended ? new Date(this.episode.ended).getTime() : new Date().getTime()) - new Date(this.episode.started).getTime()
        }, 1000)
      }
      this.timePlayed = !this.episode.started ? 0 : (this.episode.ended ? new Date(this.episode.ended).getTime() : new Date().getTime()) - new Date(this.episode.started).getTime()
    },
    'episode.ended' (value) {
      if (value !== null && this.episode.started !== null) {
        window.clearInterval(this.timePlayedHandler)
      }
    }
  },
  computed: {
    bottombarShown () {
      return this.bottombar && this.$route.fullPath.indexOf('xsplit') < 0
    }
  },
  created () {
    Event.$on('bottombar.toggle', (boolean) => {
      this.bottombar = boolean
    })
  },
  mounted: function () {
    autoInit() // autoInit MDC
  },
  sockets: {
    connect: function () {
      console.log('Websocket connection established')
    },
    disconnect: function () {
      console.warn('Disconnected from Websocket')
    }
  }
}
</script>

<style scoped>
.slide-enter-active, .slide-leave-active {
  transition: transform 0.5s
}
.slide-enter, .slide-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateY(100%);
}
</style> 

<style>
#app {
  font-family: Roboto,sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}

body {
  margin: 0;
}

.content,
.content .fab {
  -webkit-transition: margin-bottom 0.5s; /* Safari */
  transition: margin-bottom 0.5s;
}

#app.bottombarActive .content,
#app.bottombarActive .fab {
  margin-bottom: 56px;
}
{'fraction_non_alphanumeric': 0.16547049441786285, 'fraction_numerical': 0.01076555023923445, 'mean_word_length': 3.112295081967213, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 41, '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': '7013324', 'n_tokens_mistral': 1790, 'n_tokens_neox': 1691, 'n_words': 335}