export const state = () => ({
  events: [
    {
      slug: 'example-event',
      name: 'Event Name',
      coc: 'https://hackcodeofconduct.org',
      rooms: [
        { slug: 'built', name: 'What did you build this week?' },
        { slug: 'work', name: 'Where do you work?' },
        { slug: 'hobby', name: 'What are your hobbies?' }
      ]
    }
  ]
})

<template>
  <div>
    <h1>Landing Page</h1>
  </div>
</template>

<template>
  <div>
    <h1>Landing Page</h1>
    <label for="event">Event Code</label>
    <input id="event" type="text" v-model="eventName">
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventName: ''
    }
  }
}
</script>

<template>
  <div>
    <h1>Landing Page</h1>
    <label for="event">Event Code</label>
    <input id="event" type="text" v-model="eventName" @keyup.enter="goToEvent">
  </div>
</template>

<script>
export default {
  data() {
    return {
      eventName: ''
    }
  },
  methods: {
    goToEvent() {
      if (this.$store.state.events.find(e => e.slug.toLowerCase() === this.eventName.trim().toLowerCase())) {
        this.$router.push(`/${this.eventName}`)
      } else {
        alert('No event with that code')
      }
    }
  }
}
</script>

<template>
  <div>
    <h1>Event {{$route.params.event}}</h1>
  </div>
</template>

<script>
export default {
  validate ({ params, store }) {
    return store.state.events.find(e => e.slug === params.event)
  }
}
</script>

<template>
  <div>
    <h1>Event {{$route.params.event}}</h1>
    <h2>{{ event.name }}</h2>
    <a :href="event.coc">Code of Conduct</a>
    <ul>
      <li v-for="room in event.rooms" :key="room.slug">
        <p>{{ room.name }}</p>
        <n-link :to="`/${$route.params.event}/${room.slug}`">Go to room</n-link>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  validate ({ params, store }) {
    return store.state.events.find(e => e.slug === params.event)
  },
  computed: {
    event () {
      return this.$store.state.events.find(e => e.slug === this.$route.params.event)
    }
  }
}
</script>

<template>
  <div>
    <h1>Event {{$route.params.event}}, Room {{$route.params.room}}</h1>
  </div>
</template>

<script>
export default {
  validate ({ params, store }) {
    const event = store.state.events.find(e => e.slug === params.event)
    return event.rooms.find(r => r.slug === params.room)
  }
}
</script>

<iframe :src="`https://tokbox.com/embed/embed/ot-embed.js?embedId=YOUR_EMBED_ID&iframe=true&room=${$route.params.event}-${$route.params.room}`" allow="microphone;camera">
</code></pre>
<p>With the inclusion of this <code>iframe</code> we have a basic video chat fully implemented. Multiple rooms can be created with one <code>embedId</code> using the <code>room</code> URL parameter. This application uses the route parameters to dynamically create a room based on the URL.</p>
<p><img src="https://d226lax1qjow5r.cloudfront.net/blog/blogposts/build-a-video-conversation-platform-for-online-gatherings-with-nuxt-js/video-call.png" alt="A working video call"></p>
<p>There is some small housekeeping to take care of before you wrap up.</p>
<h3>Add a Link to Event Lobby and Code of Conduct</h3>
<p>Like the event lobby, you will need to add an <code>event</code> computed property below the <code>validate()</code> method:</p>
<pre><code class="language-vue">computed: {
  event () {
    return this.$store.state.events.find(e => e.slug === this.$route.params.event)
  }
}
</code></pre>
<p>In the template you can now access event information:</p>
<pre><code class="language-vue"><n-link :to="'/' + $route.params.event">Back to {{event.name}} lobby</n-link>
<n-link :to="event.coc">Code of Conduct</n-link>
</code></pre>
<h3>Add the Room's Prompt</h3>
<p>Create a <code>room</code> computed property:</p>
<pre><code class="language-vue">room () {
  return this.event.rooms.find(r => r.slug === this.$route.params.room)
}
</code></pre>
<p>In the template you can now access all information in the <code>room</code> object:</p>
<pre><code class="language-vue"><p>Room prompt: {{room.name}}</p>
</code></pre>
<p><img src="https://d226lax1qjow5r.cloudfront.net/blog/blogposts/build-a-video-conversation-platform-for-online-gatherings-with-nuxt-js/video-call-extra-info.png" alt="Video call showing links to lobby, code of conduct, and the room's prompt"></p>
<h2>What Next?</h2>
<p>This is a fantastic start, and there are many directions to take this application. You may choose to:</p>
<ul>
<li>Add some styling</li>
<li>Build a 404 page</li>
<li>Deploy this online (remember to change the Website URL in the Embed project settings within the Video API Account Portal)</li>
<li>Use the Vonage Video API to implement this project and add features such as showing names, screen sharing, and chat.</li>
</ul>
<p>Check out our post on <a href="https://developer.vonage.com/en/blog/basic-video-chat">creating a basic video chat, like this, with Vonage Video API</a>.</p>
<p>The full project code can be found at <a href="https://github.com/nexmo-community/social-cafe">https://github.com/nexmo-community/social-cafe</a>.</p>
<p>As ever, if you need any support feel free to reach out in the <a href="/community/slack">Vonage Community Slack</a> and we hope you find use in this project for communities.</p>
</iframe>