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