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" <VideoFeed v-show="webcam.active" :local-video="true" :username="username"
:popped-out="WebRTC.poppedOut[username]" :is-explicit="webcam.nsfw" :is-muted="webcam.muted" :popped-out="WebRTC.poppedOut[username]" :is-explicit="webcam.nsfw" :is-muted="webcam.muted"
:is-source-muted="webcam.muted" @mute-video="muteMe()" @popout="popoutVideo" :is-source-muted="webcam.muted" @mute-video="muteMe()" @popout="popoutVideo"
@open-profile="showProfileModal"
@set-volume="setVideoVolume"> @set-volume="setVideoVolume">
</VideoFeed> </VideoFeed>
@ -4219,7 +4220,8 @@ export default {
:is-source-muted="isSourceMuted(username)" :is-muted="isMuted(username)" :is-source-muted="isSourceMuted(username)" :is-muted="isMuted(username)"
:is-watching-me="isWatchingMe(username)" :is-frozen="WebRTC.frozenStreamDetected[username]" :is-watching-me="isWatchingMe(username)" :is-frozen="WebRTC.frozenStreamDetected[username]"
@reopen-video="openVideoByUsername" @mute-video="muteVideo" @popout="popoutVideo" @reopen-video="openVideoByUsername" @mute-video="muteVideo" @popout="popoutVideo"
@close-video="expresslyCloseVideo" @set-volume="setVideoVolume"> @close-video="expresslyCloseVideo" @set-volume="setVideoVolume"
@open-profile="showProfileModal">
</VideoFeed> </VideoFeed>
<!-- Debugging - copy a lot of these to simulate more videos --> <!-- 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"> <div v-if="user.username !== username" class="mt-4">
<!-- DMs button --> <!-- DMs button -->
<button type="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()" @click="openDMs()"
:title="isDnd ? 'This person is not accepting new DMs' : 'Open a Direct Message (DM) thread'" :title="isDnd ? 'This person is not accepting new DMs' : 'Open a Direct Message (DM) thread'"
:disabled="isDnd"> :disabled="isDnd">
@ -202,7 +202,7 @@ export default {
<!-- Mute button --> <!-- Mute button -->
<button type="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"> @click="muteUser()" title="Mute user">
<i class="fa fa-comment-slash mr-1" :class="{ <i class="fa fa-comment-slash mr-1" :class="{
'has-text-success': isMuted, 'has-text-success': isMuted,
@ -213,7 +213,7 @@ export default {
<!-- Boot button --> <!-- Boot button -->
<button type="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"> @click="bootUser()" title="Boot user off your webcam">
<i class="fa fa-user-xmark mr-1" :class="{ <i class="fa fa-user-xmark mr-1" :class="{
'has-text-danger': !isBooted, 'has-text-danger': !isBooted,

14
src/components/VideoFeed.vue
View File

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