fix(FEC-13830): Remove color tokens duplicates (#354)

1. Upd `playkit-common` repo version
2. Replace usage `playkit-ui` to ui from `kaltura-player`
3. Fix `dev` mode (replace events import)

package.json

@@ -12,13 +12,12 @@
     "url": "git+https://github.com/kaltura/playkit-js-navigation.git"
   },
   "dependencies": {
-    "@playkit-js/common": "1.5.8",
-    "@playkit-js/playkit-js-ui": "0.78.1-canary.0-a561b43",
-    "@playkit-js/ui-managers": "^1.5.2",
+    "@playkit-js/common": "1.5.12",
+    "@playkit-js/ui-managers": "1.5.2",
     "sanitize-html": "2.11.0"
   },
   "devDependencies": {
-    "@playkit-js/kaltura-player-js": "3.17.10-canary.0-7871537",
+    "@playkit-js/kaltura-player-js": "3.17.13-canary.0-23918fa",
     "@types/sanitize-html": "^2.11.0",
     "conventional-github-releaser": "3.1.3",
     "cross-env": "^7.0.3",
@@ -38,7 +37,7 @@
     "webpack-dev-server": "^4.9.0"
   },
   "peerDependencies": {
-    "@playkit-js/kaltura-player-js": "3.17.10-canary.0-7871537"
+    "@playkit-js/kaltura-player-js": "3.17.13-canary.0-23918fa"
   },
   "license": "AGPL-3.0",
   "files": [

src/components/close-button/index.tsx

@@ -1,8 +1,9 @@
 import {h} from 'preact';
-import {preacti18n} from '@playkit-js/playkit-js-ui';
 import * as styles from './close-button.scss';
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {icons} from '../icons';
+import {ui} from '@playkit-js/kaltura-player-js';
+const {preacti18n} = ui;
 const {Icon} = KalturaPlayer.ui.components;
 
 interface CloseButtonProps {

src/components/error/error.tsx

@@ -1,8 +1,9 @@
 import {h} from 'preact';
-import {preacti18n} from '@playkit-js/playkit-js-ui';
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import * as styles from './error.scss';
 import {ErrorIconSVG} from '../icons/error-icon';
+import {ui} from '@playkit-js/kaltura-player-js';
+const {preacti18n} = ui;
 
 const {withText, Text} = preacti18n;
 

src/components/loading/loading.tsx

@@ -1,7 +1,8 @@
 import {h} from 'preact';
-import {preacti18n} from '@playkit-js/playkit-js-ui';
 import * as styles from './loading.scss';
 import {LoaderIconSVG} from '../icons/loader-icon';
+import {ui} from '@playkit-js/kaltura-player-js';
+const {preacti18n} = ui;
 
 const {withText, Text} = preacti18n;
 

src/components/navigation-filter/navigation-filter.tsx

@@ -1,10 +1,10 @@
 import {h, Component, Fragment} from 'preact';
-import {ui} from '@playkit-js/kaltura-player-js';
-import {preacti18n} from '@playkit-js/playkit-js-ui';
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import * as styles from './navigation-filter.scss';
 import {ItemTypes, ItemTypesTranslates} from '../../types';
 import {IconsFactory} from '../navigation/icons/IconsFactory';
+import {ui} from '@playkit-js/kaltura-player-js';
+const {preacti18n} = ui;
 
 const {Tooltip} = ui.components;
 const {withText, Text} = preacti18n;

src/components/navigation-search/navigation-search.tsx

@@ -1,7 +1,8 @@
 import {h, Component} from 'preact';
-import {preacti18n} from '@playkit-js/playkit-js-ui';
 import {InputField} from '@playkit-js/common/dist/components/input-field';
 import {debounce} from '@playkit-js/common/dist/utils-common/utils';
+import {ui} from '@playkit-js/kaltura-player-js';
+const {preacti18n} = ui;
 
 const {withText, Text} = preacti18n;
 

src/components/navigation/autoscroll-button/autoscroll-button.tsx

@@ -1,8 +1,8 @@
 import {h} from 'preact';
-import {ui} from '@playkit-js/kaltura-player-js';
-import {preacti18n} from '@playkit-js/playkit-js-ui';
 import * as styles from './autoscroll-button.scss';
 import {A11yWrapper, OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
+import {ui} from '@playkit-js/kaltura-player-js';
+const {preacti18n} = ui;
 
 const {withText, Text} = preacti18n;
 const {Tooltip} = ui.components;

src/components/navigation/icons/EmptyList.tsx

@@ -1,6 +1,7 @@
 import {h} from 'preact';
-import {preacti18n} from '@playkit-js/playkit-js-ui';
 import * as styles from './EmptyList.scss';
+import {ui} from '@playkit-js/kaltura-player-js';
+const {preacti18n} = ui;
 
 const {withText, Text} = preacti18n;
 

src/components/navigation/icons/EmptyState.tsx

@@ -1,7 +1,8 @@
 import {h} from 'preact';
 import * as styles from './EmptyState.scss';
 import {ARROW_IMG, CURLY_LINE_IMG} from '../../constants/svgs';
-import {preacti18n} from '@playkit-js/playkit-js-ui';
+import {ui} from '@playkit-js/kaltura-player-js';
+const {preacti18n} = ui;
 const {withText, Text} = preacti18n;
 
 interface EmptyStateProps {

src/components/navigation/index.tsx

@@ -1,5 +1,4 @@
 import {h, Component} from 'preact';
-import {preacti18n, utils} from '@playkit-js/playkit-js-ui';
 import * as styles from './navigaton.scss';
 import {OnClick} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import {NavigationList, Props} from './navigation-list/NavigationList';
@@ -21,7 +20,9 @@ import {AutoscrollButton} from './autoscroll-button';
 import {ItemTypes, ItemData, HighlightedMap, ItemTypesTranslates} from '../../types';
 import {CloseButton} from '../close-button';
 import {ScreenReaderContext, ScreenReaderProvider} from '@playkit-js/common/dist/hoc/sr-wrapper';
-import { NavigationEvent } from "../../events";
+import { NavigationEvent } from "../../events/events";
+import {ui} from '@playkit-js/kaltura-player-js';
+const {preacti18n, utils} = ui;
 
 const {KeyMap} = utils;
 const {withText, Text} = preacti18n;

src/components/navigation/navigation-item/NavigationItem.tsx

@@ -1,11 +1,11 @@
 import {Component, h, Fragment} from 'preact';
-import {preacti18n} from '@playkit-js/playkit-js-ui';
-import {ui} from '@playkit-js/kaltura-player-js';
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
 import * as styles from './NavigationItem.scss';
 import {GroupTypes, ItemData} from '../../../types';
 import {IconsFactory} from '../icons/IconsFactory';
-import { NavigationEvent } from "../../../events";
+import { NavigationEvent } from "../../../events/events";
+import {ui} from '@playkit-js/kaltura-player-js';
+const {preacti18n} = ui;
 
 const {ExpandableText} = ui.components;
 const {Text, Localizer} = preacti18n;

src/components/navigation/navigation-item/QuizTitle.scss

@@ -36,7 +36,7 @@
 
 :global(.playkit-size-sm),
 :global(.playkit-size-xs),
-:global(.playkit-size-ty), {
+:global(.playkit-size-ty) {
   .title-wrapper {
     flex-direction: column;
   }

src/components/navigation/plugin-button/index.tsx

@@ -1,9 +1,9 @@
 import {h} from 'preact';
-import {ui} from '@playkit-js/kaltura-player-js';
-import {preacti18n} from '@playkit-js/playkit-js-ui';
 import * as styles from './plugin-button.scss';
 import {icons} from '../../icons';
 import {pluginName} from '../../../navigation-plugin';
+import {ui} from '@playkit-js/kaltura-player-js';
+const {preacti18n} = ui;
 
 const {Tooltip, Icon} = ui.components;
 const {withText, Text} = preacti18n;

src/index.ts

@@ -8,6 +8,6 @@ const NAME = __NAME__;
 
 export {NavigationPlugin as Plugin};
 export {VERSION, NAME};
-export {NavigationEvent} from './events'
+export {NavigationEvent} from './events/events'
 
 KalturaPlayer.core.registerPlugin(pluginName, NavigationPlugin);

src/navigation-plugin.tsx

@@ -18,7 +18,7 @@ import {PluginButton} from './components/navigation/plugin-button';
 import {icons} from './components/icons';
 import {NavigationConfig, PluginStates, ItemTypes, ItemData, CuePoint, HighlightedMap, CuePointsMap} from './types';
 import {QuizTitle} from './components/navigation/navigation-item/QuizTitle';
-import { NavigationEvent } from "./events";
+import {NavigationEvent} from './events/events';
 
 export const pluginName: string = 'navigation';
 

src/theme.scss

@@ -1,4 +1,4 @@
-@import '~@playkit-js/playkit-js-ui';
+@import '~@playkit-js/kaltura-player-js';
 
 $roundness-1: 4px;