diff --git a/src/components/comment/CommentEmbedBlock/styles.scss b/src/components/comment/CommentEmbedBlock/styles.scss index 2ff6b40e..86a483fe 100644 --- a/src/components/comment/CommentEmbedBlock/styles.scss +++ b/src/components/comment/CommentEmbedBlock/styles.scss @@ -33,16 +33,19 @@ left: 0; width: 100%; height: 100%; - background: transparentize(black, 0.5); + background: transparentize(black, 0.5) 50% 50%; + background-size: cover; z-index: 15; border-radius: $radius; display: flex; align-items: center; justify-content: center; + text-align: center; + font: $font_16_medium; @include can_backdrop { - background: transparentize(black, 0.3); - backdrop-filter: blur(5px); + background: transparentize(black, 0.5) 50% 50%; + backdrop-filter: blur(3px); } } @@ -63,5 +66,7 @@ width: 100%; border-radius: $radius; position: relative; + background-position: 50% 50%; + background-size: cover; } } diff --git a/src/redux/player/reducer.ts b/src/redux/player/reducer.ts index e6f26872..70080b44 100644 --- a/src/redux/player/reducer.ts +++ b/src/redux/player/reducer.ts @@ -3,14 +3,21 @@ import { PLAYER_HANDLERS } from './handlers'; import { PLAYER_STATES } from './constants'; import { IFile } from '../types'; +interface IYoutubeInfo { + title: string; + thumbnail: string; +} + export type IPlayerState = Readonly<{ status: typeof PLAYER_STATES[keyof typeof PLAYER_STATES]; file: IFile; + youtubes: Record; }>; const INITIAL_STATE: IPlayerState = { status: PLAYER_STATES.UNSET, file: null, + youtubes: {}, }; export default createReducer(INITIAL_STATE, PLAYER_HANDLERS); diff --git a/src/redux/store.ts b/src/redux/store.ts index db90079d..ec4ca73a 100644 --- a/src/redux/store.ts +++ b/src/redux/store.ts @@ -37,7 +37,12 @@ const authPersistConfig: PersistConfig = { const flowPersistConfig: PersistConfig = { key: 'flow', whitelist: ['nodes', 'recent', 'updated'], - // whitelist: [], + storage, +}; + +const playerPersistConfig: PersistConfig = { + key: 'player', + whitelist: ['youtubes'], storage, }; @@ -54,17 +59,6 @@ export interface IState { export const sagaMiddleware = createSagaMiddleware(); export const history = createBrowserHistory(); -// history. -// history.listen(({ pathname }) => { -// if (pathname.match(/~([\wа-яА-Я]+)/)) { -// const [, username] = pathname.match(/~([\wа-яА-Я]+)/); -// window.postMessage({ type: 'username', username }, '*'); -// } - -// console.log({ pathname }); -// // if (pathname.match) -// }); - const composeEnhancers = typeof window === 'object' && (window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ? (window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({}) @@ -78,7 +72,7 @@ export const store = createStore( node: nodeReducer, uploads: uploadReducer, flow: persistReducer(flowPersistConfig, flowReducer), - player: playerReducer, + player: persistReducer(playerPersistConfig, playerReducer), }), composeEnhancers(applyMiddleware(routerMiddleware(history), sagaMiddleware)) );