Я пытаюсь внедрить сторонний скрипт на страницу и после его загрузки инициализировать видеоплеер.
Я хочу иметь возможность иметь несколько видеопроигрывателей на любой странице, поэтому у меня есть логика, чтобы проверить, загружен ли сценарий, и запускать различные действия в зависимости от того, есть он или нет.
Мой помощник по загрузке скриптов выглядит так:
/**
* injectScript - Inject player script into page
* @param {String} id - script tag id
* @param {String} src - script src
* @return {Promise} - script load callback
*/
injectScript (id, src) {
return new Promise(resolve => {
if (!document.getElementById(id)) {
const script = document.createElement('script');
script.setAttribute('id', id);
script.type = 'text/javascript';
script.src = src;
document.body.appendChild(script);
script.onload = () => resolve('script-loaded');
} else {
resolve('script-exists');
}
});
}
У меня есть эпопея, которая вызывает этого помощника и запускает действие в зависимости от результата.Эпопея выглядит так:
/**
* loadPlayerScript
* @param {Object} action$ - action observable
* @param {Object} store - redux store
* @param {Object} dependencies - injected dependencies
* @return {Object} - action observable
*/
export default function loadPlayerScript (action$, store, { scriptLoaderHelper }) {
return action$.ofType(PLAYER_SCRIPT_LOAD)
.switchMap(action => Observable.fromPromise(scriptLoaderHelper.injectScript(action.data.id, action.data.script)))
.map(data => {
if (data === 'script-loaded') {
return playerScriptSuccess();
}
return playerScriptExists();
})
.catch(error => Observable.of(playerScriptFailure(error)));
}
Проблема:
PLAYER_SCRIPT_LOAD запускается дважды (я могу это проверить в инструментах разработчика Redux), это ожидаемо.Однако происходит то, что эпопея разрешает обещание только один раз (и запускает только одно из действий на карте).Как заставить эпопею запускать действия для каждого разрешения обещания?
Я уверен, что это что-то супер простое, что я пропускаю, но любая помощь приветствуется!