pstream is dead; long live pstream
taciturnaxolotl.github.io/pstream-ng/
refactor buffering
+65
-10
+65
-10
src/components/player/display/base.ts
+65
-10
src/components/player/display/base.ts
···
372
372
videoElement.addEventListener("playing", () => emit("play", undefined));
373
373
videoElement.addEventListener("pause", () => emit("pause", undefined));
374
374
videoElement.addEventListener("canplay", () => {
375
-
emit("loading", false);
375
+
// Check if video has enough buffered data to play smoothly (at least 5 seconds ahead)
376
+
const hasEnoughBuffer = (() => {
377
+
if (!videoElement) return false;
378
+
const currentTime = videoElement.currentTime ?? 0;
379
+
const buffered = videoElement.buffered;
380
+
if (buffered.length === 0) return false;
381
+
382
+
// Find the buffered range that contains current time
383
+
for (let i = 0; i < buffered.length; i += 1) {
384
+
if (
385
+
currentTime >= buffered.start(i) &&
386
+
currentTime <= buffered.end(i)
387
+
) {
388
+
const bufferedAhead = buffered.end(i) - currentTime;
389
+
return bufferedAhead >= 5; // At least 5 seconds buffered ahead
390
+
}
391
+
}
392
+
return false;
393
+
})();
394
+
395
+
// Only set loading to false if we have enough buffer or if we're not at the start
396
+
if (hasEnoughBuffer || (videoElement?.currentTime ?? 0) > 0) {
397
+
emit("loading", false);
398
+
}
399
+
376
400
// Attempt autoplay if this was an autoplay transition (startAt = 0)
377
401
if (shouldAutoplayAfterLoad && startAt === 0 && videoElement) {
378
402
shouldAutoplayAfterLoad = false; // Reset the flag
379
403
// Try to play - this will work on most platforms, but iOS may block it
380
404
const playPromise = videoElement.play();
381
405
if (playPromise !== undefined) {
382
-
playPromise.catch(() => {
383
-
// Play was blocked (likely iOS), emit that we're not playing
384
-
// The AutoPlayStart component will show a play button
385
-
emit("pause", undefined);
386
-
});
406
+
playPromise
407
+
.then(() => {
408
+
// Autoplay succeeded
409
+
})
410
+
.catch((_error) => {
411
+
// Play was blocked (likely iOS), emit that we're not playing
412
+
// The AutoPlayStart component will show a play button
413
+
emit("pause", undefined);
414
+
});
387
415
}
388
416
}
389
417
});
···
428
456
}
429
457
});
430
458
videoElement.addEventListener("progress", () => {
431
-
if (videoElement)
432
-
emit(
433
-
"buffered",
434
-
handleBuffered(videoElement.currentTime, videoElement.buffered),
459
+
if (videoElement) {
460
+
const bufferedTime = handleBuffered(
461
+
videoElement.currentTime,
462
+
videoElement.buffered,
435
463
);
464
+
emit("buffered", bufferedTime);
465
+
466
+
// Check if we now have enough buffer to stop loading
467
+
const hasEnoughBuffer = (() => {
468
+
const buffered = videoElement.buffered;
469
+
if (buffered.length === 0) return false;
470
+
471
+
const currentTime = videoElement.currentTime ?? 0;
472
+
// Find the buffered range that contains current time
473
+
for (let i = 0; i < buffered.length; i += 1) {
474
+
if (
475
+
currentTime >= buffered.start(i) &&
476
+
currentTime <= buffered.end(i)
477
+
) {
478
+
const bufferedAhead = buffered.end(i) - currentTime;
479
+
return bufferedAhead >= 5; // At least 5 seconds buffered ahead
480
+
}
481
+
}
482
+
return false;
483
+
})();
484
+
485
+
// If we're still loading but now have enough buffer, stop loading
486
+
// This handles cases where canplay fired with insufficient buffer
487
+
if (hasEnoughBuffer && videoElement.readyState >= 3) {
488
+
emit("loading", false);
489
+
}
490
+
}
436
491
});
437
492
videoElement.addEventListener("webkitendfullscreen", () => {
438
493
isFullscreen = false;