forked from Albatross/projectx
Compare commits
3 Commits
backend-ap
...
master
| Author | SHA1 | Date |
|---|---|---|
 Özcan Oğuz
|
6373ac00b6 | 4 years ago |
 Mustafa Yontar
|
47ebbeddc6 | 5 years ago |
 Tuğrul Gençoğlu
|
fad85d6021 | 5 years ago |
@ -1,7 +1,97 @@ |
|||||||
<template> |
<template> |
||||||
<v-app> |
<v-app> |
||||||
<v-content> |
<v-app-bar |
||||||
<router-view></router-view> |
app |
||||||
</v-content></v-app> |
color="#ab0000" |
||||||
|
dark |
||||||
|
> |
||||||
|
<v-toolbar-title>Albatross</v-toolbar-title> |
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn icon> |
||||||
|
<v-icon>mdi-help</v-icon> |
||||||
|
</v-btn> |
||||||
|
</v-app-bar> |
||||||
|
<v-container |
||||||
|
class="fill-height" |
||||||
|
fluid |
||||||
|
> |
||||||
|
<v-row |
||||||
|
align="center" |
||||||
|
justify="center" |
||||||
|
v-if="!start" |
||||||
|
> |
||||||
|
<v-col |
||||||
|
cols="12" |
||||||
|
sm="8" |
||||||
|
md="4" |
||||||
|
> |
||||||
|
<v-card class="elevation-12" > |
||||||
|
<v-toolbar |
||||||
|
color="#ab0000" |
||||||
|
dark |
||||||
|
flat |
||||||
|
> |
||||||
|
<v-toolbar-title>Login</v-toolbar-title> |
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-tooltip bottom> |
||||||
|
<span>Source</span> |
||||||
|
</v-tooltip> |
||||||
|
</v-toolbar> |
||||||
|
<v-card-text> |
||||||
|
<v-form> |
||||||
|
<v-text-field v-if="!start" v-model="username" label="Please enter your name"></v-text-field> |
||||||
|
</v-form> |
||||||
|
</v-card-text> |
||||||
|
<v-card-actions> |
||||||
|
<v-spacer></v-spacer> |
||||||
|
<v-btn color="#ab0000" v-if="!start" @click="startM">Start</v-btn> |
||||||
|
</v-card-actions> |
||||||
|
</v-card> |
||||||
|
</v-col> |
||||||
|
</v-row> |
||||||
|
<VueJanus v-if="start" server="https://vid.w3ic.org/janus" :room="room" :username="username"/> |
||||||
|
|
||||||
|
</v-container> |
||||||
|
<v-footer |
||||||
|
color="#ffffff" |
||||||
|
app |
||||||
|
> |
||||||
|
<v-col |
||||||
|
class="text-center" |
||||||
|
cols="12" |
||||||
|
> |
||||||
|
<strong>Özgür Yazılım Derneği</strong> |
||||||
|
</v-col> |
||||||
|
</v-footer> |
||||||
|
</v-app> |
||||||
</template> |
</template> |
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<script> |
||||||
|
import VueJanus from "@/lib/VueJanus"; |
||||||
|
|
||||||
|
export default { |
||||||
|
name: 'App', |
||||||
|
|
||||||
|
components: { |
||||||
|
VueJanus |
||||||
|
}, |
||||||
|
|
||||||
|
data: () => ({ |
||||||
|
test: ' ', |
||||||
|
room:1234, |
||||||
|
username: '', |
||||||
|
start:false |
||||||
|
}), |
||||||
|
mounted () { |
||||||
|
}, |
||||||
|
methods: { |
||||||
|
startM () { |
||||||
|
if (this.username) { |
||||||
|
this.start = true |
||||||
|
} |
||||||
|
} |
||||||
|
} |
||||||
|
}; |
||||||
|
</script> |
||||||
|
|||||||
@ -1,34 +0,0 @@ |
|||||||
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 |
|
||||||
@ -1,17 +0,0 @@ |
|||||||
import Vue from 'vue' |
|
||||||
import Vuex from 'vuex' |
|
||||||
|
|
||||||
Vue.use(Vuex) |
|
||||||
|
|
||||||
export default new Vuex.Store({ |
|
||||||
state: { |
|
||||||
token: null, |
|
||||||
name: 'None' |
|
||||||
}, |
|
||||||
mutations: { |
|
||||||
}, |
|
||||||
actions: { |
|
||||||
}, |
|
||||||
modules: { |
|
||||||
} |
|
||||||
}) |
|
||||||
@ -1,19 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,83 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,59 +0,0 @@ |
|||||||
<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> |
|
||||||
@ -1,51 +0,0 @@ |
|||||||
<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