amazon-chime-sdk-rails 1.0.0 → 1.1.0

data/spec/rails_app/app/javascript/components/DeviseTokenAuth.vue

@@ -1,84 +0,0 @@
-<template>
-  <div id="login">
-    <h2>Log in</h2>
-    <form class="new_user" @submit.prevent="login">
-      <div class="field">
-        <label for="user_email">Email</label><br />
-        <input v-model="loginParams.email" autofocus="autofocus" autocomplete="email" type="email" value="" name="user[email]" id="user_email" />
-      </div>
-      <div class="field">
-        <label for="user_password">Password</label><br />
-        <input v-model="loginParams.password" autocomplete="current-password" type="password" name="user[password]" id="user_password" />
-      </div>
-      <div class="actions">
-        <input type="submit" name="commit" value="Log in" data-disable-with="Log in" />
-      </div>
-    </form>
-
-    <a href="/users/sign_up">(Sign up)</a><br />
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default {
-  name: 'DeviseTokenAuth',
-  props: {
-    isLogout: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data () {
-    return {
-      loginParams: {
-        email: "",
-        password: ""
-      }
-    }
-  },
-  mounted () {
-    if (this.isLogout) {
-      this.logout();
-    }
-  },
-  methods: {
-    login () {
-      axios
-        .post('/auth/sign_in', { email: this.loginParams.email, password: this.loginParams.password })
-        .then(response => {
-          if (response.status == 200) {
-            let authHeaders = {};
-            for (let authHeader of ['access-token', 'client', 'uid']) {
-              authHeaders[authHeader] = response.headers[authHeader];
-              axios.defaults.headers.common[authHeader] = authHeaders[authHeader];
-            }
-            this.$store.commit('signIn', { user: response.data.data, authHeaders: authHeaders });
-            if (this.$route.query.redirect) {
-              this.$router.push(this.$route.query.redirect);
-            } else {
-              this.$router.push('/');
-            }
-          }
-        })
-        .catch (error => {
-          console.log("Authentication failed");
-          if (error.response.status == 401) {
-            this.$router.go({path: this.$router.currentRoute.path});
-          }
-        })
-    },
-    logout () {
-      for (var authHeader of Object.keys(this.$store.getters.authHeaders)) {
-        delete axios.defaults.headers.common[authHeader];
-      }
-      this.$store.commit('signOut');
-      this.$router.push('/');
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

data/spec/rails_app/app/javascript/components/meetings/Index.vue

@@ -1,100 +0,0 @@
-<template>
-  <div>
-    <p id="notice">{{ notice }}</p>
-
-    <h1>Meetings by Amazon Chime SDK</h1>
-
-    <table>
-      <thead>
-        <tr>
-          <th>Meeting ID</th>
-          <th>External Meeting ID</th>
-          <th>Media Region</th>
-          <th colspan="1"></th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <tr v-for="meeting in meetings" :key="`${meeting.Meeting.MeetingId}`">
-          <td><router-link v-bind:to="{ name: 'Meeting', params: { room_id: room_id, meeting_id: meeting.Meeting.MeetingId } }">{{ meeting.Meeting.MeetingId }}</router-link></td>
-          <td>{{ meeting.Meeting.ExternalMeetingId }}</td>
-          <td>{{ meeting.Meeting.MediaRegion }}</td>
-          <td><a href="#" v-on:click="delete_meeting(meeting.Meeting.MeetingId, 'Are you sure?')" data-remote="true">Destroy</a></td>
-        </tr>
-      </tbody>
-    </table>
-
-    <p><a href="#" v-on:click="create_meeting(room_id)" data-remote="true">Create Meeting</a></p>
-    <p><router-link v-bind:to="{ name: 'Room', params: { room_id: room_id } }">Back to Room</router-link></p>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default {
-  name: 'Meetings',
-  props: {
-    room_id: {
-      required: true
-    },
-    message: String
-  },
-  data () {
-    return {
-      meetings: [],
-      notice: this.message
-    }
-  },
-  mounted () {
-    axios
-      .get(`/rooms/${this.room_id}/meetings`)
-      .then(response => {
-        this.meetings = response.data.meetings;
-      })
-      .catch(error => {
-        if (error.response.status == 403) {
-          this.$router.push({ name: 'Room', params: { room_id: this.room_id, message: error.response.data.notice } });
-        }
-        this.notice = error;
-      })
-  },
-  methods: {
-    create_meeting (room_id) {
-      axios
-        .post(`/rooms/${this.room_id}/meetings`)
-        .then(response => {
-          if (response.status == 201) {
-            let meeting_id = response.data.Meeting.MeetingId;
-            this.$router.push({ name: 'Meeting', params: { room_id: this.room_id, meeting_id: meeting_id, message: `Meeting <${meeting_id}> was successfully created.` } });
-          }
-        })
-        .catch (error => {
-          if (error.response.status == 403) {
-            this.notice = error.response.data.notice;
-          } else {
-            this.notice = error;
-          }
-        })
-    },
-    delete_meeting(meeting_id, confirmation) {
-      if (confirm(confirmation)) {
-        axios
-          .delete(`/rooms/${this.room_id}/meetings/${meeting_id}`)
-          .then(response => {
-            if (response.status == 204) {
-              this.notice = `Meeting <${meeting_id}> was successfully destroyed.`;
-            }
-          })
-          .catch (error => {
-            console.log(error.response);
-            this.notice = error;
-          })
-      }
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

data/spec/rails_app/app/javascript/components/meetings/Meeting.vue

@@ -1,178 +0,0 @@
-<template>
-  <div>
-    <p id="notice">{{ notice }}</p>
-
-    <h1>Meeting by Amazon Chime SDK</h1>
-
-    <p><router-link v-bind:to="{ name: 'Meetings', params: { room_id: room_id } }">Show Meetings</router-link></p>
-
-    <div v-if="meeting">
-      <strong>Meeting</strong>
-      <p>
-        Meeting ID : <router-link v-bind:to="{ name: 'Meeting', params: { room_id: room_id, meeting_id: meeting.Meeting.MeetingId } }">{{ meeting.Meeting.MeetingId }}</router-link><br>
-        External Meeting ID : {{ meeting.Meeting.ExternalMeetingId }}<br>
-        Media Region : {{ meeting.Meeting.MediaRegion }}
-      </p>
-    </div>
-
-    <div v-if="attendee">
-      <strong>Attendee</strong>
-      <p>
-        Attendee ID : <a v-bind:href="`/rooms/${room_id}/meetings/${meeting.Meeting.MeetingId}/attendees/${attendee.Attendee.AttendeeId}`">{{ attendee.Attendee.AttendeeId }}</a><br>
-        External User ID : {{ attendee.Attendee.ExternalUserId }}<br>
-        Application Attendee Name : {{ attendee.Attendee.ApplicationMetadata.User.name }}
-      </p>
-
-      <div id="status">
-        <strong>Status</strong>
-        <div v-if="meetingOnline">
-          <div id="meeting-status">
-            <p>Meeting : Online <input type="button" value="Leave a meeting" v-on:click="leave()"></p>
-            <div id="audio-status">
-              <div v-if="meetingMuted">
-                <p>Audio : Muted <input type="button" value="Unmute" v-on:click="unmute()"></p>
-              </div>
-              <div v-else>
-                <p>Audio : Active <input type="button" value="Mute" v-on:click="mute()"></p>
-              </div>
-            </div>
-          </div>
-          <div id="attendee-status">
-            <strong>Present Attendees</strong>
-            <ul>
-              <li v-for="attendeeName in presentAttendees" :key="attendeeName">{{ attendeeName }}</li>
-            </ul>
-          </div>
-        </div>
-        <div v-else>
-          <div id="meeting-status">
-            <p>Meeting : Offline <input type="button" value="Join a meeting" v-on:click="join()"></p>
-          </div>
-        </div>
-      </div>
-
-      <audio id="audio"></audio>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-import {
-  ConsoleLogger,
-  DefaultDeviceController,
-  DefaultMeetingSession,
-  LogLevel,
-  MeetingSessionConfiguration
-} from 'amazon-chime-sdk-js'
-
-export default {
-  name: 'Meeting',
-  props: {
-    room_id: {
-      required: true
-    },
-    meeting_id: {
-      required: true
-    },
-    message: String
-  },
-  data () {
-    return {
-      meeting: null,
-      attendee: null,
-      notice: this.message,
-      meetingOnline: false,
-      meetingMuted: false,
-      presentAttendees: []
-    }
-  },
-  mounted () {
-    axios
-      .get(`/rooms/${this.room_id}/meetings/${this.meeting_id}`)
-      .then(response => {
-        this.meeting = { Meeting: response.data.Meeting };
-        this.attendee = { Attendee: response.data.Attendee };
-
-        const logger = new ConsoleLogger('ChimeMeetingLogs', LogLevel.INFO);
-        const deviceController = new DefaultDeviceController(logger);
-        const configuration = new MeetingSessionConfiguration(this.meeting, this.attendee);
-        this.meetingSession = new DefaultMeetingSession(configuration, logger, deviceController);
-      })
-      .catch(error => {
-          if (error.response.status == 404) {
-            this.$router.push({ name: 'Meetings', params: { room_id: this.room_id, message: `${error.response.data.error.message}: ${error.response.data.error.type}` } });
-          } else {
-            this.notice = error;
-          }
-      })
-  },
-  methods: {
-    // Customize this function to extract attendee name to show
-    showApplicationUserName(attendee) {
-      // return attendee.Attendee.AttendeeId;
-      return `${attendee.Attendee.ApplicationMetadata.User.name} (${attendee.Attendee.AttendeeId})`;
-    },
-    async join() {
-      try {
-        const audioInputDevices = await this.meetingSession.audioVideo.listAudioInputDevices();
-        const audioOutputDevices = await this.meetingSession.audioVideo.listAudioOutputDevices();
-        await this.meetingSession.audioVideo.chooseAudioInputDevice(audioInputDevices[0].deviceId);
-        await this.meetingSession.audioVideo.chooseAudioOutputDevice(audioOutputDevices[0].deviceId);
-      } catch (error) {
-        // handle error - unable to acquire audio device perhaps due to permissions blocking
-        console.log(error);
-      }
-      const audioOutputElement = document.getElementById('audio');
-      this.meetingSession.audioVideo.bindAudioElement(audioOutputElement);
-      this.meetingSession.audioVideo.start();
-      this.meetingOnline = true;
-      this.parepareAttendeeStatus();
-    },
-    leave() {
-      this.meetingSession.audioVideo.stop();
-      this.meetingOnline = false;
-      this.meetingMuted = false;
-      this.presentAttendees = [];
-    },
-    mute() {
-      this.meetingSession.audioVideo.realtimeMuteLocalAudio();
-      this.meetingMuted = true;
-    },
-    unmute() {
-      const unmuted = this.meetingSession.audioVideo.realtimeUnmuteLocalAudio();
-      if (unmuted) {
-        this.meetingMuted = false;
-      } else {
-        console.log('You cannot unmute yourself');
-      }
-    },
-    parepareAttendeeStatus() {
-      this.presentAttendeeMap = {};
-      const callback = (presentAttendeeId, present) => {
-        if (present) {
-          axios
-            .get(`/rooms/${this.room_id}/meetings/${this.meeting_id}/attendees/${presentAttendeeId}`)
-            .then(response => {
-              this.presentAttendeeMap[presentAttendeeId] = response.data;
-              this.updateAttendeeStatus(this.presentAttendeeMap);
-            })
-            .catch(error => {
-              console.log(error);
-            });
-        } else {
-          delete this.presentAttendeeMap[presentAttendeeId]
-          this.updateAttendeeStatus(this.presentAttendeeMap);
-        }
-      };
-      this.meetingSession.audioVideo.realtimeSubscribeToAttendeeIdPresence(callback);
-    },
-    updateAttendeeStatus(presentAttendeeMap) {
-      this.presentAttendees = Object.values(presentAttendeeMap).map(attendee => this.showApplicationUserName(attendee));
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

data/spec/rails_app/app/javascript/components/rooms/Index.vue

@@ -1,53 +0,0 @@
-<template>
-  <div>
-    <p id="notice">{{ notice }}</p>
-
-    <h1>Rooms</h1>
-
-    <table>
-      <thead>
-        <tr>
-          <th>Name</th>
-          <th colspan="3"></th>
-        </tr>
-      </thead>
-
-      <tbody>
-        <tr v-for="room in rooms" :key="`${room.id}`">
-          <td>{{ room.name }}</td>
-          <td><router-link v-bind:to="{ name: 'Room', params: { room_id: room.id } }">Show</router-link></td>
-          <td><a v-bind:href="`/rooms/${room.id}/edit`">(Edit)</a></td>
-          <td><a v-bind:href="`/rooms/${room.id}`" data-method="delete" data-confirm="Are you sure?" rel="nofollow">(Destroy)</a></td>
-        </tr>
-      </tbody>
-    </table>
-
-    <br>
-
-    <a href="/rooms/new">(New Room)</a>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default {
-  name: 'Rooms',
-  data () {
-    return {
-      rooms: [],
-      notice: null
-    }
-  },
-  mounted () {
-    axios
-      .get('/rooms')
-      .then(response => {
-        this.rooms = response.data;
-      })
-  }
-}
-</script>
-
-<style scoped>
-</style>

data/spec/rails_app/app/javascript/components/rooms/Show.vue

@@ -1,91 +0,0 @@
-<template>
-  <div v-if="room">
-    <p id="notice">{{ notice }}</p>
-
-    <p>
-      <strong>Name:</strong>
-      {{ room.name }}
-    </p>
-
-    <p>
-      <strong>Private Meeting:</strong>
-      <p><router-link v-bind:to="{ name: 'Meetings', params: { room_id: room.id } }">Show Meetings</router-link></p>
-      <p><a href="#" v-on:click="create_meeting(room)" data-remote="true">Create Meeting</a></p>
-    </p>
-
-    <p>
-      <strong>Members:</strong>
-      <div>
-        <table>
-          <tbody>
-            <tr v-for="member in room.members" :key="`${member.name}`">
-              <td>{{ member.name }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </p>
-
-    <p>
-      <strong>Manage members:</strong>
-      <a v-bind:href="`/rooms/${room.id}`">(Show)</a>
-    </p>
-
-    <br>
-
-    <a v-bind:href="`/rooms/${room.id}/edit`">(Edit)</a>
-    <router-link v-bind:to="{ name: 'Rooms' }">Back</router-link>
-  </div>
-</template>
-
-<script>
-import axios from 'axios'
-
-export default {
-  name: 'Room',
-  props: {
-    room_id: {
-      required: true
-    },
-    message: String
-  },
-  data () {
-    return {
-      room: null,
-      notice: this.message
-    }
-  },
-  mounted () {
-    axios
-      .get(`/rooms/${this.room_id}`)
-      .then(response => {
-        this.room = response.data;
-      })
-      .catch(error => {
-        this.notice = error;
-      })
-  },
-  methods: {
-    create_meeting (room_id) {
-      axios
-        .post(`/rooms/${this.room_id}/meetings`)
-        .then(response => {
-          if (response.status == 201) {
-            let meeting_id = response.data.Meeting.MeetingId;
-            this.$router.push({ name: 'Meeting', params: { room_id: this.room_id, meeting_id: meeting_id, message: `Meeting <${meeting_id}> was successfully created.` } });
-          }
-        })
-        .catch (error => {
-          if (error.response.status == 403) {
-            this.notice = error.response.data.notice;
-          } else {
-            this.notice = error;
-          }
-        })
-    }
-  }
-}
-</script>
-
-<style scoped>
-</style>

data/spec/rails_app/app/javascript/packs/application.js

@@ -1,17 +0,0 @@
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-
-require("@rails/ujs").start()
-require("turbolinks").start()
-require("@rails/activestorage").start()
-require("channels")
-
-
-// Uncomment to copy all static images under ../images to the output folder and reference
-// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
-// or the `imagePath` JavaScript helper below.
-//
-// const images = require.context('../images', true)
-// const imagePath = (name) => images(name, true)

data/spec/rails_app/app/javascript/packs/spa.js

@@ -1,14 +0,0 @@
-import Vue from 'vue'
-import App from '../App.vue'
-import router from '../router'
-import store from '../store'
-
-Vue.config.productionTip = false
-
-document.addEventListener('DOMContentLoaded', () => {
-  new Vue({
-    router,
-    store,
-    render: h => h(App)
-  }).$mount('#app')
-})

data/spec/rails_app/app/javascript/router/index.js

@@ -1,74 +0,0 @@
-import Vue from 'vue'
-import VueRouter from 'vue-router'
-import store from '../store'
-import DeviseTokenAuth from '../components/DeviseTokenAuth.vue'
-import Rooms from '../components/rooms/Index.vue'
-import Room from '../components/rooms/Show.vue'
-import Meetings from '../components/meetings/Index.vue'
-import Meeting from '../components/meetings/Meeting.vue'
-
-Vue.use(VueRouter)
-
-const routes = [
-  // Routes for common components
-  {
-    path: '/',
-    name: 'Root',
-    component: Rooms
-  },
-  {
-    path: '/users/sign_in',
-    name: 'SignIn',
-    component: DeviseTokenAuth
-  },
-  {
-    path: '/users/sign_out',
-    name: 'SignOut',
-    component: DeviseTokenAuth,
-    props: { isLogout: true }
-  },
-
-  // Routes for Rooms
-  {
-    path: '/rooms',
-    name: 'Rooms',
-    component: Rooms
-  },
-  {
-    path: '/rooms/:room_id',
-    name: 'Room',
-    component: Room,
-    props: true,
-    meta: { requiresAuth: true }
-  },
-
-  // Routes for Meetings
-  {
-    path: '/rooms/:room_id/meetings',
-    name: 'Meetings',
-    component: Meetings,
-    props: true,
-    meta: { requiresAuth: true }
-  },
-  {
-    path: '/rooms/:room_id/meetings/:meeting_id',
-    name: 'Meeting',
-    component: Meeting,
-    props: true,
-    meta: { requiresAuth: true }
-  }
-]
-
-const router = new VueRouter({
-  routes
-})
-
-router.beforeEach((to, from, next) => {
-  if (to.matched.some(record => record.meta.requiresAuth) && !store.getters.userSignedIn) {
-      next({ name: 'SignIn', query: { redirect: to.fullPath }});
-  } else {
-    next();
-  }
-})
-
-export default router

data/spec/rails_app/app/javascript/store/index.js

@@ -1,37 +0,0 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import createPersistedState from "vuex-persistedstate"
-
-Vue.use(Vuex)
-
-export default new Vuex.Store({
-  state: {
-    signedInStatus: false,
-    currentUser: null,
-    authHeaders: {}
-  },
-  mutations: {
-    signIn(state, { user, authHeaders }) {
-      state.currentUser = user;
-      state.authHeaders = authHeaders;
-      state.signedInStatus = true;
-    },
-    signOut(state) {
-      state.signedInStatus = false;
-      state.currentUser = null;
-      state.authHeaders = {};
-    }
-  },
-  getters: {
-    userSignedIn(state) {
-      return state.signedInStatus;
-    },
-    currentUser(state) {
-      return state.currentUser;
-    },
-    authHeaders(state) {
-      return state.authHeaders;
-    }
-  },
-  plugins: [createPersistedState({storage: window.sessionStorage})]
-});

data/spec/rails_app/app/views/spa/index.html.erb

@@ -1 +0,0 @@
-<%= content_for(:javascript_pack_tag, javascript_pack_tag('spa', 'data-turbolinks-track': 'reload')) %>