hlassiege/daryl · b963e6a

⑂ b963e6a

fix(web): release preview media elements when they leave the page

Removed <video>/<audio> elements kept downloading until garbage collected.
Over HTTP/2 nothing caps these requests, and each kept a proxied connection
to the API open; scrubbing across B-roll piled them up past the 512 sockets
select() handles on Windows, crashing the API.

hlassiege committed 2026-10-12T09:50:36+02:00 Browse files

b963e6a parent: 42bca16

added web/src/lib/media.ts +12 -0 Viewed

new file mode 100644
@@ -0,0 +1,12 @@
	1	+/**
	2	+ * Lâche le fichier d'un <video> / <audio> qu'on n'utilise plus. Sans ça, l'élément retiré de la page continue
	3	+ * de télécharger jusqu'à son ramasse-miettes : en HTTP/2 (Vite en HTTPS) rien ne plafonne ces requêtes, et
	4	+ * chacune garde une connexion ouverte vers l'API, qui tombe au-delà de 512 (select() de Windows).
	5	+ */
	6	+export function releaseMedia(m: HTMLMediaElement \| null \| undefined) {
	7	+ if (!m) return;
	8	+ m.pause();
	9	+ m.removeAttribute("src");
	10	+ // sans src, load() coupe la requête en cours
	11	+ m.load();
	12	+}

++/**
++ * Lâche le fichier d'un <video> / <audio> qu'on n'utilise plus. Sans ça, l'élément retiré de la page continue
++ * de télécharger jusqu'à son ramasse-miettes : en HTTP/2 (Vite en HTTPS) rien ne plafonne ces requêtes, et
++ * chacune garde une connexion ouverte vers l'API, qui tombe au-delà de 512 (select() de Windows).
++ */
++export function releaseMedia(m: HTMLMediaElement | null | undefined) {
++  if (!m) return;
++  m.pause();
++  m.removeAttribute("src");
++  // sans src, load() coupe la requête en cours
++  m.load();
++}

modified web/src/project/steps/montage/LayerVideo.vue +3 -1 Viewed

@@ -1,6 +1,7 @@
1	1	<script setup lang="ts">
2	2	/** Une vidéo muette de l'aperçu (un B-roll), calée sur `time` (secondes dans le média) et sur la lecture. */
3		-import { onMounted, ref, watch } from "vue";
	3	+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
	4	+import { releaseMedia } from "../../../lib/media";
4	5
5	6	const props = defineProps<{ src: string; time: number; playing: boolean }>();
6	7	const el = ref<HTMLVideoElement \| null>(null);
@@ -15,6 +16,7 @@ function sync() {
15	16	}
16	17	watch(() => [props.time, props.playing, props.src], sync);
17	18	onMounted(sync);
	19	+onBeforeUnmount(() => releaseMedia(el.value));
18	20	</script>
19	21
20	22	<template>

  <script setup lang="ts">
  /** Une vidéo muette de l'aperçu (un B-roll), calée sur `time` (secondes dans le média) et sur la lecture. */
--import { onMounted, ref, watch } from "vue";
++import { onBeforeUnmount, onMounted, ref, watch } from "vue";
++import { releaseMedia } from "../../../lib/media";
  const props = defineProps<{ src: string; time: number; playing: boolean }>();
  const el = ref<HTMLVideoElement | null>(null);
  }
  watch(() => [props.time, props.playing, props.src], sync);
  onMounted(sync);
++onBeforeUnmount(() => releaseMedia(el.value));
  </script>
  <template>

modified web/src/project/steps/montage/Preview.vue +5 -4 Viewed

@@ -16,6 +16,7 @@ import type { Playlist } from "../derush/usePlaylist";
16	16	import SlideFrame from "../shorts/SlideFrame.vue";
17	17	import { fxFrame, layersAt } from "../../../lib/transitions";
18	18	import LayerVideo from "./LayerVideo.vue";
	19	+import { releaseMedia } from "../../../lib/media";
