source for getorbyt.com
getorbyt.com/
client
bsky
orbytapp
app
orbyt
bluesky
getorbyt
orbytvideo
atproto
video
Enhance video player functionality to support mute/unmute on click
- Updated video player interaction to allow users to mute/unmute the video by clicking anywhere on the video area.
- Added visual feedback with text updates indicating the current mute state.
- Refactored event listener to improve code organization and maintainability.
+15
-6
+15
-6
public/js/post-view.js
+15
-6
public/js/post-view.js
···
125
125
videoEl.load();
126
126
}
127
127
128
-
// Play/pause on click
129
-
videoEl.addEventListener('click', (e) => {
128
+
// Mute/unmute on tap/click anywhere on video (video keeps playing)
129
+
const videoContainer = thumbnailEl?.closest('.video-container');
130
+
const handleVideoAreaClick = (e) => {
130
131
e.stopPropagation();
131
-
if (videoEl.paused) {
132
-
videoEl.play();
132
+
e.preventDefault();
133
+
const muteText = document.getElementById('mute-text');
134
+
if (videoEl.muted) {
135
+
videoEl.muted = false;
136
+
if (videoEl.paused) videoEl.play().catch(() => {});
137
+
if (muteText) muteText.textContent = 'TAP TO MUTE';
133
138
} else {
134
-
videoEl.pause();
139
+
videoEl.muted = true;
140
+
if (muteText) muteText.textContent = 'TAP TO UNMUTE';
135
141
}
136
-
});
142
+
};
143
+
if (videoContainer) {
144
+
videoContainer.addEventListener('click', handleVideoAreaClick);
145
+
}
137
146
138
147
// Initialize sizing
139
148
resizeVideoAndOverlay();