Skip to content

Live web client [Loading spinner update ✿ | Enable audio (if available) on first user action] #53

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Live web client [Loading spinner update ✿ | Enable audio (if available) on first user action] #53

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion images/chromium-headful/client/public/browserconfig.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
<msapplication>
<tile>
<square150x150logo src="/mstile-150x150.png"/>
<TileColor>#19bd9c</TileColor>
<TileColor>#7B42F6</TileColor>
</tile>
</msapplication>
</browserconfig>
6 changes: 3 additions & 3 deletions images/chromium-headful/client/public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#19bd9c">
<meta name="msapplication-TileColor" content="#19bd9c">
<meta name="theme-color" content="#19bd9c">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#7B42F6">
<meta name="msapplication-TileColor" content="#7B42F6">
<meta name="theme-color" content="#7B42F6">
<style> /* weird iOS bug, if this is not set right here, video just does not start */ .video-container { width: 100%; height: 100%; } </style>
</head>
<body>
Expand Down
4 changes: 4 additions & 0 deletions images/chromium-headful/client/public/kernel.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions images/chromium-headful/client/public/site.webmanifest
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
"type": "image/png"
}
],
"theme_color": "#19bd9c",
"background_color": "#19bd9c",
"theme_color": "#7B42F6",
"background_color": "#7B42F6",
"display": "standalone"
}
3 changes: 1 addition & 2 deletions images/chromium-headful/client/src/assets/styles/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,9 @@ $background-modifier-accent: hsla(0, 0%, 100%, 0.06);
$elevation-low: 0 1px 0 rgba(4, 4, 5, 0.2), 0 1.5px 0 rgba(6, 6, 7, 0.05), 0 2px 0 rgba(4, 4, 5, 0.05);
$elevation-high: 0 8px 16px rgba(0, 0, 0, 0.24);

$style-primary: #19bd9c;
$style-primary: #7B42F6;
$style-error: #d32f2f;

$menu-height: 40px;
$controls-height: 125px;
$side-width: 400px;

38 changes: 11 additions & 27 deletions images/chromium-headful/client/src/components/connect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@
</button>
</form>
<div class="loader" v-if="connecting">
<div class="bounce1"></div>
<div class="bounce2"></div>
<img src="/kernel.svg" class="spinning-logo" alt="Loading..." />
</div>
</div>
</div>
Expand Down Expand Up @@ -103,40 +102,25 @@
.loader {
width: 90px;
height: 90px;
position: relative;
margin: 0 auto;
display: flex;
justify-content: center;
align-items: center;

.bounce1,
.bounce2 {
.spinning-logo {
width: 100%;
height: 100%;
border-radius: 50%;
background-color: $style-primary;
opacity: 0.6;
position: absolute;
top: 0;
left: 0;

-webkit-animation: bounce 2s infinite ease-in-out;
animation: bounce 2s infinite ease-in-out;
}

.bounce2 {
-webkit-animation-delay: -1s;
animation-delay: -1s;
animation: spin 2s linear infinite;
}
}
}

@keyframes bounce {
0%,
100% {
transform: scale(0);
-webkit-transform: scale(0);
@keyframes spin {
from {
transform: rotate(0deg);
}
50% {
transform: scale(1);
-webkit-transform: scale(1);
to {
transform: rotate(360deg);
}
}
}
Expand Down
57 changes: 55 additions & 2 deletions images/chromium-headful/client/src/components/video.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div ref="component" class="video">
<div ref="player" class="player">
<div ref="player" class="player" :class="{ 'is-muted': muted }">
<div ref="container" class="player-container">
<video ref="video" playsinline />
<div class="emotes">
Expand Down Expand Up @@ -85,6 +85,19 @@
</template>

<style lang="scss" scoped>
/* KERNEL MODIFICATION: Keyframes for the mute indicator pulse effect */
@keyframes mute-pulse {
0% {
box-shadow: inset 0 0 0 2px rgba(255, 80, 80, 0.2);
}
50% {
box-shadow: inset 0 0 0 2px rgba(255, 80, 80, 0.4);
}
100% {
box-shadow: inset 0 0 0 2px rgba(255, 80, 80, 0.2);
}
}

.video {
width: 100%;
height: 100%;
Expand All @@ -96,6 +109,11 @@
align-items: center;
background: #000;

/* KERNEL MODIFICATION: Style for the mute indicator */
&.is-muted {
animation: mute-pulse 2s infinite;
}

.video-menu {
position: absolute;
right: 20px;
Expand Down Expand Up @@ -259,6 +277,10 @@
private fullscreen = false
private mutedOverlay = true

/* KERNEL MODIFICATION: State flag to ensure unmute happens only once. */
private hasInteracted = false
private unmuteHandler: (() => void) | null = null

get admin() {
return this.$accessor.user.admin
}
Expand Down Expand Up @@ -470,6 +492,23 @@
}
}

/* KERNEL MODIFICATION: Centralized one-time unmute logic. */
_unmuteOnFirstInteraction() {
if (this.hasInteracted || !this.muted) {
return
}

this.hasInteracted = true
this.unmute()
this.$accessor.video.setVolume(100)

// Clean up global listeners if they were set
if (this.unmuteHandler) {
document.documentElement.removeEventListener('mousedown', this.unmuteHandler)
document.documentElement.removeEventListener('keydown', this.unmuteHandler)
}
}

mounted() {
this._container.addEventListener('resize', this.onResize)
this.onVolumeChanged(this.volume)
Expand Down Expand Up @@ -533,12 +572,23 @@
this.$client.sendData('keyup', { key: this.keyMap(key) })
}
this.keyboard.listenTo(this._overlay)

/* KERNEL MODIFICATION: Set up listeners for the first interaction. */
this.unmuteHandler = this._unmuteOnFirstInteraction.bind(this)
document.documentElement.addEventListener('mousedown', this.unmuteHandler, { once: true })
document.documentElement.addEventListener('keydown', this.unmuteHandler, { once: true })
}

beforeDestroy() {
this.observer.disconnect()
this.$accessor.video.setPlayable(false)
/* Guacamole Keyboard does not provide destroy functions */

/* KERNEL MODIFICATION: Clean up listeners on component destruction. */
if (this.unmuteHandler) {
document.documentElement.removeEventListener('mousedown', this.unmuteHandler)
document.documentElement.removeEventListener('keydown', this.unmuteHandler)
}
}

get hasMacOSKbd() {
Expand Down Expand Up @@ -761,6 +811,9 @@
}

onMouseDown(e: MouseEvent) {
/* KERNEL MODIFICATION: Trigger unmute on first video click. */
this._unmuteOnFirstInteraction()

if (!this.hosting) {
this.$emit('control-attempt', e)
}
Expand Down Expand Up @@ -846,4 +899,4 @@
this._overlay.focus()
}
}
</script>
</script>
Loading