Merge pull request #25 from youngdo212/feature/ts-plugins

타입스크립트 적용: 플러그인

Author: youngdo212

jest.config.js

@@ -1,4 +1,5 @@
 module.exports = {
+  preset: 'ts-jest/presets/js-with-babel',
   moduleDirectories: ['node_modules', 'src'],
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

package-lock.json

@@ -54,6 +54,7 @@
     "sass-loader": "^10.1.0",
     "style-loader": "^2.0.0",
     "terser-webpack-plugin": "^4.2.3",
+    "ts-jest": "^26.4.4",
     "typescript": "^4.1.3",
     "webpack": "^4.44.2",
     "webpack-cli": "^4.2.0",

package.json

@@ -4,7 +4,7 @@ import config from '../../config/defaults';
 
 it('core속성을 가진다', () => {
   class TestPlugin extends Plugin {
-    addEventListeners() {
+    protected addEventListeners() {
       // do nothing.
     }
   }
@@ -17,7 +17,7 @@ it('core속성을 가진다', () => {
 
 it('video속성을 가진다', () => {
   class TestPlugin extends Plugin {
-    addEventListeners() {
+    protected addEventListeners() {
       // do nothing.
     }
   }
@@ -30,7 +30,7 @@ it('video속성을 가진다', () => {
 
 it('enabled 속성을 가지며 기본 값은 true이다', () => {
   class TestPlugin extends Plugin {
-    addEventListeners() {
+    protected addEventListeners() {
       // do nothing.
     }
   }
@@ -43,7 +43,7 @@ it('enabled 속성을 가지며 기본 값은 true이다', () => {
 
 it('인스턴스를 생성하면 이벤트 리스너를 추가한다', () => {
   class MyPlugin extends Plugin {
-    addEventListeners() {
+    protected addEventListeners() {
       this.listenTo(this.core, eventName, this.handleEvent);
     }
     handleEvent() {
@@ -62,7 +62,7 @@ it('인스턴스를 생성하면 이벤트 리스너를 추가한다', () => {
 
 it('disable을 통해 플러그인을 사용하지 못하게 만든다', () => {
   class MyPlugin extends Plugin {
-    addEventListeners() {
+    protected addEventListeners() {
       this.listenTo(this.core, eventName, this.handleEvent);
     }
     handleEvent() {
@@ -82,7 +82,7 @@ it('disable을 통해 플러그인을 사용하지 못하게 만든다', () => {
 
 it('enable을 통해 플러그인을 다시 사용가능하게 만든다', () => {
   class MyPlugin extends Plugin {
-    addEventListeners() {
+    protected addEventListeners() {
       this.listenTo(this.core, eventName, this.handleEvent);
     }
     handleEvent() {
@@ -107,7 +107,7 @@ it('enable을 통해 플러그인을 다시 사용가능하게 만든다', () =>
 
 it('플러그인을 파괴한다', () => {
   class MyPlugin extends Plugin {
-    addEventListeners() {
+    protected addEventListeners() {
       this.listenTo(this.core, eventName1, this.handleEvent);
     }
     handleEvent() {

src/base/plugin/Plugin.test.ts

@@ -55,13 +55,13 @@ export default abstract class Plugin extends Events {
    * Core에 이벤트 리스너를 등록한다.
    * NOTE: disable/enable을 제대로 작동시키기 위해서 반드시 this.listenTo 메소드를 이용해 이벤트 리스너를 등록해야한다.
    */
-  abstract addEventListeners(): void;
+  protected abstract addEventListeners(): void;
 
   /**
    * 플러그인을 작동시킨다.
    * 이 함수는 disable 이후에 다시 플러그인을 작동시킬 때만 사용해야 한다.
    */
-  enable(): void {
+  public enable(): void {
     if (this._enabled) return;
     this.addEventListeners();
     this._enabled = true;
@@ -70,15 +70,15 @@ export default abstract class Plugin extends Events {
   /**
    * 플러그인을 작동하지 않도록 한다.
    */
-  disable(): void {
+  public disable(): void {
     this.stopListening();
     this._enabled = false;
   }
 
   /**
    * 플러그인을 파괴하여 등록된 이벤트 리스너를 전부 제거한다.
    */
-  destroy(): Plugin {
+  public destroy(): Plugin {
     this.off();
     this.stopListening();
     return this;

src/base/plugin/Plugin.ts

@@ -24,21 +24,21 @@ export default abstract class UIPlugin extends UIObject<'div'> {
   /**
    * 모든 UI 플러그인은 내부에서 core를 갖는다.
    */
-  get core(): Core {
+  public get core(): Core {
     return this._core;
   }
 
   /**
    * core를 통해서 video에 접근할 수 있다.
    */
-  get video(): Video {
+  public get video(): Video {
     return this._core.video;
   }
 
   /**
    * 플러그인 활성화 여부
    */
-  get enabled(): boolean {
+  public get enabled(): boolean {
     return this._enabled;
   }
 
@@ -56,13 +56,13 @@ export default abstract class UIPlugin extends UIObject<'div'> {
    * Core에 이벤트 리스너를 등록한다.
    * NOTE: disable/enable을 제대로 작동시키기 위해서 반드시 this.listenTo 메소드를 이용해 이벤트 리스너를 등록해야한다.
    */
-  abstract addEventListeners(): void;
+  protected abstract addEventListeners(): void;
 
   /**
    * 플러그인을 작동시킨다.
    * 이 함수는 disable 이후에 다시 플러그인을 작동시킬 때만 사용해야 한다.
    */
-  enable(): void {
+  public enable(): void {
     if (this._enabled) return;
     this.addEventListeners();
     showElement(this.el);
@@ -72,7 +72,7 @@ export default abstract class UIPlugin extends UIObject<'div'> {
   /**
    * 플러그인을 작동하지 않도록 한다.
    */
-  disable(): void {
+  public disable(): void {
     this.stopListening();
     hideElement(this.el);
     this._enabled = false;
@@ -83,7 +83,7 @@ export default abstract class UIPlugin extends UIObject<'div'> {
    *
    * @returns {UIPlugin}
    */
-  render(): UIPlugin {
+  public render(): UIPlugin {
     return this;
   }
 }

src/base/ui-plugin/UIPlugin.ts

@@ -1,11 +1,17 @@
 /** @module components/html-video */
 
-import type { Attributes, Config, EventHandlerNameMap } from '../../types';
+import type {
+  Attributes,
+  Config,
+  EventHandlerNameMap,
+  VideoError,
+} from '../../types';
 import './HTMLVideo.scss';
 import Events from '../../base/events';
 import Video from '../../base/video';
 import mime from 'mime/lite';
 import { canPlayVideoType } from '../../utils/element';
+import i18n from '../../utils/i18n';
 
 /**
  * HTML 비디오 엘리먼트를 나타내는 클래스
@@ -104,8 +110,11 @@ export default class HTMLVideo extends Video {
   /**
    * 비디오의 에러 이벤트를 발생시킨다
    */
-  onError(event: Event): void {
-    this.emit(Events.VIDEO_ERROR, event);
+  onError(): void {
+    const error: VideoError = {
+      message: i18n.get('notFoundVideo', this.config),
+    };
+    this.emit(Events.VIDEO_ERROR, error);
   }
 
   /**

src/components/html-video/HTMLVideo.ts

@@ -1,4 +1,5 @@
 .better-player__no-video {
+  display: block;
   width: 100%;
   height: 100%;
   box-sizing: border-box;

src/components/no-video/NoVideo.scss

@@ -1,10 +1,11 @@
 /** @module components/no-video */
 
-import type { Attributes, Config } from '../../types';
+import type { Attributes, Config, VideoError } from '../../types';
 import './NoVideo.scss';
 import Video from '../../base/video';
 import { defer } from '../../utils/function';
 import Events from '../../base/events';
+import i18n from '../../utils/i18n';
 
 /**
  * 지원하지 않는 비디오 포맷을 리소스로 사용하거나 리소스를 아예 제공하지
@@ -29,8 +30,8 @@ export default class NoVideo extends Video {
    */
   private throwError(): void {
     defer(() => {
-      const error = {
-        message: this.config.i18n.notSupportVideoFormat,
+      const error: VideoError = {
+        message: i18n.get('notSupportVideoFormat', this.config),
       };
       this.emit(Events.VIDEO_ERROR, error);
     });