projectx/src/views/RoomView.vue

<template>
<div fill-height class="fill-height">
    <v-dialog
            v-model="dialog"
            max-width="290"
    >
        <v-card>
            <v-card-title class="headline">
                What's your name ?
            </v-card-title>
            <v-card-text>
                <v-text-field label="Name" v-model="name"></v-text-field>
            </v-card-text>
            <v-card-actions>
                <v-btn @click="dialog=false" text>Cancel</v-btn>
                <v-spacer></v-spacer>
                <v-btn @click="getRoom" color="primary" text>Enter Room</v-btn>
            </v-card-actions>
        </v-card>

    </v-dialog>
    <VueJanus @kick="kick" v-if="rid" :creator="creator" :room="rid" server="wss://vid.w3ic.org/ws/janus/" :username="name"></VueJanus>
</div>
</template>

<script>
    import VueJanus from "@/lib/VueJanus";
    export default {
        name: "RoomView",
        components: {VueJanus},
        data: () => ({
           rid:'',
           name:'',
           dialog:false,
            creator:false
        }),
        mounted () {
            if (!name) this.dialog = true
        },
        methods: {
            kick (user) {
                this.$axios.get(`kick/${this.$route.params.id}/${user}`).then(response => {
                    console.log(response)
                })
            },
            getRoom () {
                this.dialog = false
                this.$axios.get(`room/${this.$route.params.id}`).then(response => {
                    this.rid = response.data.rid
                    this.creator = response.data.can_modify
                })
            }
        }
    }
</script>

<style scoped>

</style>