Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bring various v4 recent improvements to next v3 version #1197

Merged
merged 11 commits into from
Jan 6, 2023
Merged

Bring various v4 recent improvements to next v3 version #1197

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
8d95640
demo: Add segment and manifest timeouts configuration
peaBerberian Dec 27, 2022
638dd51
tests: actually seek back and forth in memory tests
peaBerberian Dec 27, 2022
402e2f3
demo: add descriptions to every option of the demo page
peaBerberian Dec 27, 2022
67da133
demo: add title to options
peaBerberian Dec 27, 2022
27d9be8
demo: BufferSize chart is at 0 by default
peaBerberian Dec 27, 2022
5834d3c
demo: Remove fake LogDisplayer component
peaBerberian Dec 27, 2022
f71373a
demo: set better style for demo settings module
peaBerberian Dec 27, 2022
cfbbc4d
api: safer event emitting by stopping sending events if content is st…
peaBerberian Jan 2, 2023
7607cc1
also send available...Tracks change events if AdaptationSets appear o…
peaBerberian Jan 3, 2023
d77e685
Avoid creating multiple times the same RepresentationStream if it cal…
peaBerberian Dec 27, 2022
dd10d3d
Minor documentation fixes
peaBerberian Jan 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 24 additions & 0 deletions demo/full/scripts/components/Options/AudioAdaptiveSettings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,6 +75,14 @@ function AudioAdaptiveSettings({
/>
</span>
</div>
<span className="option-desc">
{
parseFloat(initialAudioBr) === 0 ?
"Starts loading the lowest audio bitrate" :
`Starts with an audio bandwidth estimate of ${initialAudioBr}` +
" bits per seconds."
}
</span>
</li>
<li>
<div className="playerOptionInput">
Expand Down Expand Up @@ -116,6 +124,14 @@ function AudioAdaptiveSettings({
>
Do not limit
</Checkbox>
<span className="option-desc">
{
!isMinAudioBrLimited || parseFloat(minAudioBr) <= 0 ?
"Not limiting the lowest audio bitrate reachable through the adaptive logic" :
"Limiting the lowest audio bitrate reachable through the adaptive " +
`logic to ${minAudioBr} bits per seconds`
}
</span>
</li>
<li>
<div className="playerOptionInput">
Expand Down Expand Up @@ -159,6 +175,14 @@ function AudioAdaptiveSettings({
Do not limit
</Checkbox>
</div>
<span className="option-desc">
{
!isMaxAudioBrLimited || parseFloat(maxAudioBr) === Infinity ?
"Not limiting the highest audio bitrate reachable through the adaptive logic" :
"Limiting the highest audio bitrate reachable through the adaptive " +
`logic to ${maxAudioBr} bits per seconds`
}
</span>
</li>
</Fragment>
);
Expand Down
36 changes: 32 additions & 4 deletions demo/full/scripts/components/Options/BufferOptions.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,12 +56,12 @@ function BufferOptions({
const isNotLimited = getCheckBoxValue(evt.target);
if (isNotLimited){
setMaxVideoBufferSizeLimit(false);
onMaxVideoBufferSizeInput(Infinity)
onMaxVideoBufferSizeInput(Infinity);
} else {
setMaxVideoBufferSizeLimit(true);
onMaxVideoBufferSizeInput(DEFAULT_VALUES.maxVideoBufferSize)
onMaxVideoBufferSizeInput(DEFAULT_VALUES.maxVideoBufferSize);
}
}
};

return (
<Fragment>
Expand Down Expand Up @@ -96,6 +96,10 @@ function BufferOptions({
/>
</span>
</div>
<span className="option-desc">
Buffering around {wantedBufferAhead} second(s) ahead of the current
position
</span>
</li>
<li>
<div className="playerOptionInput">
Expand Down Expand Up @@ -123,7 +127,7 @@ function BufferOptions({
ariaLabel="Reset option to default value"
title="Reset option to default value"
onClick={() => {
setMaxVideoBufferSizeLimit(DEFAULT_VALUES.maxVideoBufferSize !==
setMaxVideoBufferSizeLimit(DEFAULT_VALUES.maxVideoBufferSize !==
Infinity);
onMaxVideoBufferSizeInput(DEFAULT_VALUES.maxVideoBufferSize);
}}
Expand All @@ -140,6 +144,14 @@ function BufferOptions({
>
Do not limit
</Checkbox>
<span className="option-desc">
{
parseFloat(maxVideoBufferSize) === Infinity ||
!isMaxVideoBufferSizeLimited ?
"Not setting a size limit to the video buffer (relying only on the wantedBufferAhead option)" :
`Buffering at most around ${maxVideoBufferSize} kilobyte(s) on the video buffer`
}
</span>
</li>
<li>
<div className="playerOptionInput">
Expand Down Expand Up @@ -182,6 +194,14 @@ function BufferOptions({
>
Do not limit
</Checkbox>
<span className="option-desc">
{
parseFloat(maxBufferAhead) === Infinity ||
!isMaxBufferAHeadLimited ?
"Not manually cleaning buffer far ahead of the current position" :
`Manually cleaning data ${maxBufferAhead} second(s) ahead of the current position`
}
</span>
</li>
<li>
<div className="playerOptionInput">
Expand Down Expand Up @@ -224,6 +244,14 @@ function BufferOptions({
>
Do not limit
</Checkbox>
<span className="option-desc">
{
parseFloat(maxBufferBehind) === Infinity ||
!isMaxBufferBehindLimited ?
"Not manually cleaning buffer behind the current position" :
`Manually cleaning data ${maxBufferBehind} second(s) behind the current position`
}
</span>
</li>
</Fragment>
);
Expand Down
148 changes: 146 additions & 2 deletions demo/full/scripts/components/Options/NetworkConfig.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,24 +9,34 @@ import DEFAULT_VALUES from "../../lib/defaultOptionsValues";
* @param {Object} props
* @returns {Object}
*/
function NetworkConfig({
function RequestConfig({
segmentRetry,
segmentTimeout,
manifestRetry,
offlineRetry,
manifestTimeout,
onSegmentRetryInput,
onSegmentTimeoutInput,
onManifestRetryInput,
onOfflineRetryInput,
onManifestTimeoutInput,
}) {
const [isSegmentRetryLimited, setSegmentRetryLimit] = useState(
segmentRetry !== Infinity
);
const [isSegmentTimeoutLimited, setSegmentTimeoutLimit] = useState(
segmentTimeout !== -1
);
const [isManifestRetryLimited, setManifestRetryLimit] = useState(
manifestRetry !== Infinity
);
const [isOfflineRetryLimited, setOfflineRetryLimit] = useState(
offlineRetry !== Infinity
);

const [isManifestTimeoutLimited, setManifestTimeoutLimit] = useState(
manifestTimeout !== -1
);
const onChangeLimitSegmentRetry = (evt) => {
const isNotLimited = getCheckBoxValue(evt.target);
if (isNotLimited) {
Expand All @@ -38,6 +48,17 @@ function NetworkConfig({
}
};

const onChangeLimitSegmentTimeout = (evt) => {
const isNotLimited = getCheckBoxValue(evt.target);
if (isNotLimited) {
setSegmentTimeoutLimit(false);
onSegmentTimeoutInput("-1");
} else {
setSegmentTimeoutLimit(true);
onSegmentTimeoutInput(DEFAULT_VALUES.segmentTimeout);
}
};

const onChangeLimitManifestRetry = (evt) => {
const isNotLimited = getCheckBoxValue(evt.target);
if (isNotLimited) {
Expand All @@ -60,6 +81,17 @@ function NetworkConfig({
}
};

const onChangeLimitManifestTimeout = (evt) => {
const isNotLimited = getCheckBoxValue(evt.target);
if (isNotLimited) {
setManifestTimeoutLimit(false);
onManifestTimeoutInput("-1");
} else {
setManifestTimeoutLimit(true);
onManifestTimeoutInput(DEFAULT_VALUES.manifestTimeout);
}
};

return (
<Fragment>
<li>
Expand Down Expand Up @@ -103,7 +135,61 @@ function NetworkConfig({
>
Do not limit
</Checkbox>
<span className="option-desc">
{parseFloat(segmentRetry) === Infinity || !isSegmentRetryLimited ?
"Retry \"retryable\" segment requests with no limit" :
`Retry "retryable" segment requests at most ${segmentRetry} time(s)`}
</span>
</li>

<li>
<div className="playerOptionInput">
<label htmlFor="segmentTimeout">Segment Timeout</label>
<span className="wrapperInputWithResetBtn">
<input
type="text"
name="segmentTimeout"
id="segmentTimeout"
aria-label="Segment timeout option"
placeholder="Number"
onChange={(evt) => onSegmentTimeoutInput(evt.target.value)}
value={segmentTimeout}
disabled={isSegmentTimeoutLimited === false}
className="optionInput"
/>
<Button
className={
parseFloat(segmentTimeout) === DEFAULT_VALUES.segmentTimeout
? "resetBtn disabledResetBtn"
: "resetBtn"
}
ariaLabel="Reset option to default value"
title="Reset option to default value"
onClick={() => {
setSegmentTimeoutLimit(DEFAULT_VALUES.segmentTimeout !==
Infinity);
onSegmentTimeoutInput(DEFAULT_VALUES.segmentTimeout);
}}
value={String.fromCharCode(0xf021)}
/>
</span>
</div>
<Checkbox
className="playerOptionsCheckBox"
ariaLabel="Segment timeout limit option"
name="segmentTimeoutLimit"
checked={isSegmentTimeoutLimited === false}
onChange={onChangeLimitSegmentTimeout}
>
Do not limit
</Checkbox>
<span className="option-desc">
{parseFloat(segmentTimeout) === -1 || !isSegmentTimeoutLimited ?
"Perform segment requests without timeout" :
`Stop segment requests after ${segmentTimeout} millisecond(s)`}
</span>
</li>

<li>
<div className="playerOptionInput">
<label htmlFor="manifestRetry">Manifest Retry</label>
Expand Down Expand Up @@ -145,6 +231,11 @@ function NetworkConfig({
>
Do not limit
</Checkbox>
<span className="option-desc">
{parseFloat(manifestRetry) === Infinity || !isManifestRetryLimited ?
"Retry \"retryable\" manifest requests with no limit" :
`Retry "retryable" manifest requests at most ${manifestRetry} time(s)`}
</span>
</li>
<li>
<div className="playerOptionInput">
Expand Down Expand Up @@ -187,9 +278,62 @@ function NetworkConfig({
>
Do not limit
</Checkbox>
<span className="option-desc">
{parseFloat(offlineRetry) === Infinity || !isOfflineRetryLimited ?
"Retry \"retryable\" requests when offline with no limit" :
`Retry "retryable" requests when offline at most ${offlineRetry} time(s)`}
</span>
</li>

<li>
<div className="playerOptionInput">
<label htmlFor="manifestTimeout">Manifest Timeout</label>
<span className="wrapperInputWithResetBtn">
<input
type="text"
name="manifestTimeout"
id="manifestTimeout"
aria-label="Manifest timeout option"
placeholder="Number"
onChange={(evt) => onManifestTimeoutInput(evt.target.value)}
value={manifestTimeout}
disabled={isManifestTimeoutLimited === false}
className="optionInput"
/>
<Button
className={
parseFloat(manifestTimeout) === DEFAULT_VALUES.manifestTimeout
? "resetBtn disabledResetBtn"
: "resetBtn"
}
ariaLabel="Reset option to default value"
title="Reset option to default value"
onClick={() => {
setManifestTimeoutLimit(DEFAULT_VALUES.manifestTimeout !==
Infinity);
onManifestTimeoutInput(DEFAULT_VALUES.manifestTimeout);
}}
value={String.fromCharCode(0xf021)}
/>
</span>
</div>
<Checkbox
className="playerOptionsCheckBox"
ariaLabel="Manifest timeout limit option"
name="manifestTimeoutLimit"
checked={isManifestTimeoutLimited === false}
onChange={onChangeLimitManifestTimeout}
>
Do not limit
</Checkbox>
<span className="option-desc">
{parseFloat(manifestTimeout) === -1 || !isManifestTimeoutLimited ?
"Perform manifest requests without timeout" :
`Stop manifest requests after ${manifestTimeout} millisecond(s)`}
</span>
</li>
</Fragment>
);
}

export default React.memo(NetworkConfig);
export default React.memo(RequestConfig);
28 changes: 28 additions & 0 deletions demo/full/scripts/components/Options/Playback.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,21 @@ function TrackSwitch({
stopAtEnd,
onStopAtEndClick,
}) {
let manualBitrateSwitchingModeDesc;
switch (manualBrSwitchingMode) {
case "direct":
manualBitrateSwitchingModeDesc =
"Directly visible transition when a Representation is manually changed";
break;
case "seamless":
manualBitrateSwitchingModeDesc =
"Smooth transition when a Representation is manually changed";
break;
default:
manualBitrateSwitchingModeDesc =
"Unknown value";
break;
}
return (
<Fragment>
<li>
Expand All @@ -26,6 +41,11 @@ function TrackSwitch({
>
Auto Play
</Checkbox>
<span className="option-desc">
{autoPlay ?
"Playing directly when the content is loaded." :
"Staying in pause when the content is loaded."}
</span>
</li>
<li className="featureWrapperWithSelectMode">
<Select
Expand All @@ -37,6 +57,9 @@ function TrackSwitch({
>
Manual bitrate switching mode
</Select>
<span className="option-desc">
{manualBitrateSwitchingModeDesc}
</span>
</li>
<li>
<Checkbox
Expand All @@ -48,6 +71,11 @@ function TrackSwitch({
>
Stop At End
</Checkbox>
<span className="option-desc">
{stopAtEnd ?
"Automatically stop when reaching the end of the content." :
"Don't stop when reaching the end of the content."}
</span>
</li>
</Fragment>
);
Expand Down
Loading