changed youtube appearance

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;
   }
 }

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<string, IYoutubeInfo>;
 }>;
 
 const INITIAL_STATE: IPlayerState = {
   status: PLAYER_STATES.UNSET,
   file: null,
+  youtubes: {},
 };
 
 export default createReducer(INITIAL_STATE, PLAYER_HANDLERS);

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' && (<any>window).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__
     ? (<any>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))
 );