{blurhash && (
@@ -851,7 +851,7 @@ export const Video: React.FC<{
title={alt}
lang={lang}
onClick={handleClick}
- onKeyDown={handleVideoKeyDown}
+ onKeyDownCapture={handleVideoKeyDown}
onPlay={handlePlay}
onPause={handlePause}
onLoadedData={handleLoadedData}
diff --git a/app/javascript/flavours/glitch/hooks/useAudioVisualizer.ts b/app/javascript/flavours/glitch/hooks/useAudioVisualizer.ts
new file mode 100644
index 0000000000..50111a81d7
--- /dev/null
+++ b/app/javascript/flavours/glitch/hooks/useAudioVisualizer.ts
@@ -0,0 +1,112 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+
+const normalizeFrequencies = (arr: Float32Array): number[] => {
+ return new Array(...arr).map((value: number) => {
+ if (value === -Infinity) {
+ return 0;
+ }
+
+ return Math.sqrt(1 - (Math.max(-100, Math.min(-10, value)) * -1) / 100);
+ });
+};
+
+export const useAudioVisualizer = (
+ ref: React.MutableRefObject
,
+ numBands: number,
+) => {
+ const audioContextRef = useRef();
+ const sourceRef = useRef();
+ const analyzerRef = useRef();
+
+ const [frequencyBands, setFrequencyBands] = useState(
+ new Array(numBands).fill(0),
+ );
+
+ useEffect(() => {
+ if (!audioContextRef.current) {
+ audioContextRef.current = new AudioContext();
+ analyzerRef.current = audioContextRef.current.createAnalyser();
+ analyzerRef.current.smoothingTimeConstant = 0.6;
+ analyzerRef.current.fftSize = 2048;
+ }
+
+ return () => {
+ if (audioContextRef.current) {
+ void audioContextRef.current.close();
+ }
+ };
+ }, []);
+
+ useEffect(() => {
+ if (
+ audioContextRef.current &&
+ analyzerRef.current &&
+ !sourceRef.current &&
+ ref.current
+ ) {
+ sourceRef.current = audioContextRef.current.createMediaElementSource(
+ ref.current,
+ );
+ sourceRef.current.connect(analyzerRef.current);
+ sourceRef.current.connect(audioContextRef.current.destination);
+ }
+
+ return () => {
+ if (sourceRef.current) {
+ sourceRef.current.disconnect();
+ }
+ };
+ }, [ref]);
+
+ useEffect(() => {
+ const source = sourceRef.current;
+ const analyzer = analyzerRef.current;
+ const context = audioContextRef.current;
+
+ if (!source || !analyzer || !context) {
+ return;
+ }
+
+ const bufferLength = analyzer.frequencyBinCount;
+ const frequencyData = new Float32Array(bufferLength);
+
+ const updateProgress = () => {
+ analyzer.getFloatFrequencyData(frequencyData);
+
+ const normalizedFrequencies = normalizeFrequencies(
+ frequencyData.slice(100, 600),
+ );
+ const bands: number[] = [];
+ const chunkSize = Math.ceil(normalizedFrequencies.length / numBands);
+
+ for (let i = 0; i < numBands; i++) {
+ const sum = normalizedFrequencies
+ .slice(i * chunkSize, (i + 1) * chunkSize)
+ .reduce((sum, cur) => sum + cur, 0);
+ bands.push(sum / chunkSize);
+ }
+
+ setFrequencyBands(bands);
+ };
+
+ const updateInterval = setInterval(updateProgress, 15);
+
+ return () => {
+ clearInterval(updateInterval);
+ };
+ }, [numBands]);
+
+ const resume = useCallback(() => {
+ if (audioContextRef.current) {
+ void audioContextRef.current.resume();
+ }
+ }, []);
+
+ const suspend = useCallback(() => {
+ if (audioContextRef.current) {
+ void audioContextRef.current.suspend();
+ }
+ }, []);
+
+ return [resume, suspend, frequencyBands] as const;
+};
diff --git a/app/javascript/flavours/glitch/reducers/statuses.js b/app/javascript/flavours/glitch/reducers/statuses.js
index 8c54af6393..c2d88b13d1 100644
--- a/app/javascript/flavours/glitch/reducers/statuses.js
+++ b/app/javascript/flavours/glitch/reducers/statuses.js
@@ -64,7 +64,8 @@ const statusTranslateUndo = (state, id) => {
});
};
-/** @type {ImmutableMap>} */
+
+/** @type {ImmutableMap} */
const initialState = ImmutableMap();
/** @type {import('@reduxjs/toolkit').Reducer} */
diff --git a/app/javascript/flavours/glitch/styles/components.scss b/app/javascript/flavours/glitch/styles/components.scss
index 37c31cae6c..5bcce14566 100644
--- a/app/javascript/flavours/glitch/styles/components.scss
+++ b/app/javascript/flavours/glitch/styles/components.scss
@@ -7248,15 +7248,69 @@ img.modal-warning {
overflow: hidden;
box-sizing: border-box;
position: relative;
- background: var(--background-color);
+ background: var(--player-background-color, var(--background-color));
+ color: var(--player-foreground-color);
border-radius: 8px;
padding-bottom: 44px;
width: 100%;
outline: 1px solid var(--media-outline-color);
outline-offset: -1px;
+ aspect-ratio: 16 / 9;
+ container: audio-player / inline-size;
+
+ &__controls {
+ display: grid;
+ grid-template-columns: 1fr 1fr 1fr;
+ height: 100%;
+
+ &__play {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+
+ .player-button {
+ position: absolute;
+ top: 50%;
+ inset-inline-start: 50%;
+ transform: translate(-50%, -50%);
+ }
+
+ .icon {
+ filter: var(--overlay-icon-shadow);
+ }
+ }
+
+ .player-button {
+ display: inline-block;
+ outline: 0;
+ padding: 5px;
+ flex: 0 0 auto;
+ background: transparent;
+ border: 0;
+ color: var(--player-foreground-color);
+ opacity: 0.75;
+
+ .icon {
+ width: 48px;
+ height: 48px;
+ }
+
+ &:active,
+ &:hover,
+ &:focus {
+ opacity: 1;
+ }
+ }
+ }
+
+ &__visualizer {
+ max-width: 200px;
+ }
&.inactive {
- audio,
+ .video-player__seek,
+ .audio-player__controls,
.video-player__controls {
visibility: hidden;
}
@@ -7273,6 +7327,13 @@ img.modal-warning {
opacity: 0.2;
}
+ .video-player__seek__progress,
+ .video-player__seek__handle,
+ .video-player__volume__current,
+ .video-player__volume__handle {
+ background-color: var(--player-accent-color);
+ }
+
.video-player__buttons button,
.video-player__buttons a {
color: currentColor;
@@ -7292,6 +7353,13 @@ img.modal-warning {
color: currentColor;
}
+ @container audio-player (max-width: 400px) {
+ .video-player__time,
+ .player-button.video-player__download__icon {
+ display: none;
+ }
+ }
+
.video-player__seek::before,
.video-player__seek__buffer,
.video-player__seek__progress {
@@ -7376,10 +7444,12 @@ img.modal-warning {
);
padding: 0 15px;
opacity: 0;
+ pointer-events: none;
transition: opacity 0.1s ease;
&.active {
opacity: 1;
+ pointer-events: auto;
}
}
@@ -7465,6 +7535,7 @@ img.modal-warning {
background: transparent;
border: 0;
color: rgba($white, 0.75);
+ font-weight: 500;
&:active,
&:hover,
@@ -8789,6 +8860,7 @@ noscript {
bottom: 20px;
inset-inline-end: 20px;
width: 300px;
+ box-shadow: var(--dropdown-shadow);
// glitch: feature to chose which side the pop-in player is displayed
&.left {
@@ -8798,20 +8870,29 @@ noscript {
&__footer {
border-radius: 0 0 4px 4px;
- background: lighten($ui-base-color, 4%);
- padding: 10px;
- padding-top: 12px;
+ background: var(--modal-background-variant-color);
+ backdrop-filter: var(--background-filter);
+ border: 1px solid var(--modal-border-color);
+ border-top: 0;
+ padding: 12px;
display: flex;
justify-content: space-between;
}
&__header {
border-radius: 4px 4px 0 0;
- background: lighten($ui-base-color, 4%);
- padding: 10px;
+ background: var(--modal-background-variant-color);
+ backdrop-filter: var(--background-filter);
+ border: 1px solid var(--modal-border-color);
+ border-bottom: 0;
+ padding: 12px;
display: flex;
justify-content: space-between;
+ .icon-button {
+ padding: 6px;
+ }
+
&__account {
display: flex;
text-decoration: none;
@@ -8819,7 +8900,7 @@ noscript {
}
.account__avatar {
- margin-inline-end: 10px;
+ margin-inline-end: 8px;
}
.display-name {
@@ -8846,30 +8927,36 @@ noscript {
}
.picture-in-picture-placeholder {
+ border-radius: 8px;
box-sizing: border-box;
- border: 2px dashed var(--background-border-color);
- background: $base-shadow-color;
+ border: 1px dashed var(--background-border-color);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
- margin-top: 10px;
- font-size: 16px;
+ margin-top: 16px;
+ font-size: 15px;
+ line-height: 21px;
font-weight: 500;
cursor: pointer;
- color: $darker-text-color;
+ color: $dark-text-color;
aspect-ratio: 16 / 9;
.icon {
- width: 24px;
- height: 24px;
- margin-bottom: 10px;
+ width: 48px;
+ height: 48px;
+ margin-bottom: 8px;
}
&:hover,
- &:focus,
- &:active {
- border-color: lighten($ui-base-color, 12%);
+ &:active,
+ &:focus {
+ color: $darker-text-color;
+ }
+
+ &:focus-visible {
+ outline: $ui-button-focus-outline;
+ border-color: transparent;
}
}
diff --git a/app/javascript/flavours/glitch/styles/css_variables.scss b/app/javascript/flavours/glitch/styles/css_variables.scss
index 48de520417..782e08e283 100644
--- a/app/javascript/flavours/glitch/styles/css_variables.scss
+++ b/app/javascript/flavours/glitch/styles/css_variables.scss
@@ -20,7 +20,7 @@
--on-surface-color: #{color.adjust($ui-base-color, $alpha: -0.5)};
--avatar-border-radius: 8px;
--media-outline-color: #{rgba(#fcf8ff, 0.15)};
- --overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.25)});
+ --overlay-icon-shadow: drop-shadow(0 0 8px #{rgba($base-shadow-color, 0.35)});
--error-background-color: #{darken($error-red, 16%)};
--error-active-background-color: #{darken($error-red, 12%)};
--on-error-color: #fff;