@coorpacademy/app-review 0.18.2-test-latest.2 → 0.19.0

package/es/actions/api/fetch-video-props.d.ts

@@ -0,0 +1,22 @@
+import type { Dispatch } from 'redux';
+import type { ThunkOptions, VideoPropsForPlayer } from '../../types/common';
+import type { StoreState } from '../../reducers';
+export declare const SET_VIDEO_PROPS: "@@slide/SET_VIDEO_PROPS";
+export declare const SHOW_VIDEO: "@@slide/SHOW_VIDEO";
+export declare type VideoPropsPayload = {
+    slideId: string;
+    props: VideoPropsForPlayer;
+};
+export declare type SetVideoPropsAction = {
+    type: typeof SET_VIDEO_PROPS;
+    payload: VideoPropsPayload;
+};
+export declare const setVideoProps: (payload: VideoPropsPayload) => SetVideoPropsAction;
+export declare type ShowVideoAction = {
+    type: typeof SHOW_VIDEO;
+    payload: {
+        slideId: string;
+    };
+};
+export declare const showVideo: (slideId: string) => ShowVideoAction;
+export declare const fetchPropsVideo: (slideId: string) => (dispatch: Dispatch, getState: () => StoreState, { appendVideoOptions }: ThunkOptions) => Promise<void>;

package/es/actions/api/fetch-video-props.js

@@ -0,0 +1,34 @@
+import get from 'lodash/fp/get';
+export const SET_VIDEO_PROPS = '@@slide/SET_VIDEO_PROPS';
+export const SHOW_VIDEO = '@@slide/SHOW_VIDEO';
+export const setVideoProps = (payload) => ({
+    type: SET_VIDEO_PROPS,
+    payload
+});
+export const showVideo = (slideId) => ({
+    type: SHOW_VIDEO,
+    payload: { slideId }
+});
+export const fetchPropsVideo = (slideId) => async (dispatch, getState, { appendVideoOptions }) => {
+    const state = getState();
+    const slideFromAPI = get(['data', 'slides', slideId], state);
+    if (!slideFromAPI) {
+        return;
+    }
+    const slideMedia = get(['question', 'medias', '0'], slideFromAPI);
+    if (slideMedia && slideMedia.type === 'video') {
+        const videoProps = get(['data', 'videos', slideId], state);
+        if (videoProps) {
+            dispatch(showVideo(slideId));
+            return;
+        }
+        const props = await appendVideoOptions(slideMedia);
+        props.src[0].loading = false; // set to false to not show it until the next slide is unstack
+        props.src[0].type = 'video';
+        dispatch(setVideoProps({
+            slideId,
+            props
+        }));
+    }
+    return;
+};

package/es/actions/ui/next-slide.d.ts

@@ -12,5 +12,5 @@ export declare type NextSlideAction = {
     type: typeof NEXT_SLIDE;
     payload: NextSlidePayload;
 };
-export declare const nextSlide: (dispatch: Dispatch, getState: () => StoreState) => Promise<NextSlideAction>;
+export declare const nextSlide: (dispatch: Dispatch, getState: () => StoreState) => Promise<void>;
 export {};

package/es/actions/ui/next-slide.js

@@ -2,6 +2,7 @@ import filter from 'lodash/fp/filter';
 import get from 'lodash/fp/get';
 import { fetchEndRank } from '../api/fetch-rank';
 import { fetchSlidesToReviewBySkillRef } from '../api/fetch-slides-to-review-by-skill-ref';
