jan/openreplay
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(player): remove redux & singletone

Browse source
This commit is contained in:
Alex Kaminskii 2022-11-29 15:08:06 +01:00
parent 9bf4f7d99b
commit d15779076e
8 changed files with 1 additions and 229 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

91
frontend/app/player/_singletone.ts
View file

@ -1,91 +0,0 @@
import WebPlayer from './web/WebPlayer';
import reduxStore, {update, cleanStore} from './_store';
import type { State as MMState } from './web/MessageManager'
import type { State as PState } from './player/Player'
import type { Store } from './common/types'
const myStore: Store<PState & MMState> = {
get() {
return reduxStore.getState()
},
update(s) {
update(s)
}
}
let instance: WebPlayer | null = null;
export function init(session, config, live = false) {
instance = new WebPlayer(myStore, session, config, live);
}
export function clean() {
if (instance === null) return;
instance.clean();
cleanStore();
instance = null;
}
const initCheck = (method) => (...args) => {
if (instance === null) {
console.error("Player method called before Player have been initialized.");
return;
}
return method(...args);
}
export const jump = initCheck((...args) => instance.jump(...args));
export const togglePlay = initCheck((...args) => instance.togglePlay(...args));
export const pause = initCheck((...args) => instance.pause(...args));
export const toggleSkip = initCheck((...args) => instance.toggleSkip(...args));
export const toggleSkipToIssue = initCheck((...args) => instance.toggleSkipToIssue(...args));
export const toggleAutoplay = initCheck((...args) => instance.toggleAutoplay(...args));
export const toggleSpeed = initCheck((...args) => instance.toggleSpeed(...args));
export const toggleEvents = initCheck((...args) => instance.toggleEvents(...args));
export const speedUp = initCheck((...args) => instance.speedUp(...args));
export const speedDown = initCheck((...args) => instance.speedDown(...args));
export const attach = initCheck((...args) => instance.attach(...args));
export const markElement = initCheck((...args) => instance.mark(...args));
export const scale = initCheck(() => instance.scale());
/** @type {WebPlayer.toggleTimetravel} */
export const toggleTimetravel = initCheck((...args) => instance.toggleTimetravel(...args))
export const toggleInspectorMode = initCheck((...args) => instance.toggleInspectorMode(...args));
export const markTargets = initCheck((...args) => instance.markTargets(...args))
export const activeTarget =initCheck((...args) => instance.setActiveTarget(...args))
export const jumpToLive = initCheck((...args) => instance.jumpToLive(...args))
export const toggleUserName = initCheck((...args) => instance.toggleUserName(...args))
// !not related to player, but rather to the OR platform.
export const injectNotes = () => {} // initCheck((...args) => instance.injectNotes(...args))
export const filterOutNote = () => {} //initCheck((...args) => instance.filterOutNote(...args))
/** @type {Player.assistManager.call} */
export const callPeer = initCheck((...args) => instance.assistManager.call(...args))
/** @type {Player.assistManager.setCallArgs} */
export const setCallArgs = initCheck((...args) => instance.assistManager.setCallArgs(...args))
/** @type {Player.assistManager.initiateCallEnd} */
export const initiateCallEnd = initCheck((...args) => instance.assistManager.initiateCallEnd(...args))
export const requestReleaseRemoteControl = initCheck((...args) => instance.assistManager.requestReleaseRemoteControl(...args))
export const releaseRemoteControl = initCheck((...args) => instance.assistManager.releaseRemoteControl(...args))
/** @type {Player.assistManager.toggleVideoLocalStream} */
export const toggleVideoLocalStream = initCheck((...args) => instance.assistManager.toggleVideoLocalStream(...args))
export const toggleAnnotation = initCheck((...args) => instance.assistManager.toggleAnnotation(...args))
export const Controls = {
jump,
togglePlay,
pause,
toggleSkip,
toggleSkipToIssue,
toggleAutoplay,
toggleEvents,
toggleSpeed,
speedUp,
speedDown,
callPeer
}

