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

Click names in video feeds to open their profile card

Browse Source
This commit is contained in:
Noah 2024-04-09 17:57:37 -07:00
parent 9932cb5a2c
commit d510ac791f
3 changed files with 15 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.vue
View File

@ -4210,6 +4210,7 @@ export default {
<VideoFeed v-show="webcam.active" :local-video="true" :username="username"
:popped-out="WebRTC.poppedOut[username]" :is-explicit="webcam.nsfw" :is-muted="webcam.muted"
:is-source-muted="webcam.muted" @mute-video="muteMe()" @popout="popoutVideo"
@open-profile="showProfileModal"
@set-volume="setVideoVolume">
</VideoFeed>
@ -4219,7 +4220,8 @@ export default {
:is-source-muted="isSourceMuted(username)" :is-muted="isMuted(username)"
:is-watching-me="isWatchingMe(username)" :is-frozen="WebRTC.frozenStreamDetected[username]"
@reopen-video="openVideoByUsername" @mute-video="muteVideo" @popout="popoutVideo"
@close-video="expresslyCloseVideo" @set-volume="setVideoVolume">
@close-video="expresslyCloseVideo" @set-volume="setVideoVolume"
@open-profile="showProfileModal">
</VideoFeed>
<!-- Debugging - copy a lot of these to simulate more videos -->

6
src/components/ProfileModal.vue
View File

@ -192,7 +192,7 @@ export default {
<div v-if="user.username !== username" class="mt-4">
<!-- DMs button -->
<button type="button"
class="button is-dark is-outlined is-small px-2 mb-1"
class="button is-small px-2 mb-1"
@click="openDMs()"
:title="isDnd ? 'This person is not accepting new DMs' : 'Open a Direct Message (DM) thread'"
:disabled="isDnd">
@ -202,7 +202,7 @@ export default {
<!-- Mute button -->
<button type="button"
class="button is-dark is-outlined is-small px-2 ml-1 mb-1"
class="button is-small px-2 ml-1 mb-1"
@click="muteUser()" title="Mute user">
<i class="fa fa-comment-slash mr-1" :class="{
'has-text-success': isMuted,
@ -213,7 +213,7 @@ export default {
<!-- Boot button -->
<button type="button"
class="button is-dark is-outlined is-small px-2 ml-1 mb-1"
class="button is-small px-2 ml-1 mb-1"
@click="bootUser()" title="Boot user off your webcam">
<i class="fa fa-user-xmark mr-1" :class="{
'has-text-danger': !isBooted,

14
src/components/VideoFeed.vue
View File

@ -31,6 +31,9 @@ export default {
videoID() {
return this.localVideo ? 'localVideo' : `videofeed-${this.username}`;
},
textColorClass() {
return this.isExplicit ? 'has-text-camera-red' : 'has-text-camera-blue';
},
},
methods: {
closeVideo() {
@ -44,6 +47,10 @@ export default {
this.$emit('reopen-video', this.username, true);
},
openProfile() {
this.$emit('open-profile', this.username);
},
// Toggle the Mute button
muteVideo() {
this.$emit('mute-video', this.username);
@ -84,12 +91,9 @@ export default {
<video class="feed" :id="videoID" autoplay :muted="localVideo"></video>
<!-- Caption -->
<div class="caption" :class="{
'has-text-camera-blue': !isExplicit,
'has-text-camera-red': isExplicit,
}">
<div class="caption" :class="textColorClass">
<i class="fa fa-microphone-slash mr-1 has-text-grey" v-if="isSourceMuted"></i>
{{ username }}
<a href="#" @click.prevent="openProfile" :class="textColorClass">{{ username }}</a>
<i class="fa fa-people-arrows ml-1 has-text-grey is-size-7" :title="username + ' is watching your camera too'"
v-if="isWatchingMe"></i>