+import { fetchPropsVideo } from '../api/fetch-video-props';
 export const NEXT_SLIDE = '@@slide/NEXT_SLIDE';
 export const nextSlide = async (dispatch, getState) => {
     const state = getState();
@@ -23,6 +24,10 @@ export const nextSlide = async (dispatch, getState) => {
     if (nextSlideRef === 'successExitNode') {
         await dispatch(fetchEndRank);
         await dispatch(fetchSlidesToReviewBySkillRef);
+        dispatch(action);
+    }
+    else {
+        dispatch(action);
+        await dispatch(fetchPropsVideo(payload.nextSlideRef));
     }
-    return dispatch(action);
 };

package/es/actions/ui/slides.d.ts

@@ -1,3 +1,4 @@
+import type { Dispatch } from 'redux';
 import type { SlideFromAPI } from '@coorpacademy/review-services';
 import { AnswerUI } from '../../types/slides';
 declare type SlideUIAnimations = 'unstack' | 'restack';
@@ -16,5 +17,5 @@ export declare type SetCurrentSlideAction = {
     type: typeof SET_CURRENT_SLIDE;
     payload: SlideFromAPI;
 };
-export declare const setCurrentSlide: (payload: SlideFromAPI) => SetCurrentSlideAction;
+export declare const setCurrentSlide: (slideFromAPI: SlideFromAPI) => (dispatch: Dispatch) => Promise<void>;
 export {};

package/es/actions/ui/slides.js

@@ -1,5 +1,10 @@
+import { fetchPropsVideo } from '../api/fetch-video-props';
 export const SET_CURRENT_SLIDE = '@@slide/SET_CURRENT_SLIDE';
-export const setCurrentSlide = (payload) => ({
-    type: SET_CURRENT_SLIDE,
-    payload
-});
+export const setCurrentSlide = (slideFromAPI) => async (dispatch) => {
+    dispatch({
+        type: SET_CURRENT_SLIDE,
+        payload: slideFromAPI
+    });
+    await dispatch(fetchPropsVideo(slideFromAPI._id));
+    return;
+};

package/es/reducers/data/index.d.ts

@@ -4,6 +4,7 @@ import { SlidesState } from './slides';
 import { TokenState } from './token';
 import { RankState } from './rank';
 import { CurrentSkillState } from './current-skill';
+import { VideoPropsState } from './videos';
 export declare type DataState = {
     corrections: CorrectionsState;
     progression: ProgressionState;
@@ -11,6 +12,7 @@ export declare type DataState = {
     token: TokenState;
     rank: RankState;
     currentSkill: CurrentSkillState;
+    videos: VideoPropsState;
 };
 declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     corrections: CorrectionsState;
@@ -19,5 +21,6 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     token: string;
     rank: RankState;
     currentSkill: CurrentSkillState;
-}>, import("../../actions/api/fetch-skill").ReceivedSkill | import("../../actions/api/post-progression").FetchProgression | import("../../actions/api/post-progression").ReceivedProgression | import("./corrections").CorrectionsAction | import("../../actions/api/fetch-rank").RankAction | import("../../actions/api/post-answer").PostAnswerSuccessAction | import("./slides").SlidesAction | import("../../actions/data/token").StoreToken>;
+    videos: VideoPropsState;
+}>, import("../../actions/api/fetch-video-props").SetVideoPropsAction | import("../../actions/api/fetch-video-props").ShowVideoAction | import("../../actions/ui/slides").SetCurrentSlideAction | import("../../actions/api/fetch-skill").ReceivedSkill | import("../../actions/api/post-progression").FetchProgression | import("../../actions/api/post-progression").ReceivedProgression | import("./corrections").CorrectionsAction | import("../../actions/api/fetch-rank").RankAction | import("../../actions/api/post-answer").PostAnswerSuccessAction | import("./slides").SlidesAction | import("../../actions/data/token").StoreToken | import("../../actions/ui/next-slide").NextSlideAction>;
 export default _default;

package/es/reducers/data/index.js

@@ -5,11 +5,13 @@ import slides from './slides';
 import token from './token';
 import rank from './rank';
 import currentSkill from './current-skill';
+import videos from './videos';
 export default combineReducers({
     corrections,
     progression,
     slides,
     token,
     rank,
-    currentSkill
+    currentSkill,
+    videos
 });

package/es/reducers/data/videos.d.ts

@@ -0,0 +1,8 @@
+import { VideoPropsForPlayer } from '../../types/common';
+import { SetVideoPropsAction, ShowVideoAction } from '../../actions/api/fetch-video-props';
+import { NextSlideAction } from '../../actions/ui/next-slide';
+import { SetCurrentSlideAction } from '../../actions/ui/slides';
+export declare type VideoPropsState = Record<string, VideoPropsForPlayer>;
+export declare const initialState: VideoPropsState;
+declare const reducer: (state: VideoPropsState | undefined, action: SetVideoPropsAction | NextSlideAction | SetCurrentSlideAction | ShowVideoAction) => VideoPropsState;
+export default reducer;

package/es/reducers/data/videos.js

@@ -0,0 +1,33 @@
+import { get, set } from 'lodash/fp';
+import { SET_VIDEO_PROPS, SHOW_VIDEO } from '../../actions/api/fetch-video-props';
+import { NEXT_SLIDE } from '../../actions/ui/next-slide';
+export const initialState = {};
+const reducer = (
+// eslint-disable-next-line default-param-last
+state = initialState, action) => {
+    switch (action.type) {
+        case SET_VIDEO_PROPS: {
+            const { slideId, props } = action.payload;
+            return set(slideId, props, state);
+        }
+        case NEXT_SLIDE: {
+            const { currentSlideRef } = action.payload;
+            const isMediaVideo = get(currentSlideRef, state);
+            if (isMediaVideo) {
+                return set([currentSlideRef, 'src', '0', 'loading'], true, state);
+            }
+            return state;
+        }
+        case SHOW_VIDEO: {
+            const { slideId } = action.payload;
+            const isMediaVideo = get(slideId, state);
+            if (isMediaVideo) {
+                return set([slideId, 'src', '0', 'loading'], false, state);
+            }
+            return state;
+        }
+        default:
+            return state;
+    }
+};
+export default reducer;

