apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Semitransparent video icons until mouseover

Browse Source
This commit is contained in:
Noah 2024-09-12 18:55:45 -07:00
parent 9b8e7dc440
commit 7f88439c84
1 changed files with 12 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/VideoFeed.vue
View File

@ -103,7 +103,7 @@ export default {
</div> </div>
<!-- Close button (others' videos only) --> <!-- Close button (others' videos only) -->
<div class="close" v-if="!localVideo"> <div class="close" v-if="!localVideo" :class="{'seethru': !mouseOver}">
<a href="#" class="button is-small is-danger is-outlined px-2" title="Close video" @click.prevent="closeVideo()"> <a href="#" class="button is-small is-danger is-outlined px-2" title="Close video" @click.prevent="closeVideo()">
<i class="fa fa-close"></i> <i class="fa fa-close"></i>
</a> </a>
@ -113,13 +113,16 @@ export default {
<div class="controls"> <div class="controls">
<!-- Mute Button --> <!-- Mute Button -->
<button type="button" v-if="!isMuted" class="button is-small is-success is-outlined ml-1 px-2" <button type="button" v-if="!isMuted" class="button is-small is-success is-outlined ml-1 px-2"
:class="{'seethru': !mouseOver}"
@click="muteVideo()"> @click="muteVideo()">
<i class="fa" :class="{ <i class="fa" :class="{
'fa-microphone': localVideo, 'fa-microphone': localVideo,
'fa-volume-high': !localVideo 'fa-volume-high': !localVideo
}"></i> }"></i>
</button> </button>
<button type="button" v-else class="button is-small is-danger ml-1 px-2" @click="muteVideo()"> <button type="button" v-else class="button is-small is-danger ml-1 px-2"
:class="{'seethru': !mouseOver}"
@click="muteVideo()">
<i class="fa" :class="{ <i class="fa" :class="{
'fa-microphone-slash': localVideo, 'fa-microphone-slash': localVideo,
'fa-volume-xmark': !localVideo 'fa-volume-xmark': !localVideo
@ -128,12 +131,14 @@ export default {
<!-- Pop-out Video --> <!-- Pop-out Video -->
<button type="button" class="button is-small is-light is-outlined p-2 ml-2" title="Pop out" <button type="button" class="button is-small is-light is-outlined p-2 ml-2" title="Pop out"
:class="{'seethru': !mouseOver}"
@click="popoutVideo()"> @click="popoutVideo()">
<i class="fa fa-up-right-from-square"></i> <i class="fa fa-up-right-from-square"></i>
</button> </button>
<!-- Full screen --> <!-- Full screen -->
<button type="button" class="button is-small is-light is-outlined p-2 ml-2" title="Go full screen" <button type="button" class="button is-small is-light is-outlined p-2 ml-2" title="Go full screen"
:class="{'seethru': !mouseOver}"
@click="fullscreen()"> @click="fullscreen()">
<i class="fa fa-expand"></i> <i class="fa fa-expand"></i>
</button> </button>
@ -163,4 +168,9 @@ video {
background-position: center center; background-position: center center;
background-repeat: no-repeat; background-repeat: no-repeat;
} }
/* Translucent controls until mouse over */
.seethru {
opacity: 0.4;
}
</style> </style>