source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
style: enhance video mute functionality and profile layout
- Add a hidden state for the mute toggle wrapper in embed.css to improve user experience.
- Adjust row-gap in profile.css for better spacing in header layout.
- Refactor mute control logic in post-view.js to streamline mute state handling and update UI accordingly.
+15
-8
+3
public/css/embed.css
+3
public/css/embed.css
+1
-1
public/css/profile.css
+1
-1
public/css/profile.css
···
119
119
padding-bottom: 20px;
120
120
display: flex;
121
121
flex-wrap: wrap;
122
+
row-gap: 2px;
122
123
}
123
124
.empty-feed {
124
125
width: 100%;
···
174
175
display: flex;
175
176
position: relative;
176
177
width: 50%;
177
-
margin-bottom: 2px;
178
178
box-sizing: border-box;
179
179
color: var(--orbyt-profile-text, var(--orbyt-neutral-200));
180
180
align-items: flex-end;
+11
-7
public/js/post-view.js
+11
-7
public/js/post-view.js
···
106
106
const handleVideoAreaClick = (e) => {
107
107
e.stopPropagation();
108
108
e.preventDefault();
109
-
const muteText = document.getElementById('mute-text');
110
109
if (videoEl.muted) {
111
110
videoEl.muted = false;
112
111
if (videoEl.paused) videoEl.play().catch(() => {});
113
-
if (muteText) muteText.textContent = 'TAP TO MUTE';
114
112
} else {
115
113
videoEl.muted = true;
116
-
if (muteText) muteText.textContent = 'TAP TO UNMUTE';
117
114
}
115
+
syncMuteChrome(videoEl);
118
116
};
119
117
if (videoContainer) {
120
118
videoContainer.addEventListener('click', handleVideoAreaClick);
···
123
121
resizeVideoAndOverlay();
124
122
}
125
123
124
+
function syncMuteChrome(videoEl) {
125
+
const muteToggle = document.getElementById('mute-toggle');
126
+
const muteText = document.getElementById('mute-text');
127
+
if (muteText) muteText.textContent = videoEl.muted ? 'TAP TO UNMUTE' : '';
128
+
const wrap = muteToggle?.closest('.mute-toggle-wrapper');
129
+
if (wrap) wrap.hidden = !videoEl.muted;
130
+
}
131
+
126
132
function initMuteControls() {
127
133
const videoEl = document.getElementById('vinit');
128
134
const muteToggle = document.getElementById('mute-toggle');
129
-
const muteText = document.getElementById('mute-text');
130
135
131
136
if (!videoEl) return;
132
137
133
138
videoEl.muted = true;
134
-
if (muteText) muteText.textContent = 'TAP TO UNMUTE';
139
+
syncMuteChrome(videoEl);
135
140
136
141
if (muteToggle && !muteToggle.dataset.listenerAttached) {
137
142
muteToggle.dataset.listenerAttached = 'true';
···
142
147
if (videoEl.muted) {
143
148
videoEl.muted = false;
144
149
if (videoEl.paused) videoEl.play().catch(() => {});
145
-
if (muteText) muteText.textContent = 'TAP TO MUTE';
146
150
} else {
147
151
videoEl.muted = true;
148
-
if (muteText) muteText.textContent = 'TAP TO UNMUTE';
149
152
}
153
+
syncMuteChrome(videoEl);
150
154
});
151
155
}
152
156
}