Skip to content

Commit

Permalink
fix typescript
Browse files Browse the repository at this point in the history
  • Loading branch information
JonathanTGold committed Apr 11, 2024
1 parent 22a32bd commit ed02d6c
Show file tree
Hide file tree
Showing 30 changed files with 1,790 additions and 402 deletions.
3 changes: 2 additions & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<meta name="theme-color" content="#000000" />
<meta name="description" content="Kaltura Player Demo Page" />
<title>Audio Player Plugin</title>
<link rel="stylesheet" type="text/css" href="./style.css" />
<script src="http://localhost:8086/kaltura-ovp-player.js"></script>
<script src="http://localhost:8081/playkit-downloads.js"></script>
<!-- <script src="https://unpkg.com/@playkit-js/kaltura-player-js@canary/dist/kaltura-ovp-player.js"></script>-->
Expand All @@ -14,7 +15,7 @@
<script src="./playkit-audio-player.js"></script>
</head>
<body>
<div id="player-placeholder" style="max-width: 640px"></div>
<div id="player-placeholder"></div>
<!-- <div id="player-placeholder" style="max-width: 640px; height: 300px"></div>-->
<script>
const config = {
Expand Down
9 changes: 9 additions & 0 deletions demo/style.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
body {
background-color: #6e6d6d;
}

#player-placeholder {
margin: 100px auto;
max-width: 640px;
/*aspect-ratio: 10 / 3;*/
}
47 changes: 34 additions & 13 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,21 @@
"description": "",
"main": "dist/playkit-audio-player.js",
"scripts": {
"serve": "webpack serve --open --mode development",
"watch": "webpack --mode development --watch",
"build:prod": "webpack --mode production",
"build": "yarn run build:prod && yarn run build:types",
"build:types": "tsc --build tsconfig-lib.json && mkdir -p lib && api-extractor run --local",
"type-check": "tsc --noEmit",
"type-check:watch": "yarn run type-check --watch",
"lint": "eslint src/ --ext .js --ext .ts",
"lint:fix": "yarn run lint --fix",
"prettier": "prettier --write .",
"clean": "rm -rf ./dist",
"prebuild": "npm run clean",
"build": "webpack --mode production",
"dev": "webpack-dev-server --mode development",
"docs:generate": "documentation build src/** -f md -o docs/api.md",
"watch": "webpack --progress --colors --watch --mode development",
"pushTaggedRelease": "git push --follow-tags --no-verify origin master",
"release": "standard-version",
"eslint": "eslint . --color",
"prettier:fix": "prettier --write .",
"cy:open": "cypress open",
"cy:run": "yarn run cy:run:chrome && yarn run cy:run:firefox && yarn run cy:run:edge",
"cy:run:chrome": "cypress run --browser chrome --config video=false",
Expand All @@ -35,11 +40,18 @@
},
"homepage": "https://github.com/kaltura/playkit-js-audio-player#readme",
"devDependencies": {
"@playkit-js/kaltura-player-js": "3.14.4",
"@babel/core": "^7.23.7",
"@babel/plugin-proposal-decorators": "^7.10.5",
"@babel/plugin-transform-react-jsx": "^7.23.4",
"@babel/plugin-transform-runtime": "^7.23.7",
"@babel/preset-env": "^7.23.8",
"@babel/preset-typescript": "^7.23.3",
"@babel/runtime": "^7.23.8",
"@playkit-js/kaltura-player-js": "3.17.13",
"@typescript-eslint/eslint-plugin": "^5.58.0",
"@typescript-eslint/parser": "^5.58.0",
"conventional-github-releaser": "3.1.3",
"css-loader": "^6.7.3",
"typescript-plugin-css-modules": "^5.0.2",
"cypress": "^13.3.1",
"eslint": "^8.42.0",
"eslint-config-preact": "^1.3.0",
Expand All @@ -48,15 +60,24 @@
"eslint-plugin-jsdoc": "^41.1.2",
"eslint-plugin-prettier": "^4.2.1",
"prettier": "^2.8.4",
"sass": "^1.58.3",
"sass-loader": "^13.2.0",
"standard-version": "^9.5.0",
"style-loader": "^3.3.1",
"ts-loader": "^9.4.2",
"typescript": "^4.9.5",
"webpack": "^5.75.0",
"webpack-cli": "^5.0.1",
"webpack-dev-server": "^4.11.1"
"css-loader": "^6.9.0",
"sass": "^1.69.7",
"sass-loader": "^13.3.3",
"typescript": "^5.3.3",
"webpack": "^5.89.0",
"webpack-cli": "^5.1.4",
"webpack-dev-server": "^4.15.1",
"preact": "10.4.6"
},
"peerDependencies": {
"@playkit-js/kaltura-player-js": "canary",
"@playkit-js/playkit-js": "canary",
"@playkit-js/playkit-js-ui": "canary",
"preact": "10.4.6",
"preact-i18n": "2.0.0-preactx.2"
},
"publishConfig": {
"access": "public"
Expand Down
8 changes: 2 additions & 6 deletions src/audio-player.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import {BasePlugin, KalturaPlayer, core} from '@playkit-js/kaltura-player-js';
import {AudioPlayerConfig} from './types';
// import {AudioPlayerView, AudioPlayerUI} from './components';

import {hexToCSSFilter} from 'hex-to-css-filter';
import {miniAudioUI} from "./components/audio-player-ui";

const TONE_1_COLOR_VARIABLE = '--playkit-tone-1-color';
const TONE_1_COLOR_RGB_VARIABLE = '--playkit-tone-1-color-rgb';
const CONTROLS_FILTER_COLOR_VARIABLE = '--playkit-audio-player-controls-filter';
// @ts-ignore
class AudioPlayer extends BasePlugin<AudioPlayerConfig> {
class AudioPlayer extends BasePlugin {
private colorVariablesSet = false;
public static defaultConfig = {};

constructor(name: string, player: KalturaPlayer, config: AudioPlayerConfig) {
super(name, player, config);
Expand Down
4 changes: 1 addition & 3 deletions src/components/audio-details/audio-details.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import { h } from 'preact';
import {useState} from 'preact/hooks';

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
import {ui, core} from '@playkit-js/kaltura-player-js';
import {AudioIcon, ScrollingText, ScrollingTextModes, BufferingIcon} from '..';
import {AudioPlayerSizes} from '../../types';
Expand Down
1 change: 1 addition & 0 deletions src/components/audio-icon/audio-icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { h } from 'preact';
import * as styles from './audio-icon.scss';

interface AudioIconProps {
Expand Down
16 changes: 5 additions & 11 deletions src/components/audio-player-controls/audio-player-controls.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,14 @@
import {useRef, useEffect, useState} from 'preact/hooks';
import { h, VNode } from "preact";
import {useRef, useEffect} from 'preact/hooks';
import {ui} from '@playkit-js/kaltura-player-js';
import * as styles from './audio-player-controls.scss';
import {AudioPlayerConfig} from '../../types';
import {LoopButton} from '../loop-button';
import {LiveTagComponent} from '../live-tag';
import {MorePluginsButtonWrapper} from '../plugins';

// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
import { AudioPlayerConfig } from "../../types";
const {Rewind, Forward, PlaylistButton, PlayPause, Volume, SpeedMenu} = ui.Components;
const {
redux: {useSelector},
//@ts-ignore
createPortal
redux: {useSelector}
} = ui;

interface AudioPlayerControlsProps {
Expand Down Expand Up @@ -43,7 +39,7 @@ const AudioPlayerControls = ({pluginConfig, player, onPluginsControlClick}: Audi
}, []);
};

const _renderLoopOrSpeedMenuButton = () => {
const _renderLoopOrSpeedMenuButton = (): VNode<any> | null => {
if (player.isLive()) {
return null;
}
Expand All @@ -58,8 +54,6 @@ const AudioPlayerControls = ({pluginConfig, player, onPluginsControlClick}: Audi
};

const targetId: HTMLDivElement | Document = (document.getElementById(player.config.targetId) as HTMLDivElement) || document;
// const portalSelector = `.overlay-portal`;

return (
<div className={styles.playbackControlsWrapper}>
<LiveTagComponent />
Expand Down
4 changes: 1 addition & 3 deletions src/components/audio-player-ui/audio-player-ui.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@

interface AudioPlayerProps {
config: any;
player: any;
Expand All @@ -7,11 +6,10 @@ interface AudioPlayerProps {

import {ui} from '@playkit-js/kaltura-player-js';

//@ts-ignore
const {PlayerArea, withPlayerPreset, withKeyboardEvent, OverlayPortal,VideoArea, GuiArea} = ui.Components;
const {style} = ui;

import {Fragment, h, Component, VNode} from 'preact';
import {h, Component, VNode} from 'preact';
import { AudioPlayerView } from "../audio-player-view";

const PRESET_NAME = 'MiniAudioUI';
Expand Down
15 changes: 2 additions & 13 deletions src/components/audio-player-view/audio-player-view.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
import {Fragment} from 'preact';
import {h,Fragment} from 'preact';
import {useState, useEffect} from 'preact/hooks';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
import {ui, core} from '@playkit-js/kaltura-player-js';
import {
AudioPlayerControls,
Expand All @@ -13,7 +11,7 @@ import {
LargeDetailsPlaceholder,
AudioDetails
} from '..';
import {AudioPlayerConfig, AudioPlayerSizes, MediaMetadata} from '../../types';
import { AudioPlayerSizes, MediaMetadata, AudioPlayerConfig} from '../../types';
import * as styles from './audio-player-view.scss';
import {ErrorSlate} from '../error-slate';
import {PluginsMenuOverlay} from '../plugins';
Expand All @@ -23,14 +21,10 @@ const {withPlayer} = ui.Components;

const {
redux: {connect},
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
reducers: {shell},
Event
} = ui;
const {withText, Text} = ui.preacti18n;
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
const {PLAYER_SIZE} = ui.Components;

const AUDIO_PLAYER_CLASSNAME = 'audio-player';
Expand Down Expand Up @@ -102,8 +96,6 @@ const AudioPlayerView = Event.withEventManager(
mapStateToProps,
mapDispatchToProps
)(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
({size, pluginConfig, hasError, mediaThumb, addPlayerClass, removePlayerClass, player, eventManager}: AudioPlayerViewProps) => {
const [mediaMetadata, setMediaMetadata] = useState<MediaMetadata | null>(null);
const [imageHasError, setImageHasError] = useState(false);
Expand Down Expand Up @@ -203,7 +195,6 @@ const AudioPlayerView = Event.withEventManager(
);
}
return (
// <PlayerArea name={'GuiArea'}>
<Fragment>
{size === AudioPlayerSizes.Large && poster ? (
<div data-testid="audio-player-background-image" style={{backgroundImage: `url(${poster})`}} className={styles.backgroundImage} />
Expand All @@ -217,15 +208,13 @@ const AudioPlayerView = Event.withEventManager(
</div>
</div>
</Fragment>
// </PlayerArea>
);
};

return (
<div data-testid="audio-player-view" className={`${styles.miniAudioPlayerView} ${styles[size!]}`}>
{hasError ? <ErrorSlate /> : _renderView()}
{showPluginsMenuOverlay && (
// @ts-ignore
<PluginsMenuOverlay
poster={player.sources.poster}
playerContainerId={player.config.targetId}
Expand Down
1 change: 1 addition & 0 deletions src/components/buffering-icon/buffering-icon.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { h } from 'preact';
import * as styles from './buffering-icon.scss';

export const BufferingIcon = ({isLarge}: {isLarge?: boolean}) => {
Expand Down
1 change: 1 addition & 0 deletions src/components/error-slate/error-slate.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { h } from 'preact';
import {ui} from '@playkit-js/kaltura-player-js';
import * as styles from './error-slate.scss';

Expand Down
1 change: 0 additions & 1 deletion src/components/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
export {AudioIcon} from './audio-icon';
export {AudioPlayerControls} from './audio-player-controls';
export {AudioSeekbar} from './audio-seekbar';
// export {AudioPlayerUI} from './audio-player-ui/audio-player-ui';
export {AudioPlayerView} from './audio-player-view';
export {ErrorSlate} from './error-slate';
export {ScrollingText, ScrollingTextModes} from './scrolling-text';
Expand Down
1 change: 1 addition & 0 deletions src/components/live-tag/index.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { h } from 'preact';
import {useEffect, useState} from 'preact/hooks';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
//@ts-ignore
Expand Down
1 change: 1 addition & 0 deletions src/components/loading-slates/loading-slates.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { h } from 'preact';
import * as styles from './loading-slates.scss';

export const ControlsPlaceholder = () => (
Expand Down
2 changes: 1 addition & 1 deletion src/components/plugins/menu-item/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export {MenuItem} from './menu-item'
export {MenuItem} from './menu-item';
7 changes: 3 additions & 4 deletions src/components/plugins/menu-item/menu-item.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import { h } from 'preact';
import {ui} from '@playkit-js/kaltura-player-js';
import * as styles from './menu-item.scss';
import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';

//@ts-ignore
const {Icon, IconType} = ui.Components;

interface MenuItemProps {
Expand All @@ -13,14 +12,14 @@ interface MenuItemProps {

const MenuItem = ({pluginName, svgUrl, onClick}: MenuItemProps) => {
return (
// @ts-ignore - error TS2786: 'A11yWrapper' cannot be used as a JSX component.
<A11yWrapper onClick={onClick}>
<div className={styles.menuItem} tabIndex={0} aria-label={pluginName}>
<span className={styles.pluginIcon}>
<Icon id={`min-audio-player-download`} path={svgUrl} viewBox={`0 0 32 32`} />
</span>
<div className={styles.content2}>{pluginName}</div>
<div>{pluginName}</div>
<span className={styles.arrowIcon}>
{/*@ts-ignore*/}
<Icon type={IconType.ArrowDown} />
</span>
</div>
Expand Down
7 changes: 5 additions & 2 deletions src/components/plugins/more-plugins-button/more-plugins-button.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import { h, VNode } from "preact";
import {useRef} from 'preact/hooks';
import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
import {ui} from '@playkit-js/kaltura-player-js';
import * as styles from './more-plugins-button.scss';
import { Components } from "@playkit-js/playkit-js-ui";

const {Icon, Tooltip} = ui.Components;
const {Tooltip, Icon} = Components;
const {withText, Text} = ui.preacti18n;
const ICON_PATH =
// eslint-disable-next-line max-len
Expand All @@ -14,10 +16,11 @@ interface MorePluginsButtonProps {
moreIconTxt?: string;
}

const MorePluginsButton = ({onClick, moreIconTxt}: MorePluginsButtonProps) => {
const MorePluginsButton = ({onClick, moreIconTxt}: MorePluginsButtonProps): VNode<any> => {
const moreButtonRef = useRef<HTMLButtonElement>(null);
return (
<Tooltip label={moreIconTxt!}>
{/* @ts-ignore - error TS2786: 'A11yWrapper' cannot be used as a JSX component.*/}
<A11yWrapper onClick={onClick}>
<button ref={moreButtonRef} className={`${ui.style.upperBarIcon} ${styles.morePluginsIcon}`} tabIndex={0} aria-label={moreIconTxt}>
<Icon id={`${'pluginName-123'}-upper-bar-manager`} path={ICON_PATH} viewBox={'0 0 32 32'} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/plugins/plugins-menu-overlay/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
export {PluginsMenuOverlay} from './plugins-menu-overlay'
export {PluginsMenuOverlay} from './plugins-menu-overlay';
14 changes: 0 additions & 14 deletions src/components/plugins/plugins-menu-overlay/plugins-menu-overlay.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,20 +98,6 @@
}
}

//:global(.download-overlay__download-overlay___IThlq .download-overlay__close-button-container___nLul9) {
// top: 13px;
// right: 15px;
//}

//:global(.download-overlay__download-overlay___IThlq .download-overlay__close-button-container___nLul9.download-overlay__small___GW05I) {
// top: 10px;
// right: 7px;
//}

//:global(.download-overlay__download-overlay___IThlq .download-overlay__file-info-list___riTfL) {
// margin-top: 13px;
//}

.large {
+ :global(.playkit-gui-area) {
:global(.download-overlay__download-overlay___IThlq) {
Expand Down
Loading

0 comments on commit ed02d6c

Please sign in to comment.