Merge pull request #22 from youngdo212/feature/ts-utils

타입스크립트 적용 - utils 및 config

Author: youngdo212

.prettierrc.json

@@ -1,4 +1,5 @@
 {
   "singleQuote": true,
-  "arrowParens": "avoid"
+  "arrowParens": "avoid",
+  "trailingComma": "all"
 }

package-lock.json

@@ -31,6 +31,7 @@
     "@storybook/addon-links": "^6.1.0",
     "@storybook/html": "^6.1.0",
     "@types/jest": "^26.0.15",
+    "@types/lodash": "^4.14.167",
     "@typescript-eslint/eslint-plugin": "^4.11.1",
     "@typescript-eslint/parser": "^4.11.1",
     "babel-jest": "^26.6.3",

package.json

@@ -45,14 +45,11 @@ export default class HTMLVideo extends Video {
    * 인스턴스를 생성하고 비디오 엘리먼트에 속성을 추가한다.
    *
    * @param {object} config
-   * @param {object} config.source
-   * @param {string} config.source.src
-   * @param {string=} config.source.type
+   * @param {string} config.source
    */
   constructor(config) {
     super(config);
-    this.el.src = config.source.src;
-    this.el.type = config.source.type || '';
+    this.el.src = config.source;
     this.lastVolume = this.el.volume; // 음소거를 해제했을 때 이전 볼륨으로 되돌리기 위한 속성
   }
 
@@ -254,16 +251,10 @@ export default class HTMLVideo extends Video {
   /**
    * 리소스가 이 인스턴스에서 재생 가능한 포맷인지 검사한다.
    *
-   * @param {object} source
-   * @param {string} source.src
-   * @param {string=} source.type
+   * @param {string} source
    */
-  static canPlayType({ src, type }) {
-    let mimeType = type;
-
-    if (!mimeType) {
-      mimeType = mime.getType(src) || '';
-    }
+  static canPlayType(source) {
+    let mimeType = mime.getType(source) || '';
 
     return canPlayVideoType(mimeType);
   }

src/components/html-video/HTMLVideo.js

@@ -8,12 +8,11 @@ beforeEach(() => {
 
 it('비디오 엘리먼트를 생성한다', () => {
   const video = new HTMLVideo({
-    source: { src: 'http://localhost/test.mp4', type: 'video/mp4' },
+    source: 'http://localhost/test.mp4',
   });
 
   expect(video.el.tagName).toBe('VIDEO');
   expect(video.el.src).toBe('http://localhost/test.mp4');
-  expect(video.el.type).toBe('video/mp4');
 });
 
 describe('비디오 이벤트 발생 관련', () => {
@@ -95,7 +94,7 @@ it('비디오 엘리먼트를 DOM에서 제거하고 src attribute를 초기화
 
   const wrapper = document.createElement('div');
   const video = new HTMLVideo({
-    source: { src: 'http://localhost/test.mp4' },
+    source: 'http://localhost/test.mp4',
   });
 
   wrapper.appendChild(video.render().el);

src/components/html-video/HTMLVideo.test.js

@@ -40,7 +40,7 @@ export default class NoVideo extends Video {
   /**
    * 재생 가능한 비디오 소스인지를 확인합니다.
    * NoVideo의 경우 어떤 비디오 소스인지 관심 없으므로 항상 true를 반환합니다.
-   * @param {object=} source
+   * @param {string=} source
    * @returns {true}
    */
   // eslint-disable-next-line no-unused-vars

src/components/no-video/NoVideo.js

@@ -3,7 +3,6 @@
 import Events from '../../base/events';
 import defaultConfig from '../../config/defaults';
 import { getElementById } from '../../utils/element';
-import { isObject } from '../../utils/type';
 import Core from '../core';
 
 /**
@@ -20,7 +19,6 @@ export default class Player extends Events {
 
     // 환경 설정
     this.config = { ...defaultConfig, ...options };
-    this.config.source = this.normalizeSource(this.config);
     this.config.parentElement = this.getParentElement(this.config);
 
     // 비디오 플레이어 엘리먼트 생성 및 이벤트 리스너 추가
@@ -31,22 +29,6 @@ export default class Player extends Events {
     this.core.render();
   }
 
-  /**
-   * source를 규정된 객체 형식으로 변환합니다
-   *
-   * @param {object} config
-   * @param {object|string|undefined} config.source
-   * @returns {{src, type?}}
-   */
-  normalizeSource({ source }) {
-    if (isObject(source)) {
-      source.src = source.src || '';
-      return source;
-    }
-
-    return { src: source || '' };
-  }
-
   /**
    * 비디오 엘리먼트가 추가될 부모 엘리먼트를 반환합니다.
    *

src/components/player/Player.js

@@ -1,7 +1,8 @@
+import type { Config } from '../types';
 import cloneDeep from 'lodash/cloneDeep';
 
-const defaults = {
-  source: { src: '' },
+const defaults: Config = {
+  source: '',
   clickToPlay: true, // 비디오를 클릭해서 재생 가능하게 하는 기능
   keyboard: true,
   seekTime: 5, // 앞으로 가기나 뒤로 가기 시 이동할 초 단위

src/config/defaults.js src/config/defaults.ts

@@ -7,11 +7,10 @@ import {
   appendChild,
   innerHTML,
   removeClass,
-  querySelector,
+  getElementsBySelectorMap,
 } from '../../utils/element';
 import template from './template';
 import Events from '../../base/events';
-import { isNumber } from '../../utils/type';
 import formatTime from '../../utils/time';
 
 /**
@@ -215,7 +214,7 @@ export default class Controller extends UIPlugin {
     const duration = this.video.getDuration();
     const currentTime = this.video.getCurrentTime();
     const value = currentTime / duration;
-    this.childElements.seekBar.value = isNumber(value) ? value : 0;
+    this.childElements.seekBar.value = isNaN(value) ? 0 : value;
   }
 
   /**
@@ -305,7 +304,7 @@ export default class Controller extends UIPlugin {
     if (!this.video.canPlay) return;
 
     innerHTML(this.el, template());
-    this.childElements = querySelector(this.el, this.selectors); // 자식 엘리먼트를 캐싱한다.
+    this.childElements = getElementsBySelectorMap(this.el, this.selectors); // 자식 엘리먼트를 캐싱한다.
     appendChild(this.core.el, this.el);
     return this;
   }

src/plugins/controller/Controller.js

@@ -0,0 +1,21 @@
+export interface Config {
+  source: string;
+  clickToPlay: boolean;
+  keyboard: boolean;
+  seekTime: number;
+  volumeStep: number;
+  i18n: I18N;
+  iconUrl: string;
+}
+
+export interface I18N {
+  notSupportVideoFormat: string;
+  notFoundVideo: string;
+}
+
+/**
+ * 타입 T의 K 속성의 타입을 Partial 타입으로 변경한다.
+ */
+export type PartialProperty<T, K extends keyof T> = {
+  [P in keyof T]: P extends K ? Partial<T[P]> : T[P];
+};