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

fix(showcase): replace native text track events #27

Merged
merged 1 commit into from
Mar 21, 2024
Merged

fix(showcase): replace native text track events #27

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
52 changes: 24 additions & 28 deletions static/showcases/blocked-segment.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,13 +34,18 @@ <h2>Detect blocked segment</h2>
// The id for the timeout function responsible for managing the auto-hide of the notification.
#timeoutId;

/**
*
* @param player {import('@srgssr/pillarbox-web').Player}
* @param options
*/
constructor(player, options) {
super(player, options);

// Attach the DOM element when the player is ready,
this.player.ready(() => this.#attachComponent());
// Wait for the 'loadeddata' event to ensure the text tracks are available
this.player.on('loadeddata', () => this.#handleBlockedSegmentChange());
// Wait for the blocked segment change event.
this.player.on('srgssr/blocked-segment', ({ data }) => this.#handleBlockedSegmentChange(data));
}

#attachComponent() {
Expand All @@ -50,36 +55,27 @@ <h2>Detect blocked segment</h2>
});
}

#handleBlockedSegmentChange() {
// Get the text track with the ID 'srgssr-blocked-segments'
const blockedSegments = this.player.textTracks().getTrackById('srgssr-blocked-segments');
async #handleBlockedSegmentChange(data) {
// Cancel the previous timeout
clearTimeout(this.#timeoutId);

// Add a listener for the 'cuechange' event on the blocked segments text track
blockedSegments?.on('cuechange', () => {
// Check if there are active cues in the blocked segments text track
if (!blockedSegments.activeCues.length) return;
// Parse the JSON content of the active cue to get the blocked segment information
const blockSegment = JSON.parse(data.text);
const blockReason = blockSegment.blockReason ?? 'UNKNOWN';
// Block reasons are localized out of the box, alternatively you can make your own
const message = this.#component.localize(blockReason);

// Cancel the previous timeout
clearTimeout(this.#timeoutId);
// Update the displayed notification text with the appropriate message
this.#component.el().textContent = `ⓘ ${message}`;

// Parse the JSON content of the active cue to get the blocked segment information
const blockSegment = JSON.parse(blockedSegments.activeCues[0].text);
const blockReason = blockSegment.blockReason ?? 'UNKNOWN';
// Block reasons are localized out of the box, alternatively you can make your own
const message = this.#component.localize(blockReason);
// Show the blocked segment notification
this.#component.show();

// Update the displayed notification text with the appropriate message
this.#component.el().textContent = `ⓘ ${message}`;

// Show the blocked segment notification
this.#component.show();

// Set a timeout to hide the notification after a specified delay
this.#timeoutId = setTimeout(() => {
this.#component.hide();
this.#timeoutId = undefined;
}, this.options.delay);
});
// Set a timeout to hide the notification after a specified delay
this.#timeoutId = setTimeout(() => {
this.#component.hide();
this.#timeoutId = undefined;
}, this.options.delay);
}

// Get the options of this plugin
Expand Down
36 changes: 15 additions & 21 deletions static/showcases/chapters.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,8 +37,8 @@ <h2>Display Current Chapter</h2>

// Attach the DOM element when the player is ready,
this.player.ready(() => this.#attachComponent());
// Wait for the 'loadeddata' event to handle the chapter change
this.player.on('loadeddata', () => this.#handleChapterChange());
// Wait for the chapter change event
this.player.on('srgssr/chapter', ({ data }) => this.#handleChapterChange(data));
}

#attachComponent() {
Expand Down Expand Up @@ -68,28 +68,22 @@ <h2>Display Current Chapter</h2>
};
}

#handleChapterChange() {
// Get the text track with the ID 'srgssr-chapters'
const chapters = this.player.textTracks().getTrackById('srgssr-chapters');
#handleChapterChange(data) {
// Check if there are active cues in the chapters text track
if (!data) {
// Hide the current chapter component if there are no active cues
this.#component.hide();
return;
}

// Add a listener for the 'cuechange' event on the chapters text track
chapters?.on('cuechange', () => {
// Check if there are active cues in the chapters text track
if (!chapters.activeCues.length) {
// Hide the current chapter component if there are no active cues
this.#component.hide();
return;
}
// Parse the JSON content of the active cue to get the current chapter information
const currentChapter = JSON.parse(data.text);

// Parse the JSON content of the active cue to get the current chapter information
const currentChapter = JSON.parse(chapters.activeCues[0].text);
// Update the displayed chapter title and thumbnail
this.#component.updateData(currentChapter.imageUrl, currentChapter.title);

// Update the displayed chapter title and thumbnail
this.#component.updateData(currentChapter.imageUrl, currentChapter.title);

// Show the current chapter component
this.#component.show();
});
// Show the current chapter component
this.#component.show();
}
}

Expand Down
41 changes: 17 additions & 24 deletions static/showcases/skip-credits.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,27 +31,24 @@ <h2>Skip Credits</h2>
class SkipButton extends Plugin {
// Reference to the component used to display the skip button.
#component;
// The currently active time interval
#activeInterval;

constructor(player, options) {
super(player, options);

// Attach the DOM element when the player is ready,
this.player.ready(() => this.#attachComponent());
// Wait for the 'loadeddata' event to handle the time intervals change
this.player.on('loadeddata', () => this.#timeIntervalsChange());
// Wait for the time interval change event.
this.player.on('srgssr/interval', ({ data }) => this.#timeIntervalsChange(data));
}

#attachComponent() {
this.#component = this.player.addChild('button', {
// Define the click handler for the button
clickHandler: () => {
// Get the text track with the ID 'srgssr-intervals'
const timeIntervals = this.player.textTracks().getTrackById('srgssr-intervals');
// Get the active time interval cue
const timeInterval = timeIntervals.activeCues[0];

// Set the player's current time to the 'markOut' value of the time interval
this.player.currentTime(timeInterval.endTime);
this.player.currentTime(this.#activeInterval.endTime);
},
// Set the class for styling and hide the element with 'vjs-hidden'
// 'vjs-visible-text' allows to show the controlText, otherwise it is hidden by default
Expand All @@ -61,22 +58,18 @@ <h2>Skip Credits</h2>
});
}

#timeIntervalsChange() {
// Get the text track with the ID 'srgssr-intervals'
const timeIntervals = player.textTracks().getTrackById('srgssr-intervals');

// Add a listener for the 'cuechange' event on the time intervals text track
timeIntervals?.on('cuechange', () => {
// Check if there are active cues in the time intervals text track
if (!timeIntervals.activeCues.length) {
// Hide the skip button if there are no active cues
this.#component.hide();
return;
}

// Show the skip button if there are active cues
this.#component.show();
});
#timeIntervalsChange(data) {
// Check if there are active cues in the time intervals text track
if (!data) {
// Hide the skip button if there are no active cues
this.#activeInterval = undefined;
this.#component.hide();
return;
}

// Show the skip button if there are active cues
this.#activeInterval = data;
this.#component.show();
}
}

Expand Down
Loading