<commit_before><template>
  <main class="xsplit">
  	<div class="title">{{ title }}</div>
    <div class="content">
    	<img :src="imgUri">
   	</div>
  </main>
</template>

<script>
// import Event from '../utils/EventBus.js'
import Vue from 'vue'
import VueSocketio from 'vue-socket.io'
Vue.use(VueSocketio, 'http://localhost:8080')

export default {
  name: 'xsplit',
  data () {
    return {
      title: 'Ohlalalalalalalalalalalalalalalalala',
      imgUri: require('../assets/geekinc-logo_512.png')
    }
  },
  sockets: {
    connect: function () {
      console.log('socket connected')
    },
    customEmit: function (val) {
      console.log('this method was fired by the socket server. eg: io.emit("customEmit", data)')
    }
  },
  methods: {
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.xsplit {
	display: flex;
	flex-flow: column-reverse;
  background-image: url('../assets/brick-wall.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.title {
	display: inline-block;
	flex: 1 0 auto; /* sized to content */
  margin: 0.5em 1em;
  padding: 0em 0.3em;
  max-width: calc(100% - 400px); /* je ne sais pas quelle taille fait exactement le twitch chat donc j'ai mis 400px à l'arrache */
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 52px;
  color: black;
  text-transform: uppercase;<commit_msg>[#] Listen the Xsplit events to update the view<commit_after><template>
  <main class="xsplit" :style="{ 'background-image': xsplit.picture ? 'url(' + require('../assets/brick-wall.jpg') + ')' : null }">
    <div class="title">{{ xsplit.title }}</div>
    <div class="content">
      <img :src="xsplit.picture">
   	</div>
  </main>
</template>

<script>
import Event from '../utils/EventBus.js'

export default {
  name: 'xsplit',
  data () {
    return {
      xsplit: {}
    }
  },
  created () {
    this.fetchData()
    // malheureusement, je n'ai pas trouvé d'autre moyen pour observer un event contenant un '.' - @Matthieu Petit
    // si jamais on en a besoin, je laisse ça ici
    this.$options.sockets['xsplit'] = function (data) {
      this.xsplit = data
    }.bind(this)
  },
  methods: {
    fetchData: function () {
      this.$http.get('/api/xsplit/').then(
        function (response) {
          this.xsplit = response.body
        },
        function (response) {
          console.error(response)
          Event.$emit('snackbar.message', 'Error : ' + (response.statusText ? response.statusText : 'no connection'))
        }
      )
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.xsplit {
	display: flex;
	flex-flow: column-reverse;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100vw;
  height: 100vh;
}

.title {
	display: inline-block;
	flex: 1 0 auto; /* sized to content */
  margin: 0.5em 1em;
  padding: 0em 0.3em;
  max-width: calc(100% - 400px); /* je ne sais pas quelle taille fait exactement le twitch chat donc j'ai mis 400px à l'arrache */
  font-family: 'Oswald', sans-serif;
  font-weight: 400;
  font-size: 52px;
  color: black;
  text-transform: uppercase;
{'fraction_non_alphanumeric': 0.15701970443349753, 'fraction_numerical': 0.01939655172413793, 'mean_word_length': 2.996309963099631, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 29, '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': '2624803', 'n_tokens_mistral': 1192, 'n_tokens_neox': 1127, 'n_words': 299}