From 4a6a9eb7fcbbeff9d41cfe313bc8a91ae1d2c764 Mon Sep 17 00:00:00 2001 From: Xavier Mouton-Dubosc Date: Sat, 3 Apr 2021 10:55:12 +0200 Subject: [PATCH] CPU-controller was losing focus when changing track in playlist MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Keys ↑ and ↓ mapped onto chapters, then on playlist #108 --- src/build_interface.js | 4 +--- src/build_playlist.js | 42 ++++++++++++++++++++++++------------------ src/element_cpu.js | 9 +++++++-- src/trigger.js | 10 ++++------ 4 files changed, 36 insertions(+), 29 deletions(-) diff --git a/src/build_interface.js b/src/build_interface.js index 669b01b8..43650a41 100644 --- a/src/build_interface.js +++ b/src/build_interface.js @@ -96,9 +96,7 @@ export function buildInterface(container) { container.audiotag.addEventListener('durationchange', container.repositionTracks.bind(container), passiveEvent); buildChaptersLoader(container); - if (container.isController) { - buildPlaylist(container); - } + buildPlaylist(); container.showMain(); container.updatePlayButton(); container.emitEvent('ready'); diff --git a/src/build_playlist.js b/src/build_playlist.js index 0b500cf0..282cfc87 100644 --- a/src/build_playlist.js +++ b/src/build_playlist.js @@ -1,5 +1,5 @@ import {__} from './i18n.js'; -import {activecueClassname} from './element_cpu.js'; +import {activecueClassname, planeAndPointNamesFromId} from './element_cpu.js'; // plane for _playlist. Only used in const plane_playlist = '_playlist'; @@ -9,21 +9,22 @@ const plane_playlist = '_playlist'; Should be called only for * @private was public * - * @param {Object} container .CPU + * @param {Object} container .CPU * */ -export function buildPlaylist(container) { - if (!container.isController) { +export function buildPlaylist(wasFocusedId) { + const globalController = document.CPU.globalController; + if ((!globalController) || (!globalController.isController)) { // Note that ONLY the global controller will display the playlist. For now. return; } - let previous_playlist = container.current_playlist; - container.current_playlist = document.CPU.currentPlaylist(); + let previous_playlist = globalController.current_playlist; + globalController.current_playlist = document.CPU.currentPlaylist(); const pointDataGroup = {}; - if (! container.plane(plane_playlist)) { - container.addPlane(plane_playlist, { + if (! globalController.plane(plane_playlist)) { + globalController.addPlane(plane_playlist, { title : __['playlist'], track : false, panel : 'nocuetime', @@ -32,15 +33,15 @@ export function buildPlaylist(container) { }); } - if (previous_playlist !== container.current_playlist) { - container.clearPlane(plane_playlist); - if (container.current_playlist.length === 0) { + if (previous_playlist !== globalController.current_playlist) { + globalController.clearPlane(plane_playlist); + if (globalController.current_playlist.length === 0) { // remove plane to hide panel. Yes, overkill - container.removePlane(plane_playlist); + globalController.removePlane(plane_playlist); return; } - for (let audiotag_id of container.current_playlist) { + for (let audiotag_id of globalController.current_playlist) { // TODO : when audiotag not here, do not add point /*container.addPoint(plane_playlist, audiotag_id, { text : document.getElementById(audiotag_id)?.dataset.title, @@ -53,12 +54,17 @@ export function buildPlaylist(container) { }; } - container.bulkPoints(plane_playlist, pointDataGroup); + globalController.bulkPoints(plane_playlist, pointDataGroup); + // move _playlist on top. Hoping it will insert it RIGHT AFTER the main element. + globalController.element.shadowRoot.querySelector('main').insertAdjacentElement( + 'afterend', globalController.planePanel(plane_playlist) ); } - container.highlightPoint(plane_playlist, container.audiotag.id, activecueClassname); + globalController.highlightPoint(plane_playlist, globalController.audiotag.id, activecueClassname); - // move _playlist on top. Hoping it will insert it RIGHT AFTER the main element. - container.element.shadowRoot.querySelector('main').insertAdjacentElement( - 'afterend', container.planePanel(plane_playlist) ); + if (wasFocusedId) { + // we need to give back focus to the points, as they disapeared + const [planeName, pointName] = planeAndPointNamesFromId(wasFocusedId); + globalController.focusPoint(planeName, pointName); + } } \ No newline at end of file diff --git a/src/element_cpu.js b/src/element_cpu.js index 6587e623..e75e911e 100644 --- a/src/element_cpu.js +++ b/src/element_cpu.js @@ -1357,6 +1357,7 @@ export class CPU_element_api { this.drawPlane(planeName); this.refreshPlane(planeName); } + // due to a Chrome glitch on chapters panel in cpu-controller while changing playing cpu-audio, we have to refresh a cuechange_event cuechange_event(this); } @@ -1479,7 +1480,11 @@ export class CPU_element_api { */ focusedId() { const target = this.focused(); - return target.id ?? target?.closest('[id]')?.id; + if (!target) { + return + } + const out = target.id != '' ? target.id : target.closest('[id]').id; + return out == '' ? null : out; } /** @@ -1536,7 +1541,7 @@ function relativeFocus(self, go_foward) { } [planeName,previous_pointName] = planeAndPointNamesFromId(wasFocused.id); } - if (previous_pointName) { + if (previous_pointName != '') { planePointNames = self.planePointNames(planeName); pointName = adjacentArrayValue(planePointNames, previous_pointName, go_foward?1:-1); } diff --git a/src/trigger.js b/src/trigger.js index 1b563414..850fe882 100644 --- a/src/trigger.js +++ b/src/trigger.js @@ -51,18 +51,19 @@ function playOnceUnlock(event, audiotag) { * @param {audiotag} HTMLAudioElement The playing