package/es/reducers/index.d.ts

@@ -12,6 +12,7 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         token: string;
         rank: import("./data/rank").RankState;
         currentSkill: import("./data/current-skill").CurrentSkillState;
+        videos: import("./data/videos").VideoPropsState;
     }>;
     ui: import("redux").CombinedState<{
         currentSlideRef: string;
@@ -23,7 +24,7 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         showButtonRevising: boolean;
         showCongrats: boolean;
     }>;
-}>, import("../actions/ui/slides").SetCurrentSlideAction | import("../actions/api/fetch-skill").ReceivedSkill | import("../actions/api/post-progression").FetchProgression | import("../actions/api/post-progression").ReceivedProgression | import("./data/corrections").CorrectionsAction | import("../actions/api/fetch-rank").RankAction | import("../actions/api/post-answer").PostAnswerRequestAction | import("../actions/api/post-answer").PostAnswerSuccessAction | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/api/fetch-slides-to-review-by-skill-ref").ReceivedSlidesToReviewBySkillRef | import("../actions/ui/next-slide").NextSlideAction | import("../actions/ui/navigation").NavigateToAction | import("../actions/ui/navigation").NavigateBackAction | import("../actions/ui/answers").EditAnswerAction | {
+}>, import("../actions/api/fetch-video-props").SetVideoPropsAction | import("../actions/api/fetch-video-props").ShowVideoAction | import("../actions/ui/slides").SetCurrentSlideAction | import("../actions/api/fetch-skill").ReceivedSkill | import("../actions/api/post-progression").FetchProgression | import("../actions/api/post-progression").ReceivedProgression | import("./data/corrections").CorrectionsAction | import("../actions/api/fetch-rank").RankAction | import("../actions/api/post-answer").PostAnswerRequestAction | import("../actions/api/post-answer").PostAnswerSuccessAction | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/api/fetch-slides-to-review-by-skill-ref").ReceivedSlidesToReviewBySkillRef | import("../actions/ui/next-slide").NextSlideAction | import("../actions/ui/navigation").NavigateToAction | import("../actions/ui/navigation").NavigateBackAction | import("../actions/ui/answers").EditAnswerAction | {
     type: "@@ui/OPEN_POPIN";
 } | {
     type: "@@ui/CLOSE_POPIN";

package/es/types/common.d.ts

@@ -1,4 +1,4 @@
-import type { Services, VideoMedia, VideoPropsForPlayer } from '@coorpacademy/review-services';
+import type { Services, VideoMedia } from '@coorpacademy/review-services';
 export declare type WithRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };
@@ -11,6 +11,23 @@ export declare type Skin = {
         primary: string;
     };
 };
