273 lines
7.0 KiB
Vue
273 lines
7.0 KiB
Vue
<style lang="scss">
|
|
|
|
@keyframes scale-up{
|
|
0%{ transform: scale(0); }
|
|
100%{ transform: scale(1); }
|
|
}
|
|
|
|
.minipopup{
|
|
display: block;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: calc( 100% - 2*1em );
|
|
height: auto;
|
|
|
|
margin: .7em 1em;
|
|
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 10 0 rgba(0,0,0,.5);
|
|
|
|
background-color: #ffffff;
|
|
|
|
will-change: transform;
|
|
transform-origin: 100% 0;
|
|
|
|
animation: scale-up .3s ease-in-out;
|
|
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
z-index: 100;
|
|
|
|
& > span{
|
|
|
|
display: block;
|
|
position: relative;
|
|
|
|
padding: .7em 1em;
|
|
padding-left: 3em;
|
|
|
|
background-color: #fff;
|
|
background: url('/asset/svg/minipopup.invite.svg') left 1em center no-repeat;
|
|
background-size: auto 45%;
|
|
|
|
color: #99aab5;
|
|
font-size: .85em;
|
|
letter-spacing: .05em;
|
|
white-space: nowrap;
|
|
|
|
cursor: pointer;
|
|
|
|
transition: background-color .2s ease-in-out,
|
|
color .2s ease-in-out;
|
|
|
|
|
|
&[data-icon='create']{ background-image: url('/asset/svg/minipopup.create.svg'); }
|
|
&[data-icon='category']{ background-image: url('/asset/svg/minipopup.category.svg'); }
|
|
&[data-icon='edit']{ background-image: url('/asset/svg/minipopup.edit.svg'); }
|
|
&[data-icon='remove']{ background-image: url('/asset/svg/minipopup.remove.svg'); }
|
|
&[data-icon='remove']{ background-image: url('/asset/svg/minipopup.remove.svg'); }
|
|
&[data-icon='logout']{ background-image: url('/asset/svg/minipopup.logout.svg'); }
|
|
&[data-icon='leave']{ background-image: url('/asset/svg/minipopup.leave.svg'); }
|
|
&[data-icon='password']{ background-image: url('/asset/svg/minipopup.password.svg'); }
|
|
|
|
&:hover{ background-color: #f9f9f9; color: #737f8d; }
|
|
|
|
/* separators */
|
|
/*after*/ &.sa{ border-bottom: 1px solid #f3f3f3; }
|
|
/*before*/ &.sb{ border-top: 1px solid #f3f3f3; }
|
|
|
|
&.special{
|
|
color: #7289da;
|
|
|
|
&:hover{ color: #677bc4; }
|
|
}
|
|
|
|
&.invalid{ color: #e65835; }
|
|
|
|
&.invalid-h:hover{ color: #e65835; }
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
</style>
|
|
<template>
|
|
|
|
|
|
|
|
<div class='dialog'>
|
|
|
|
|
|
<div class='header' @click='minipop = !minipop' :data-open='minipop?1:0'>
|
|
<div class='title'>{{ gs.content.cbuf.label }}</div>
|
|
</div>
|
|
|
|
<div class='body'>
|
|
|
|
<div v-show='minipop' class='minipopup'>
|
|
<span class='special sa' @click='gs.popup.show(`channel.invite`); minipop=false'>Invite people</span>
|
|
<span data-icon='create' @click='gs.popup.show(`channel.create`); minipop=false'>Create channel</span>
|
|
<span class ='invalid-h' data-icon='remove' @click='gs.popup.show(`channel.remove`); minipop=false'>Remove channel</span>
|
|
<span data-icon='category' @click='gs.popup.show(`room.create`); minipop=false'>Create room</span>
|
|
<span data-icon='edit' @click='gs.popup.show(`username.change`); minipop=false'>Change nickname</span>
|
|
<span data-icon='password' @click='gs.popup.show(`password.change`); minipop=false'>Change password</span>
|
|
<span class='sb invalid-h' data-icon='leave' @click='gs.popup.show(`channel.leave`); minipop=false'>Leave channel</span>
|
|
<span class='sb invalid' data-icon='logout' @click='gs.auth.token=null; gs.refresh()'>Logout</span>
|
|
</div>
|
|
|
|
<div v-for='(rooms, type) in gs.room' v-if='type[0] != `_`'>
|
|
<div class='toggle'
|
|
:data-toggle='rooms.visible?1:0'
|
|
@click='rooms.visible=!rooms.visible'>
|
|
{{ type }} <span>rooms</span>
|
|
</div>
|
|
<div class='add' @click='gs.popup.show(`room.create`)' data-title='Create channel'></div>
|
|
<ul>
|
|
<li v-for='r in rooms.list'
|
|
:class='rooms.current==r.id?`active`:``'
|
|
:data-type='r.type'
|
|
@click='gs.room.nav(r.type, r.id)'>{{ r.name }}
|
|
<span class='rem' @click="gs.popup.show('room.remove'); gs.popup.get('room.remove').data=r"></span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
<div class='footer' :data-connected='gs.audio_conn'>
|
|
|
|
<canvas ref='audio_canvas' width='1000' height='1000'></canvas>
|
|
|
|
<div class='text-container'>
|
|
|
|
<!-- Audio connection status -->
|
|
<div class='status'>{{ gs.audio_conn === 0
|
|
? `Connecting...`
|
|
: ( gs.audio_conn === 1
|
|
? `Listening`
|
|
: `Voice Connected` ) }}</div>
|
|
|
|
<!-- Current room/user -->
|
|
<div class='room'>{{ gs.room.get('text') ? gs.room.get('text').name : '?' }} / {{ gs.auth.user.username }}</div>
|
|
|
|
</div>
|
|
|
|
<!-- Logout from current audio room -->
|
|
<div class='audio-close' @click='gs.room.nav(`voice`, null)'></div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</template><script>
|
|
export default {
|
|
|
|
name: 'dialog-',
|
|
|
|
data(){ return {
|
|
gs: gs.get,
|
|
minipop: false
|
|
}; },
|
|
|
|
methods: {
|
|
|
|
/* (1) Draw WAVE on canvas from a buffer
|
|
*
|
|
* @buffer<Uint8Array> Data buffer
|
|
*
|
|
---------------------------------------------------------*/
|
|
draw_wave(buffer=[]){
|
|
|
|
/* (0) Exit if empty buffer */
|
|
if( !(buffer instanceof Uint8Array) || buffer.length <= 0 )
|
|
return;
|
|
|
|
/* (1) Get <canvas> context + shortcuts */
|
|
let can = this.$refs.audio_canvas;
|
|
let ctx = can.getContext('2d', { antialias: false, depth: false });
|
|
|
|
/* (2) Adjust dimensions */
|
|
can.width = buffer.length;
|
|
can.height = 256;
|
|
let precision = 1; // bigger -> less precise
|
|
|
|
/* (3) Erase previous drawing */
|
|
ctx.clearRect(0, 0, can.width, can.height);
|
|
|
|
/* (4) Begin tracing */
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, can.height-buffer[0]);
|
|
|
|
/* (5) Trace through each value */
|
|
for( let i = precision ; i < buffer.length ; i+=precision )
|
|
ctx.lineTo(i, can.height-buffer[i]);
|
|
|
|
/* (6) End tracing */
|
|
ctx.lineWidth = 7;
|
|
ctx.strokeStyle = '#44484f';
|
|
ctx.stroke();
|
|
|
|
},
|
|
|
|
|
|
|
|
/* (1) Draw FREQ on canvas from a buffer
|
|
*
|
|
* @buffer<Uint8Array> Data buffer
|
|
*
|
|
---------------------------------------------------------*/
|
|
draw_freq(buffer=[]){
|
|
|
|
/* (0) Exit if empty buffer */
|
|
if( !(buffer instanceof Uint8Array) || buffer.length <= 0 )
|
|
return;
|
|
|
|
/* (1) Get <canvas> context + shortcuts */
|
|
let can = this.$refs.audio_canvas;
|
|
let ctx = can.getContext('2d', { antialias: false, depth: false });
|
|
|
|
/* (2) Adjust dimensions */
|
|
can.width = buffer.length;
|
|
can.height = 256;
|
|
let precision = 5; // bigger -> less precise
|
|
|
|
/* (3) Erase previous drawing */
|
|
ctx.clearRect(0, 0, can.width, can.height);
|
|
|
|
/* (4) Begin tracing */
|
|
ctx.beginPath();
|
|
ctx.moveTo(0, can.height-128-buffer[0]/2);
|
|
|
|
/* (5) Trace through each value */
|
|
for( let i = precision ; i < buffer.length ; i+=precision )
|
|
ctx.lineTo(i, can.height-128-buffer[i]/2);
|
|
|
|
/* (6) End tracing */
|
|
ctx.lineWidth = 7;
|
|
ctx.strokeStyle = '#44484f';
|
|
ctx.stroke();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
mounted(){
|
|
|
|
/* (1) By default DRAW FREQUENCY */
|
|
this.gs.audioManager.freq_drawer = this.draw_freq;
|
|
|
|
/* (2) Create toggle method */
|
|
this.gs.toggleDrawStyle = function(){
|
|
|
|
// currently WAVE
|
|
if( this.gs.audioManager.wave_drawer instanceof Function ){
|
|
this.gs.audioManager.wave_drawer = null;
|
|
this.gs.audioManager.freq_drawer = this.draw_freq;
|
|
}else{
|
|
this.gs.audioManager.wave_drawer = this.draw_wave;
|
|
this.gs.audioManager.freq_drawer = null;
|
|
}
|
|
}.bind(this);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script> |