forked from Albatross/projectx
Compare commits
4 Commits
master
...
backend-ap
| Author | SHA1 | Date |
|---|---|---|
 Mustafa Yontar
|
eb68c1e5c9 | 5 years ago |
|
Mustafa Yontar
|
4bff32dabb | 5 years ago |
|
Mustafa Yontar
|
71e39389b8 | 5 years ago |
|
Mustafa Yontar
|
9baa128cad | 5 years ago |
@ -0,0 +1,34 @@ |
||||
import Vue from 'vue' |
||||
import VueRouter from 'vue-router' |
||||
|
||||
Vue.use(VueRouter) |
||||
|
||||
const routes = [ |
||||
{ |
||||
path: '/login', |
||||
name: 'login', |
||||
component: () => import(/* webpackChunkName: "login" */ '../views/login.vue') |
||||
}, { |
||||
path: '/', |
||||
name: 'Home', |
||||
component: () => import(/* webpackChunkName: "Home" */ '../views/Home.vue') |
||||
}, |
||||
{ |
||||
path: '/rooms', |
||||
name: 'Room', |
||||
component: () => import(/* webpackChunkName: "Room" */ '../views/Room.vue') |
||||
}, |
||||
{ |
||||
path: '/room/:id', |
||||
name: 'RoomView', |
||||
component: () => import(/* webpackChunkName: "RoomView" */ '../views/RoomView.vue') |
||||
} |
||||
] |
||||
|
||||
const router = new VueRouter({ |
||||
mode: 'history', |
||||
base: process.env.BASE_URL, |
||||
routes |
||||
}) |
||||
|
||||
export default router |
||||
@ -0,0 +1,17 @@ |
||||
import Vue from 'vue' |
||||
import Vuex from 'vuex' |
||||
|
||||
Vue.use(Vuex) |
||||
|
||||
export default new Vuex.Store({ |
||||
state: { |
||||
token: null, |
||||
name: 'None' |
||||
}, |
||||
mutations: { |
||||
}, |
||||
actions: { |
||||
}, |
||||
modules: { |
||||
} |
||||
}) |
||||
@ -0,0 +1,19 @@ |
||||
<template> |
||||
<v-container> |
||||
<v-text-field v-model="room" label="Enter Room Name"></v-text-field> <v-btn @click="$router.push('/room/' + this.room)">Enter Room</v-btn><br /> |
||||
<v-btn x-small @click="$router.push('/login')" text>login with user</v-btn> |
||||
</v-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "Home", |
||||
data: () => ({ |
||||
room: null |
||||
}) |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,83 @@ |
||||
<template> |
||||
<v-container> |
||||
<v-dialog |
||||
v-model="createDialog" |
||||
max-width="290" |
||||
> |
||||
<v-card> |
||||
<v-card-title> |
||||
<v-row> |
||||
<v-col cols="12"><v-text-field v-model="roomCreate.room_name" placeholder="name"></v-text-field></v-col> |
||||
<v-col cols="12"><v-text-field v-model="roomCreate.publisher_count" placeholder="Room Publisher Count"></v-text-field></v-col> |
||||
<v-col cols="12"><v-select label="Video Codec" v-model="roomCreate.video_codec" :items="vcodecs"></v-select></v-col> |
||||
<v-col cols="12"><v-select label="Audio Codec" v-model="roomCreate.audio_codec" :items="acodecs"></v-select></v-col> |
||||
</v-row> |
||||
</v-card-title> |
||||
<v-card-actions> |
||||
<v-btn @click="createDialog=false">Cancel</v-btn> |
||||
<v-spacer></v-spacer> |
||||
<v-btn @click="saveRoom">Create</v-btn> |
||||
</v-card-actions> |
||||
</v-card> |
||||
</v-dialog> |
||||
<v-btn v-if="canCreate" @click="createDialog=true">Create Room</v-btn> |
||||
<v-row> |
||||
<v-col v-for="room in rooms" :key="room.id" cols="12"> |
||||
<v-btn @click="joinRoom(room.ridn)" text>{{ room.room_name }}</v-btn> |
||||
</v-col> |
||||
</v-row> |
||||
</v-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: "Room", |
||||
data: () => ({ |
||||
rooms: [], |
||||
canCreate: false, |
||||
createDialog: false, |
||||
vcodecs: ['VP8','VP9','h264'], |
||||
acodecs: ['OPUS'], |
||||
roomCreate: { |
||||
video_codec: 'VP9', |
||||
audio_codec: 'OPUS', |
||||
publisher_count: 16, |
||||
room_name: '' |
||||
} |
||||
}), |
||||
mounted () { |
||||
this.getRooms() |
||||
}, |
||||
methods: { |
||||
saveRoom () { |
||||
this.$axios.post('create/room',this.roomCreate).then(response => { |
||||
this.roomCreate ={ |
||||
video_codec: 'VP9', |
||||
audio_codec: 'OPUS', |
||||
publisher_count: 16, |
||||
room_name: '' |
||||
} |
||||
this.getRooms() |
||||
this.createDialog = false |
||||
console.log(response) |
||||
}) |
||||
}, |
||||
joinRoom (id) { |
||||
this.$router.push('/room/' + id) |
||||
}, |
||||
getRooms() { |
||||
this.$axios.get('rooms').then(response => { |
||||
console.log(response) |
||||
this.rooms = response.data.rooms |
||||
this.canCreate = response.data.can_create |
||||
}).catch(() => { |
||||
this.$router.push('/') |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
@ -0,0 +1,59 @@ |
||||
<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> |
||||
@ -0,0 +1,51 @@ |
||||
<template> |
||||
<v-container> |
||||
<v-row> |
||||
<v-col cols="12" md="12" sm="12" v-if="error"> |
||||
<v-alert type="error">{{error}}</v-alert> |
||||
</v-col> |
||||
<v-col cols="12" md="6" sm="12"> |
||||
<v-text-field placeholder="Name/Nickname" v-model="name"></v-text-field> |
||||
</v-col> |
||||
<v-col cols="12" md="6" sm="12"> |
||||
<v-text-field placeholder="Code" v-model="code"></v-text-field> |
||||
</v-col> |
||||
<v-col cols="12" md="12" sm="12"> |
||||
<v-text-field v-if="passwd" v-model="password" placeholder="Password" type="password"></v-text-field> |
||||
|
||||
</v-col> |
||||
<v-col cols="12" md="6" sm="12"><v-btn @click="passwd=!passwd" text>Password Login</v-btn></v-col> |
||||
<v-col cols="12" md="6" sm="12"> |
||||
<v-btn @click="login">Login</v-btn> |
||||
</v-col> |
||||
</v-row> |
||||
</v-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'Home', |
||||
data:() => ({ |
||||
passwd: false, |
||||
name:'', |
||||
code:'', |
||||
error:'', |
||||
password:'' |
||||
}), |
||||
methods: { |
||||
login () { |
||||
this.$axios.post('login', { |
||||
username: this.code, |
||||
password: this.password |
||||
}).then(response => { |
||||
this.$store.state.token = response.data.access_token |
||||
this.$axios.defaults.headers.common['Authorization'] = "Bearer " + response.data.access_token |
||||
this.$store.state.name = this.name |
||||
this.$router.push('/rooms') |
||||
}).catch((resp) => { |
||||
this.error = resp.response.data.msg |
||||
}) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
Loading…
Reference in new issue