+declare type VideoSrcPropsForPlayer = {
+    mimeType: string;
+    videoId: string;
+    jwpOptions: unknown;
+    loading?: boolean;
+    type: string;
+};
+export declare type VideoPropsForPlayer = {
+    type: string;
+    src: VideoSrcPropsForPlayer[];
+};
+export declare type MediaPropsForPlayer = {
+    type: 'img' | 'audio';
+    url: string;
+    _id: string;
+    mimeType: string;
+};
 export declare type ConnectedOptions = {
     translate: Translate;
     onQuitClick: () => void;
@@ -32,3 +49,4 @@ export declare type ThunkOptions = {
 export declare type Options = {
     services: Services;
 };
+export {};

package/es/views/slides/index.js

@@ -62,6 +62,28 @@ const getCurrentSlideRef = (state) => {
 const isLastSlideAnswered = (slidesRef, slideRef) => {
     return last(slidesRef) === slideRef;
 };
+const getSlideMedia = (state, slideFromAPI) => {
+    const media = get(['question', 'medias', '0'], slideFromAPI);
+    if (!media)
+        return;
+    const { type } = media;
+    const resource = get(['src', '0'], media);
+    switch (type) {
+        case 'img':
+        case 'audio': {
+            const mediaProps = {
+                ...resource,
+                type,
+                url: get('url', resource)
+            };
+            return mediaProps;
+        }
+        case 'video': {
+            const videoProps = get(['data', 'videos', slideFromAPI._id, 'src', '0'], state);
+            return videoProps;
+        }
+    }
+};
 const buildStackSlides = (state, dispatch, options) => {
     const { translate } = options;
     const currentSlideRef = getCurrentSlideRef(state);
@@ -84,7 +106,8 @@ const buildStackSlides = (state, dispatch, options) => {
         if (!slideFromAPI)
             return set(index, { ...uiSlide, position }, acc);
         const answers = getOr([], ['ui', 'answers', slideRef], state);
-        const { questionText, answerUI } = mapApiSlideToUi(dispatch, translate)(slideFromAPI, answers);
+        const media = getSlideMedia(state, slideFromAPI);
+        const { questionText, answerUI } = mapApiSlideToUi(dispatch, translate)(slideFromAPI, answers, media);
         const { title: parentContentTitle, type: parentContentType } = slideFromAPI.parentContentTitle;
         const isCurrentSlideRef = currentSlideRef === slideRef;
         const slideUI = get(['ui', 'slide', slideRef], state);

package/es/views/slides/map-api-slide-to-ui.d.ts

@@ -1,9 +1,9 @@
 import { Dispatch } from 'redux';
 import type { Question, SlideFromAPI } from '@coorpacademy/review-services';
 import { AnswerUI } from '../../types/slides';
-import { Translate } from '../../types/common';
+import { MediaPropsForPlayer, Translate, VideoPropsForPlayer } from '../../types/common';
 export declare const getQuestionType: (question: Question) => Question['type'];
-export declare const mapApiSlideToUi: (dispatch: Dispatch, translate: Translate) => (slide: SlideFromAPI, answers: string[]) => {
+export declare const mapApiSlideToUi: (dispatch: Dispatch, translate: Translate) => (slide: SlideFromAPI, answers: string[], media: MediaPropsForPlayer | VideoPropsForPlayer | void) => {
     questionText: string;
     answerUI: AnswerUI;
 };

package/es/views/slides/map-api-slide-to-ui.js

@@ -163,30 +163,14 @@ const getAnswerUIModel = (question, answers, dispatch, translate) => {
             throw new Error(`${type} is not an handled question.type`);
     }
 };
-const getMedia = (media) => {
-    if (!media)
-        return;
-    const { type } = media;
-    const resource = get('src.0', media);
-    switch (type) {
-        case 'img':
-        case 'audio':
-            return {
-                ...resource,
-                type,
-                url: get('url', resource)
-            };
-    }
-};
-export const mapApiSlideToUi = (dispatch, translate) => (slide, answers) => {
+export const mapApiSlideToUi = (dispatch, translate) => (slide, answers, media) => {
     const questionText = getOr('', 'question.header', slide);
-    const media = get('question.medias.0', slide);
     return {
         questionText,
         answerUI: {
             model: getAnswerUIModel(slide.question, answers, dispatch, translate),
             help: getHelp(slide),
-            media: getMedia(media)
+            media
         }
     };
 };

package/lib/actions/api/fetch-video-props.d.ts

@@ -0,0 +1,22 @@
+import type { Dispatch } from 'redux';
+import type { ThunkOptions, VideoPropsForPlayer } from '../../types/common';
+import type { StoreState } from '../../reducers';
+export declare const SET_VIDEO_PROPS: "@@slide/SET_VIDEO_PROPS";
+export declare const SHOW_VIDEO: "@@slide/SHOW_VIDEO";
+export declare type VideoPropsPayload = {
+    slideId: string;
+    props: VideoPropsForPlayer;
+};
+export declare type SetVideoPropsAction = {
+    type: typeof SET_VIDEO_PROPS;
+    payload: VideoPropsPayload;
+};
+export declare const setVideoProps: (payload: VideoPropsPayload) => SetVideoPropsAction;
+export declare type ShowVideoAction = {
+    type: typeof SHOW_VIDEO;
+    payload: {
+        slideId: string;
+    };
+};
+export declare const showVideo: (slideId: string) => ShowVideoAction;
+export declare const fetchPropsVideo: (slideId: string) => (dispatch: Dispatch, getState: () => StoreState, { appendVideoOptions }: ThunkOptions) => Promise<void>;

package/lib/actions/api/fetch-video-props.js

@@ -0,0 +1,43 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.fetchPropsVideo = exports.showVideo = exports.setVideoProps = exports.SHOW_VIDEO = exports.SET_VIDEO_PROPS = void 0;
+const get_1 = __importDefault(require("lodash/fp/get"));
+exports.SET_VIDEO_PROPS = '@@slide/SET_VIDEO_PROPS';
+exports.SHOW_VIDEO = '@@slide/SHOW_VIDEO';
+const setVideoProps = (payload) => ({
+    type: exports.SET_VIDEO_PROPS,
+    payload
+});
+exports.setVideoProps = setVideoProps;
+const showVideo = (slideId) => ({
+    type: exports.SHOW_VIDEO,
+    payload: { slideId }
+});
+exports.showVideo = showVideo;
+const fetchPropsVideo = (slideId) => async (dispatch, getState, { appendVideoOptions }) => {
+    const state = getState();
+    const slideFromAPI = (0, get_1.default)(['data', 'slides', slideId], state);
+    if (!slideFromAPI) {
+        return;
+    }
+    const slideMedia = (0, get_1.default)(['question', 'medias', '0'], slideFromAPI);
+    if (slideMedia && slideMedia.type === 'video') {
+        const videoProps = (0, get_1.default)(['data', 'videos', slideId], state);
+        if (videoProps) {
+            dispatch((0, exports.showVideo)(slideId));
+            return;
+        }
+        const props = await appendVideoOptions(slideMedia);
+        props.src[0].loading = false; // set to false to not show it until the next slide is unstack
+        props.src[0].type = 'video';
+        dispatch((0, exports.setVideoProps)({
+            slideId,
+            props
+        }));
+    }
+    return;
+};
+exports.fetchPropsVideo = fetchPropsVideo;

package/lib/actions/ui/next-slide.d.ts

@@ -12,5 +12,5 @@ export declare type NextSlideAction = {
     type: typeof NEXT_SLIDE;
     payload: NextSlidePayload;
 };
-export declare const nextSlide: (dispatch: Dispatch, getState: () => StoreState) => Promise<NextSlideAction>;
+export declare const nextSlide: (dispatch: Dispatch, getState: () => StoreState) => Promise<void>;
 export {};

package/lib/actions/ui/next-slide.js

@@ -8,6 +8,7 @@ const filter_1 = __importDefault(require("lodash/fp/filter"));
 const get_1 = __importDefault(require("lodash/fp/get"));
 const fetch_rank_1 = require("../api/fetch-rank");
 const fetch_slides_to_review_by_skill_ref_1 = require("../api/fetch-slides-to-review-by-skill-ref");
+const fetch_video_props_1 = require("../api/fetch-video-props");
 exports.NEXT_SLIDE = '@@slide/NEXT_SLIDE';
 const nextSlide = async (dispatch, getState) => {
     const state = getState();
@@ -29,7 +30,11 @@ const nextSlide = async (dispatch, getState) => {
     if (nextSlideRef === 'successExitNode') {
         await dispatch(fetch_rank_1.fetchEndRank);
         await dispatch(fetch_slides_to_review_by_skill_ref_1.fetchSlidesToReviewBySkillRef);
+        dispatch(action);
+    }
+    else {
+        dispatch(action);
+        await dispatch((0, fetch_video_props_1.fetchPropsVideo)(payload.nextSlideRef));
     }
-    return dispatch(action);
 };
 exports.nextSlide = nextSlide;

package/lib/actions/ui/slides.d.ts

@@ -1,3 +1,4 @@
+import type { Dispatch } from 'redux';
 import type { SlideFromAPI } from '@coorpacademy/review-services';
 import { AnswerUI } from '../../types/slides';
 declare type SlideUIAnimations = 'unstack' | 'restack';
@@ -16,5 +17,5 @@ export declare type SetCurrentSlideAction = {
     type: typeof SET_CURRENT_SLIDE;
     payload: SlideFromAPI;
 };
-export declare const setCurrentSlide: (payload: SlideFromAPI) => SetCurrentSlideAction;
+export declare const setCurrentSlide: (slideFromAPI: SlideFromAPI) => (dispatch: Dispatch) => Promise<void>;
 export {};

package/lib/actions/ui/slides.js

@@ -1,9 +1,14 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setCurrentSlide = exports.SET_CURRENT_SLIDE = void 0;
+const fetch_video_props_1 = require("../api/fetch-video-props");
 exports.SET_CURRENT_SLIDE = '@@slide/SET_CURRENT_SLIDE';
-const setCurrentSlide = (payload) => ({
-    type: exports.SET_CURRENT_SLIDE,
-    payload
-});
+const setCurrentSlide = (slideFromAPI) => async (dispatch) => {
+    dispatch({
+        type: exports.SET_CURRENT_SLIDE,
+        payload: slideFromAPI
+    });
+    await dispatch((0, fetch_video_props_1.fetchPropsVideo)(slideFromAPI._id));
+    return;
+};
 exports.setCurrentSlide = setCurrentSlide;

package/lib/reducers/data/index.d.ts

@@ -4,6 +4,7 @@ import { SlidesState } from './slides';
 import { TokenState } from './token';
 import { RankState } from './rank';
 import { CurrentSkillState } from './current-skill';
+import { VideoPropsState } from './videos';
 export declare type DataState = {
     corrections: CorrectionsState;
     progression: ProgressionState;
@@ -11,6 +12,7 @@ export declare type DataState = {
     token: TokenState;
     rank: RankState;
     currentSkill: CurrentSkillState;
+    videos: VideoPropsState;
 };
 declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     corrections: CorrectionsState;
@@ -19,5 +21,6 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
     token: string;
     rank: RankState;
     currentSkill: CurrentSkillState;
-}>, import("../../actions/api/fetch-skill").ReceivedSkill | import("../../actions/api/post-progression").FetchProgression | import("../../actions/api/post-progression").ReceivedProgression | import("./corrections").CorrectionsAction | import("../../actions/api/fetch-rank").RankAction | import("../../actions/api/post-answer").PostAnswerSuccessAction | import("./slides").SlidesAction | import("../../actions/data/token").StoreToken>;
+    videos: VideoPropsState;
+}>, import("../../actions/api/fetch-video-props").SetVideoPropsAction | import("../../actions/api/fetch-video-props").ShowVideoAction | import("../../actions/ui/slides").SetCurrentSlideAction | import("../../actions/api/fetch-skill").ReceivedSkill | import("../../actions/api/post-progression").FetchProgression | import("../../actions/api/post-progression").ReceivedProgression | import("./corrections").CorrectionsAction | import("../../actions/api/fetch-rank").RankAction | import("../../actions/api/post-answer").PostAnswerSuccessAction | import("./slides").SlidesAction | import("../../actions/data/token").StoreToken | import("../../actions/ui/next-slide").NextSlideAction>;
 export default _default;

package/lib/reducers/data/index.js

@@ -10,11 +10,13 @@ const slides_1 = __importDefault(require("./slides"));
 const token_1 = __importDefault(require("./token"));
 const rank_1 = __importDefault(require("./rank"));
 const current_skill_1 = __importDefault(require("./current-skill"));
+const videos_1 = __importDefault(require("./videos"));
 exports.default = (0, redux_1.combineReducers)({
     corrections: corrections_1.default,
     progression: progression_1.default,
     slides: slides_1.default,
     token: token_1.default,
     rank: rank_1.default,
-    currentSkill: current_skill_1.default
+    currentSkill: current_skill_1.default,
+    videos: videos_1.default
 });

package/lib/reducers/data/videos.d.ts

@@ -0,0 +1,8 @@
+import { VideoPropsForPlayer } from '../../types/common';
+import { SetVideoPropsAction, ShowVideoAction } from '../../actions/api/fetch-video-props';
+import { NextSlideAction } from '../../actions/ui/next-slide';
+import { SetCurrentSlideAction } from '../../actions/ui/slides';
+export declare type VideoPropsState = Record<string, VideoPropsForPlayer>;
+export declare const initialState: VideoPropsState;
+declare const reducer: (state: VideoPropsState | undefined, action: SetVideoPropsAction | NextSlideAction | SetCurrentSlideAction | ShowVideoAction) => VideoPropsState;
+export default reducer;

package/lib/reducers/data/videos.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.initialState = void 0;
+const fp_1 = require("lodash/fp");
+const fetch_video_props_1 = require("../../actions/api/fetch-video-props");
+const next_slide_1 = require("../../actions/ui/next-slide");
+exports.initialState = {};
+const reducer = (
+// eslint-disable-next-line default-param-last
+state = exports.initialState, action) => {
+    switch (action.type) {
+        case fetch_video_props_1.SET_VIDEO_PROPS: {
+            const { slideId, props } = action.payload;
+            return (0, fp_1.set)(slideId, props, state);
+        }
+        case next_slide_1.NEXT_SLIDE: {
+            const { currentSlideRef } = action.payload;
+            const isMediaVideo = (0, fp_1.get)(currentSlideRef, state);
+            if (isMediaVideo) {
+                return (0, fp_1.set)([currentSlideRef, 'src', '0', 'loading'], true, state);
+            }
+            return state;
+        }
+        case fetch_video_props_1.SHOW_VIDEO: {
+            const { slideId } = action.payload;
+            const isMediaVideo = (0, fp_1.get)(slideId, state);
+            if (isMediaVideo) {
+                return (0, fp_1.set)([slideId, 'src', '0', 'loading'], false, state);
+            }
+            return state;
+        }
+        default:
+            return state;
+    }
+};
+exports.default = reducer;

package/lib/reducers/index.d.ts

@@ -12,6 +12,7 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         token: string;
         rank: import("./data/rank").RankState;
         currentSkill: import("./data/current-skill").CurrentSkillState;
+        videos: import("./data/videos").VideoPropsState;
     }>;
     ui: import("redux").CombinedState<{
         currentSlideRef: string;
@@ -23,7 +24,7 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         showButtonRevising: boolean;
         showCongrats: boolean;
     }>;
-}>, import("../actions/ui/slides").SetCurrentSlideAction | import("../actions/api/fetch-skill").ReceivedSkill | import("../actions/api/post-progression").FetchProgression | import("../actions/api/post-progression").ReceivedProgression | import("./data/corrections").CorrectionsAction | import("../actions/api/fetch-rank").RankAction | import("../actions/api/post-answer").PostAnswerRequestAction | import("../actions/api/post-answer").PostAnswerSuccessAction | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/api/fetch-slides-to-review-by-skill-ref").ReceivedSlidesToReviewBySkillRef | import("../actions/ui/next-slide").NextSlideAction | import("../actions/ui/navigation").NavigateToAction | import("../actions/ui/navigation").NavigateBackAction | import("../actions/ui/answers").EditAnswerAction | {
+}>, import("../actions/api/fetch-video-props").SetVideoPropsAction | import("../actions/api/fetch-video-props").ShowVideoAction | import("../actions/ui/slides").SetCurrentSlideAction | import("../actions/api/fetch-skill").ReceivedSkill | import("../actions/api/post-progression").FetchProgression | import("../actions/api/post-progression").ReceivedProgression | import("./data/corrections").CorrectionsAction | import("../actions/api/fetch-rank").RankAction | import("../actions/api/post-answer").PostAnswerRequestAction | import("../actions/api/post-answer").PostAnswerSuccessAction | import("./data/slides").SlidesAction | import("../actions/data/token").StoreToken | import("../actions/api/fetch-slides-to-review-by-skill-ref").ReceivedSlidesToReviewBySkillRef | import("../actions/ui/next-slide").NextSlideAction | import("../actions/ui/navigation").NavigateToAction | import("../actions/ui/navigation").NavigateBackAction | import("../actions/ui/answers").EditAnswerAction | {
     type: "@@ui/OPEN_POPIN";
 } | {
     type: "@@ui/CLOSE_POPIN";

package/lib/types/common.d.ts

@@ -1,4 +1,4 @@
-import type { Services, VideoMedia, VideoPropsForPlayer } from '@coorpacademy/review-services';
+import type { Services, VideoMedia } from '@coorpacademy/review-services';
 export declare type WithRequired<T, K extends keyof T> = T & {
     [P in K]-?: T[P];
 };
@@ -11,6 +11,23 @@ export declare type Skin = {
         primary: string;
     };
 };
+declare type VideoSrcPropsForPlayer = {
+    mimeType: string;
+    videoId: string;
+    jwpOptions: unknown;
+    loading?: boolean;
+    type: string;
+};
+export declare type VideoPropsForPlayer = {
+    type: string;
+    src: VideoSrcPropsForPlayer[];
+};
+export declare type MediaPropsForPlayer = {
+    type: 'img' | 'audio';
+    url: string;
+    _id: string;
+    mimeType: string;
+};
 export declare type ConnectedOptions = {
     translate: Translate;
     onQuitClick: () => void;
@@ -32,3 +49,4 @@ export declare type ThunkOptions = {
 export declare type Options = {
     services: Services;
 };
+export {};

package/lib/views/slides/index.js

@@ -68,6 +68,28 @@ const getCurrentSlideRef = (state) => {
 const isLastSlideAnswered = (slidesRef, slideRef) => {
     return (0, last_1.default)(slidesRef) === slideRef;
 };
+const getSlideMedia = (state, slideFromAPI) => {
+    const media = (0, get_1.default)(['question', 'medias', '0'], slideFromAPI);
+    if (!media)
+        return;
+    const { type } = media;
+    const resource = (0, get_1.default)(['src', '0'], media);
+    switch (type) {
+        case 'img':
+        case 'audio': {
+            const mediaProps = {
+                ...resource,
+                type,
+                url: (0, get_1.default)('url', resource)
+            };
+            return mediaProps;
+        }
+        case 'video': {
+            const videoProps = (0, get_1.default)(['data', 'videos', slideFromAPI._id, 'src', '0'], state);
+            return videoProps;
+        }
+    }
+};
 const buildStackSlides = (state, dispatch, options) => {
     const { translate } = options;
     const currentSlideRef = getCurrentSlideRef(state);
@@ -90,7 +112,8 @@ const buildStackSlides = (state, dispatch, options) => {
         if (!slideFromAPI)
             return (0, set_1.default)(index, { ...uiSlide, position }, acc);
         const answers = (0, getOr_1.default)([], ['ui', 'answers', slideRef], state);
-        const { questionText, answerUI } = (0, map_api_slide_to_ui_1.mapApiSlideToUi)(dispatch, translate)(slideFromAPI, answers);
+        const media = getSlideMedia(state, slideFromAPI);
+        const { questionText, answerUI } = (0, map_api_slide_to_ui_1.mapApiSlideToUi)(dispatch, translate)(slideFromAPI, answers, media);
         const { title: parentContentTitle, type: parentContentType } = slideFromAPI.parentContentTitle;
         const isCurrentSlideRef = currentSlideRef === slideRef;
         const slideUI = (0, get_1.default)(['ui', 'slide', slideRef], state);

package/lib/views/slides/map-api-slide-to-ui.d.ts

@@ -1,9 +1,9 @@
 import { Dispatch } from 'redux';
 import type { Question, SlideFromAPI } from '@coorpacademy/review-services';
 import { AnswerUI } from '../../types/slides';
-import { Translate } from '../../types/common';
+import { MediaPropsForPlayer, Translate, VideoPropsForPlayer } from '../../types/common';
 export declare const getQuestionType: (question: Question) => Question['type'];
-export declare const mapApiSlideToUi: (dispatch: Dispatch, translate: Translate) => (slide: SlideFromAPI, answers: string[]) => {
+export declare const mapApiSlideToUi: (dispatch: Dispatch, translate: Translate) => (slide: SlideFromAPI, answers: string[], media: MediaPropsForPlayer | VideoPropsForPlayer | void) => {
     questionText: string;
     answerUI: AnswerUI;
 };

package/lib/views/slides/map-api-slide-to-ui.js

@@ -167,30 +167,14 @@ const getAnswerUIModel = (question, answers, dispatch, translate) => {
             throw new Error(`${type} is not an handled question.type`);
     }
 };
-const getMedia = (media) => {
-    if (!media)
-        return;
-    const { type } = media;
-    const resource = (0, fp_1.get)('src.0', media);
-    switch (type) {
-        case 'img':
-        case 'audio':
-            return {
-                ...resource,
-                type,
-                url: (0, fp_1.get)('url', resource)
-            };
-    }
-};
-const mapApiSlideToUi = (dispatch, translate) => (slide, answers) => {
+const mapApiSlideToUi = (dispatch, translate) => (slide, answers, media) => {
     const questionText = (0, fp_1.getOr)('', 'question.header', slide);
-    const media = (0, fp_1.get)('question.medias.0', slide);
     return {
         questionText,
         answerUI: {
             model: getAnswerUIModel(slide.question, answers, dispatch, translate),
             help: getHelp(slide),
-            media: getMedia(media)
+            media
         }
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/app-review",
-  "version": "0.18.2-test-latest.2+f492cfc58",
+  "version": "0.19.0",
   "description": "",
   "engines": {
     "node": ">=16.15.0"
@@ -35,11 +35,11 @@
   "main": "lib/index.js",
   "module": "es/index.js",
   "dependencies": {
-    "@coorpacademy/components": "11.7.3",
+    "@coorpacademy/components": "11.8.0",
     "@coorpacademy/progression-engine": "11.5.3",
     "@coorpacademy/redux-task": "1.1.6",
-    "@coorpacademy/review-services": "1.3.2",
-    "@coorpacademy/review-services-mocks": "1.3.2",
+    "@coorpacademy/review-services": "1.3.3",
+    "@coorpacademy/review-services-mocks": "1.3.3",
     "@coorpacademy/translate": "6.2.0",
     "cross-fetch": "^3.1.5",
     "jwt-decode": "^3.1.2",
@@ -74,5 +74,5 @@
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1"
   },
-  "gitHead": "f492cfc5838281dd911a2f9d1647dbafc125504f"
+  "gitHead": "f4e5ea7a4fe865d111ba8d2de620c9f763ec5edd"
 }

package/locales/.mtslconfig.json

@@ -1 +0,0 @@
-{"ignore_dirs":[]}