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

Video z-index workaround for Safari

Browse Source 
When the Safari browser puts a webcam video full-screen and then
returns, the z-index of the video was higher than the buttons and
controls normally overlaid on top of it.

Add a z-index:1 to the video controls to keep them on top after
returning from full screen. Similar: for popped-out draggable videos,
adding a z-index:1 allows the video to correctly sit on top of docked
videos without the docked video controls (zi:1) rendering above the
popped-out video when you overlap them.

Note: the z-index:1 is applied to popped-out and video controls, any
other combination (e.g. 1 for popped-out and 2 for controls) caused
controls of docked videos to render on top of popped-out ones when they
overlapped.
This commit is contained in:
Noah 2024-06-12 22:49:30 -07:00
parent b011e36ddf
commit 147315fee2
3 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pkg/handlers.go
View File

@ -593,7 +593,7 @@ func (s *Server) OnMute(sub *Subscriber, msg messages.Message, mute bool) {
// OnBlock is a user placing a hard block (hide from) another user. // OnBlock is a user placing a hard block (hide from) another user.
func (s *Server) OnBlock(sub *Subscriber, msg messages.Message) { func (s *Server) OnBlock(sub *Subscriber, msg messages.Message) {
log.Info("%s blocks %s: %v", sub.Username, msg.Username) log.Info("%s blocks %s", sub.Username, msg.Username)
// If the subject of the block is an admin, return an error. // If the subject of the block is an admin, return an error.
if other, err := s.GetSubscriber(msg.Username); err == nil && other.IsAdmin() { if other, err := s.GetSubscriber(msg.Username); err == nil && other.IsAdmin() {

17
pkg/messages/messages_test.go
View File

@ -38,12 +38,6 @@ func (f flags) Check(video int) error {
return errors.New("Muted expected NOT to be set") return errors.New("Muted expected NOT to be set")
} }
if video&messages.VideoFlagIsTalking == messages.VideoFlagIsTalking && !f.IsTalking {
return errors.New("IsTalking expected to be set")
} else if video&messages.VideoFlagIsTalking != messages.VideoFlagIsTalking && f.IsTalking {
return errors.New("IsTalking expected NOT to be set")
}
if video&messages.VideoFlagMutualRequired == messages.VideoFlagMutualRequired && !f.MutualRequired { if video&messages.VideoFlagMutualRequired == messages.VideoFlagMutualRequired && !f.MutualRequired {
return errors.New("MutualRequired expected to be set") return errors.New("MutualRequired expected to be set")
} else if video&messages.VideoFlagMutualRequired != messages.VideoFlagMutualRequired && f.MutualRequired { } else if video&messages.VideoFlagMutualRequired != messages.VideoFlagMutualRequired && f.MutualRequired {
@ -217,14 +211,13 @@ func TestVideoFlagMutation(t *testing.T) {
}, },
{ {
Mutate: func(v int) int { Mutate: func(v int) int {
return v | messages.VideoFlagOnlyVIP | messages.VideoFlagNSFW | messages.VideoFlagIsTalking return v | messages.VideoFlagOnlyVIP | messages.VideoFlagNSFW
}, },
Expect: flags{ Expect: flags{
Active: true, Active: true,
Muted: true, Muted: true,
OnlyVIP: true, OnlyVIP: true,
NSFW: true, NSFW: true,
IsTalking: true,
}, },
}, },
} }

4
public/static/css/chat.css
View File

@ -250,6 +250,7 @@ div.feed.popped-out {
top: 0; top: 0;
left: 0; left: 0;
resize: none; resize: none;
z-index: 1; /* work around Safari video being on top when return from fullscreen */
} }
.video-feeds.x1 > .feed { .video-feeds.x1 > .feed {
@ -285,12 +286,14 @@ div.feed.popped-out {
position: absolute; position: absolute;
left: 4px; left: 4px;
bottom: 4px; bottom: 4px;
z-index: 1; /* work around Safari video being on top when return from fullscreen */
} }
.feed > .close { .feed > .close {
position: absolute; position: absolute;
right: 4px; right: 4px;
top: 0; top: 0;
z-index: 1; /* work around Safari video being on top when return from fullscreen */
} }
.feed > .caption { .feed > .caption {
@ -301,6 +304,7 @@ div.feed.popped-out {
left: 4px; left: 4px;
font-size: small; font-size: small;
padding: 2px 4px; padding: 2px 4px;
z-index: 1; /* work around Safari video being on top when return from fullscreen */
} }
/* YouTube embeds */ /* YouTube embeds */