Skip to content

Commit

Permalink
Merge pull request #1197 from canalplus/misc/bring-v3-compatible-impr…
Browse files Browse the repository at this point in the history 
…ovements

Bring various v4 recent improvements to next v3 version
  • Loading branch information
@peaBerberian
peaBerberian authored Jan 6, 2023
2 parents 72a9a8d + dd10d3d commit f3cc462
Show file tree
Hide file tree
Showing 24 changed files with 1,625 additions and 907 deletions.
24 changes: 24 additions & 0 deletions demo/full/scripts/components/Options/AudioAdaptiveSettings.jsx
View file
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
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
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
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

0 comments on commit f3cc462

Please sign in to comment.