24
frontend/app/player/_store/connector.js
View file

@ -1,24 +0,0 @@
import { connect, createProvider } from 'react-redux'
import store from './store';
const STORE_KEY = 'playerStore';
const PlayerProvider = createProvider(STORE_KEY);
PlayerProvider.defaultProps = { store };
function connectPlayer(
mapStateToProps,
mapDispatchToProps,
mergeProps,
options = {}
) {
options.storeKey = STORE_KEY
return connect(
mapStateToProps,
mapDispatchToProps,
mergeProps,
options
)
}
export { PlayerProvider, connectPlayer };

38
frontend/app/player/_store/duck.js
View file

@ -1,38 +0,0 @@
import WebPlayer from '../web/WebPlayer'
const UPDATE = 'player/UPDATE';
const CLEAN = 'player/CLEAN';
const REDUX = 'player/REDUX';
const resetState = {
...WebPlayer.INITIAL_STATE,
initialized: false,
};
const initialState = {
...resetState,
}
export default (state = initialState, action = {}) => {
switch (action.type) {
case UPDATE:
return { ...state, ...action.state };
case CLEAN:
return { ...state, ...resetState };
default:
return state;
}
}
export function update(state = {}) {
return {
type: UPDATE,
state,
};
}
export function clean() {
return {
type: CLEAN
};
}

4
frontend/app/player/_store/index.js
View file

@ -1,4 +0,0 @@
export * from './connector';
export * from './store';
export * from './selectors';
export { default } from './store';

48
frontend/app/player/_store/selectors.js
View file

@ -1,48 +0,0 @@
const REDUX = "redux";
const MOBX = "mobx";
const VUEX = "vuex";
const NGRX = "ngrx";
const ZUSTAND = 'zustand';
const NONE = 0;
export const STORAGE_TYPES = {
REDUX,
MOBX,
VUEX,
NGRX,
ZUSTAND,
NONE,
};
export function selectStorageType(state) {
if (!state.reduxList) return NONE;
if (state.reduxList.length > 0) {
return REDUX;
} else if (state.vuexList.length > 0) {
return VUEX;
} else if (state.mobxList.length > 0) {
return MOBX;
} else if (state.ngrxList.length > 0) {
return NGRX;
} else if (state.zustandList.length > 0) {
return ZUSTAND;
}
return NONE;
}
export function selectStorageList(state) {
const key = selectStorageType(state);
if (key !== NONE) {
return state[`${key}List`] || [];
}
return [];
}
export function selectStorageListNow(state) {
const key = selectStorageType(state);
if (key !== NONE) {
return state[`${key}ListNow`] || [];
}
return [];
}

20
frontend/app/player/_store/store.js
View file

@ -1,20 +0,0 @@
import { createStore } from 'redux';
import reducer, {
update as updateAction,
clean as cleanAction,
} from './duck';
const store = createStore(reducer);
export const getState = store.getState.bind(store);
export function update(...args) {
const action = updateAction(...args)
return store.dispatch(action);
}
export function cleanStore() {
return store.dispatch(cleanAction());
}
export default store;

3
frontend/app/player/index.ts
View file

@ -6,6 +6,3 @@ export * from './common/types';
export * from './create';
export type { MarkedTarget } from './web/TargetMarker'
export * from './_store';
export * from './_singletone';

2
frontend/app/player/web/assist/AssistManager.ts
View file

@ -4,7 +4,7 @@ import type { MediaConnection } from 'peerjs';
import type MessageManager from '../MessageManager';
import appStore from 'App/store';
import type { LocalStream } from './LocalStream';
import type { Store } from '../../player/types'
import type { Store } from '../../common/types'
import AnnotationCanvas from './AnnotationCanvas';
import MStreamReader from '../messages/MStreamReader';
import JSONRawMessageReader from '../messages/JSONRawMessageReader'