19	20	import {
20	21	clipStarts, isImage, tcd, TEXT_BORDER, TEXT_FADE, TEXT_FONT, type AnimState, type Beat, type MontageView, type TextNote, type Timeline, type Visual,
21	22	} from "./types";
@@ -49,7 +50,7 @@ async function copySearch(b: Beat) {
49	50
50	51	const el = ref<HTMLVideoElement \| null>(null);
51	52	onMounted(() => { props.player.video.value = el.value; });
52		-onBeforeUnmount(() => { props.player.video.value = null; });
	53	+onBeforeUnmount(() => { props.player.video.value = null; releaseMedia(el.value); });
53	54
54	55	const t = computed(() => props.player.t.value);
55	56	const playing = computed(() => props.player.playing.value);
@@ -221,7 +222,7 @@ watch([t, playing], () => {
221	222	let a = players.get(s.id);
222	223	// a.src est absolue et encodée (espaces → %20) : on compare avec l'adresse résolue de la même façon
223	224	if (!a \|\| a.src !== new URL(url, location.href).href) {
224		- a?.pause();
	225	+ releaseMedia(a);
225	226	a = new Audio(url);
226	227	players.set(s.id, a);
227	228	}
@@ -231,9 +232,9 @@ watch([t, playing], () => {
231	232	if (a.paused) a.play().catch(() => {});
232	233	}
233	234	}
234		- for (const [id, a] of players) if (!active.has(id)) { a.pause(); players.delete(id); }
	235	+ for (const [id, a] of players) if (!active.has(id)) { releaseMedia(a); players.delete(id); }
235	236	});
236		-onUnmounted(() => { for (const a of players.values()) a.pause(); players.clear(); });
	237	+onUnmounted(() => { for (const a of players.values()) releaseMedia(a); players.clear(); });
237	238
238	239	// un beat posé dont l'animation n'est pas écrite reste une slide, qu'on peut relancer ; un zoom ou un B-roll
239	240	// vidéo se voit déjà, une étiquette dit qu'il reste à poser

  import SlideFrame from "../shorts/SlideFrame.vue";
  import { fxFrame, layersAt } from "../../../lib/transitions";
  import LayerVideo from "./LayerVideo.vue";
++import { releaseMedia } from "../../../lib/media";
  import {
    clipStarts, isImage, tcd, TEXT_BORDER, TEXT_FADE, TEXT_FONT, type AnimState, type Beat, type MontageView, type TextNote, type Timeline, type Visual,
  } from "./types";
  const el = ref<HTMLVideoElement | null>(null);
  onMounted(() => { props.player.video.value = el.value; });
--onBeforeUnmount(() => { props.player.video.value = null; });
++onBeforeUnmount(() => { props.player.video.value = null; releaseMedia(el.value); });
  const t = computed(() => props.player.t.value);
  const playing = computed(() => props.player.playing.value);
        let a = players.get(s.id);
        // a.src est absolue et encodée (espaces → %20) : on compare avec l'adresse résolue de la même façon
        if (!a || a.src !== new URL(url, location.href).href) {
--        a?.pause();
++        releaseMedia(a);
          a = new Audio(url);
          players.set(s.id, a);
        }
        if (a.paused) a.play().catch(() => {});
      }
    }
--  for (const [id, a] of players) if (!active.has(id)) { a.pause(); players.delete(id); }
++  for (const [id, a] of players) if (!active.has(id)) { releaseMedia(a); players.delete(id); }
  });
--onUnmounted(() => { for (const a of players.values()) a.pause(); players.clear(); });
++onUnmounted(() => { for (const a of players.values()) releaseMedia(a); players.clear(); });
  // un beat posé dont l'animation n'est pas écrite reste une slide, qu'on peut relancer ; un zoom ou un B-roll
  // vidéo se voit déjà, une étiquette dit qu'il reste à poser