@operato/board 0.2.15

package/dist/src/ox-board-player-control.js

@@ -0,0 +1,390 @@
+import { __decorate } from "tslib";
+import '@material/mwc-fab';
+import '@material/mwc-icon';
+import './ox-board-wrapper';
+import './player/board-player-carousel';
+import { LitElement, css, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
+import { exitfullscreen, togglefullscreen } from './utils/fullscreen';
+import { SwipeListener } from './utils/swipe-listener';
+let BoardPlayerControl = class BoardPlayerControl extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.boards = [];
+        this.playtime = 30;
+        this.columns = 1;
+        this.rows = 1;
+        this.started = false;
+        this.playing = false;
+        this._fullscreened = false;
+    }
+    render() {
+        return html `
+      <slot @mousemove=${() => this.onMousemove()} @transform=${() => this.onTransform()} tabindex="-1">
+        ${this.started
+            ? html `
+              <ox-board-player-carousel axis="y" .rows=${this.rows} .columns=${this.columns} player>
+                ${this.boards.map(item => html ` <ox-board-wrapper page .sceneId=${item.id} .provider=${this.provider}> </ox-board-wrapper> `)}
+              </ox-board-player-carousel>
+            `
+            : html ``}
+      </slot>
+
+      <div id="control" @mouseover=${() => this.onMouseoverControl()} hidden>
+        <div id="joystick">
+          <mwc-icon id="up" @click=${() => this.onTapUp()}>keyboard_arrow_up</mwc-icon>
+          <mwc-icon id="left" @click=${() => this.onTapLeft()}>keyboard_arrow_left</mwc-icon>
+          <mwc-icon id="play" @click=${() => this.onTapPlay()} ?hidden=${this.playing}>play_arrow</mwc-icon>
+          <mwc-icon id="pause" @click=${() => this.onTapPause()} ?hidden=${!this.playing}>pause</mwc-icon>
+          <mwc-icon id="right" @click=${() => this.onTapRight()}>keyboard_arrow_right</mwc-icon>
+          <mwc-icon id="down" @click=${() => this.onTapDown()}>keyboard_arrow_down</mwc-icon>
+        </div>
+
+        <div id="setting-container">
+          <div id="setting">
+            <label id="schedule-container">
+              <mwc-icon id="schedule">schedule</mwc-icon>
+              <input
+                .value=${this.playtime}
+                @change=${(e) => (this.playtime = Number(e.target.value))}
+              />
+              sec.
+            </label>
+            <div id="grid-setting-container">
+              <mwc-icon id="view_module">view_module</mwc-icon>
+              <select
+                .value=${this.rows}
+                @change=${(e) => (this.rows = Number(e.target.value))}
+              >
+                ${[1, 2, 3, 4, 5].map(row => html ` <option>${row}</option> `)}
+              </select>
+              x
+              <select
+                .value=${this.columns}
+                @change=${(e) => (this.columns = Number(e.target.value))}
+              >
+                ${[1, 2, 3, 4, 5].map(column => html ` <option>${column}</option> `)}
+              </select>
+            </div>
+          </div>
+
+          <div id="etc">
+            <mwc-icon id="fullscreen" @click=${() => this.onTapFullscreen()} ?hidden=${this._fullscreened}
+              >fullscreen</mwc-icon
+            >
+            <mwc-icon id="fullscreen-exit" @click=${() => this.onTapFullscreen()} ?hidden=${!this._fullscreened}
+              >fullscreen_exit</mwc-icon
+            >
+            <mwc-icon id="close" @click=${() => this.onTapClose()}>close</mwc-icon>
+          </div>
+        </div>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        SwipeListener(this);
+        this.addEventListener('swipe', (e) => {
+            var directions = e.detail.directions;
+            if (directions.left) {
+                this.onTapRight();
+            }
+            else if (directions.right) {
+                this.onTapLeft();
+            }
+            else if (directions.top) {
+                this.onTapDown();
+            }
+            else if (directions.bottom) {
+                this.onTapUp();
+            }
+        });
+    }
+    updated(changes) {
+        if (changes.has('boards') || changes.has('columns') || changes.has('rows')) {
+            this.boards && this.boards.length > 0 ? this.restart() : this.stop();
+        }
+        else if (changes.has('playtime') && this.playing) {
+            this._resetTransformTimer();
+        }
+    }
+    async _resetFadeTimer(stop) {
+        if (!this._controlAnimation) {
+            this._controlAnimation = this._control.animate([
+                {
+                    opacity: 1,
+                    easing: 'ease-in'
+                },
+                { opacity: 0 }
+            ], { delay: 1000, duration: 2000 });
+        }
+        this._control.hidden = false;
+        this._controlAnimation.cancel();
+        if (stop)
+            return;
+        try {
+            this._controlAnimation.play();
+            await this._controlAnimation.finished;
+            this._control.hidden = true;
+        }
+        catch (e) {
+            /* cancelled */
+        }
+    }
+    _resetTransformTimer() {
+        clearTimeout(this._transferTimer);
+        this.playing = true;
+        if (this._currentPlayer) {
+            this._transferTimer = setTimeout(() => {
+                if (this._transferTimer)
+                    this._currentPlayer.next();
+            }, this.playtime * 1000);
+        }
+    }
+    onMousemove() {
+        this._resetFadeTimer();
+    }
+    onMouseoverControl() {
+        this._resetFadeTimer(true);
+    }
+    onTapFullscreen() {
+        togglefullscreen(this, () => {
+            this._fullscreened = true;
+            this.focus();
+        }, () => {
+            this._fullscreened = false;
+            this.focus();
+        });
+    }
+    onTransform() {
+        requestAnimationFrame(() => this.started && this.playing && this._resetTransformTimer());
+    }
+    onTapPlay() {
+        this._resetTransformTimer();
+    }
+    onTapPause() {
+        clearTimeout(this._transferTimer);
+        this.playing = false;
+    }
+    onTapLeft() {
+        this._currentPlayer.axis = 'y';
+        this._currentPlayer.previous();
+    }
+    onTapRight() {
+        this._currentPlayer.axis = 'y';
+        this._currentPlayer.next();
+    }
+    onTapUp() {
+        this._currentPlayer.axis = 'x';
+        this._currentPlayer.next();
+    }
+    onTapDown() {
+        this._currentPlayer.axis = 'x';
+        this._currentPlayer.previous();
+    }
+    onTapClose() {
+        if (this._fullscreened) {
+            exitfullscreen();
+        }
+        window.history.back();
+    }
+    async restart() {
+        await this.stop();
+        await this.start();
+    }
+    async start() {
+        if (!this.boards || this.boards.length == 0)
+            return;
+        this.started = true;
+        this.playing = true;
+        await this.updateComplete;
+        this._currentPlayer = this.renderRoot.querySelector(':not([style*="display: none"])[player]');
+        this._resetTransformTimer();
+        this._resetFadeTimer();
+        this.focus();
+    }
+    async stop() {
+        clearTimeout(this._transferTimer);
+        this._currentPlayer && this._currentPlayer.stop();
+        this.started = false;
+        /**
+         * this.started = false 로 인한 update를 강제하기 위함임.
+         * this.start() 가 바로 호출되어 this.started 의 변화가 render에 반영되지 않을 수 있으므로.
+         */
+        await this.updateComplete;
+    }
+};
+BoardPlayerControl.styles = css `
+    div > * {
+      cursor: pointer;
+      user-select: none;
+    }
+
+    #joystick {
+      position: relative;
+      box-sizing: border-box;
+      border: 2px solid tomato;
+      background-color: #c34827;
+      box-shadow: 0 0 5px #000;
+      width: 100%;
+      height: 100%;
+      grid-column: 1 / span 2;
+      border-radius: 50%;
+      z-index: 2;
+      grid-row: 1 / span 3;
+    }
+
+    #joystick mwc-icon {
+      position: absolute;
+      display: block;
+      width: 20px;
+      height: 20px;
+      font-size: 25px;
+      line-height: 0.7;
+    }
+
+    mwc-icon#up {
+      left: 29px;
+    }
+
+    mwc-icon#left {
+      top: 32px;
+      left: -2px;
+    }
+
+    mwc-icon#play,
+    mwc-icon#pause {
+      left: 20px;
+      top: 20px;
+      width: 40px;
+      height: 40px;
+      border: 1px solid rgba(0, 0, 0, 0.15);
+      border-radius: 50%;
+      background-color: rgba(0, 0, 0, 0.15);
+      font-size: 45px;
+      line-height: 0.9;
+    }
+
+    mwc-icon#right {
+      top: 31px;
+      left: 60px;
+    }
+
+    mwc-icon#down {
+      left: 29px;
+      top: 63px;
+    }
+
+    mwc-icon#pause {
+      text-indent: -2px;
+    }
+
+    #setting-container {
+      grid-column: 2 / span 2;
+      grid-row: 2;
+      gap: 0 10px;
+      border-radius: 12px;
+      background: rgba(0, 0, 0, 0.7);
+      height: 100%;
+      box-shadow: rgb(0, 0, 0) 0px 0px 5px;
+      display: grid;
+      grid-template-columns: 1fr 60px;
+      align-items: center;
+      padding-left: 60px;
+      padding-right: 5px;
+    }
+
+    #setting {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-gap: 0 10px;
+    }
+
+    #setting mwc-icon {
+      font-size: 22px;
+      color: rgba(255, 174, 53, 0.8);
+    }
+
+    #setting input {
+      width: 50px;
+      margin-right: 5px;
+      font-size: 14px;
+      background-color: transparent;
+      border: none;
+      border-bottom: 1px solid #fff;
+      color: #fff;
+      text-align: right;
+    }
+
+    #setting select {
+      border: none;
+      font-size: 14px;
+    }
+
+    #setting input:focus {
+      outline: none;
+    }
+
+    #schedule-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    #grid-setting-container {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    #etc {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      align-items: center;
+      justify-items: center;
+    }
+
+    #etc mwc-icon {
+      font-size: 30px;
+    }
+  `;
+__decorate([
+    property({ type: Array })
+], BoardPlayerControl.prototype, "boards", void 0);
+__decorate([
+    property({ type: Number })
+], BoardPlayerControl.prototype, "playtime", void 0);
+__decorate([
+    property({ type: Number })
+], BoardPlayerControl.prototype, "columns", void 0);
+__decorate([
+    property({ type: Number })
+], BoardPlayerControl.prototype, "rows", void 0);
+__decorate([
+    property({ type: Boolean })
+], BoardPlayerControl.prototype, "started", void 0);
+__decorate([
+    property({ type: Boolean })
+], BoardPlayerControl.prototype, "playing", void 0);
+__decorate([
+    property({ type: Object })
+], BoardPlayerControl.prototype, "provider", void 0);
+__decorate([
+    state()
+], BoardPlayerControl.prototype, "_controlAnimation", void 0);
+__decorate([
+    state()
+], BoardPlayerControl.prototype, "_transferTimer", void 0);
+__decorate([
+    state()
+], BoardPlayerControl.prototype, "_currentPlayer", void 0);
+__decorate([
+    state()
+], BoardPlayerControl.prototype, "_fullscreened", void 0);
+__decorate([
+    query('#control')
+], BoardPlayerControl.prototype, "_control", void 0);
+BoardPlayerControl = __decorate([
+    customElement('ox-board-player-control')
+], BoardPlayerControl);
+export { BoardPlayerControl };
+//# sourceMappingURL=ox-board-player-control.js.map

package/dist/src/ox-board-player-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-board-player-control.js","sourceRoot":"","sources":["../../src/ox-board-player-control.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-fab'\nimport '@material/mwc-icon'\nimport './ox-board-wrapper'\nimport './player/board-player-carousel'\n\nimport { LitElement, PropertyValues, css, html } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { exitfullscreen, togglefullscreen } from './utils/fullscreen'\n\nimport { SwipeListener } from './utils/swipe-listener'\nimport { style } from './ox-board-player-style'\n\n@customElement('ox-board-player-control')\nexport class BoardPlayerControl extends LitElement {\n  static styles = css`\n    div > * {\n      cursor: pointer;\n      user-select: none;\n    }\n\n    #joystick {\n      position: relative;\n      box-sizing: border-box;\n      border: 2px solid tomato;\n      background-color: #c34827;\n      box-shadow: 0 0 5px #000;\n      width: 100%;\n      height: 100%;\n      grid-column: 1 / span 2;\n      border-radius: 50%;\n      z-index: 2;\n      grid-row: 1 / span 3;\n    }\n\n    #joystick mwc-icon {\n      position: absolute;\n      display: block;\n      width: 20px;\n      height: 20px;\n      font-size: 25px;\n      line-height: 0.7;\n    }\n\n    mwc-icon#up {\n      left: 29px;\n    }\n\n    mwc-icon#left {\n      top: 32px;\n      left: -2px;\n    }\n\n    mwc-icon#play,\n    mwc-icon#pause {\n      left: 20px;\n      top: 20px;\n      width: 40px;\n      height: 40px;\n      border: 1px solid rgba(0, 0, 0, 0.15);\n      border-radius: 50%;\n      background-color: rgba(0, 0, 0, 0.15);\n      font-size: 45px;\n      line-height: 0.9;\n    }\n\n    mwc-icon#right {\n      top: 31px;\n      left: 60px;\n    }\n\n    mwc-icon#down {\n      left: 29px;\n      top: 63px;\n    }\n\n    mwc-icon#pause {\n      text-indent: -2px;\n    }\n\n    #setting-container {\n      grid-column: 2 / span 2;\n      grid-row: 2;\n      gap: 0 10px;\n      border-radius: 12px;\n      background: rgba(0, 0, 0, 0.7);\n      height: 100%;\n      box-shadow: rgb(0, 0, 0) 0px 0px 5px;\n      display: grid;\n      grid-template-columns: 1fr 60px;\n      align-items: center;\n      padding-left: 60px;\n      padding-right: 5px;\n    }\n\n    #setting {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      grid-gap: 0 10px;\n    }\n\n    #setting mwc-icon {\n      font-size: 22px;\n      color: rgba(255, 174, 53, 0.8);\n    }\n\n    #setting input {\n      width: 50px;\n      margin-right: 5px;\n      font-size: 14px;\n      background-color: transparent;\n      border: none;\n      border-bottom: 1px solid #fff;\n      color: #fff;\n      text-align: right;\n    }\n\n    #setting select {\n      border: none;\n      font-size: 14px;\n    }\n\n    #setting input:focus {\n      outline: none;\n    }\n\n    #schedule-container {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    #grid-setting-container {\n      display: flex;\n      align-items: center;\n      justify-content: space-between;\n    }\n\n    #etc {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      align-items: center;\n      justify-items: center;\n    }\n\n    #etc mwc-icon {\n      font-size: 30px;\n    }\n  `\n\n  @property({ type: Array }) boards: Array<any> = []\n  @property({ type: Number }) playtime = 30\n  @property({ type: Number }) columns = 1\n  @property({ type: Number }) rows = 1\n  @property({ type: Boolean }) started = false\n  @property({ type: Boolean }) playing = false\n  @property({ type: Object }) provider: any\n\n  @state() _controlAnimation?: Animation\n  @state() _transferTimer?: any\n  @state() _currentPlayer?: any\n  @state() _fullscreened = false\n\n  @query('#control') _control!: HTMLElement\n\n  render() {\n    return html`\n      <slot @mousemove=${() => this.onMousemove()} @transform=${() => this.onTransform()} tabindex=\"-1\">\n        ${this.started\n          ? html`\n              <ox-board-player-carousel axis=\"y\" .rows=${this.rows} .columns=${this.columns} player>\n                ${this.boards.map(\n                  item =>\n                    html` <ox-board-wrapper page .sceneId=${item.id} .provider=${this.provider}> </ox-board-wrapper> `\n                )}\n              </ox-board-player-carousel>\n            `\n          : html``}\n      </slot>\n\n      <div id=\"control\" @mouseover=${() => this.onMouseoverControl()} hidden>\n        <div id=\"joystick\">\n          <mwc-icon id=\"up\" @click=${() => this.onTapUp()}>keyboard_arrow_up</mwc-icon>\n          <mwc-icon id=\"left\" @click=${() => this.onTapLeft()}>keyboard_arrow_left</mwc-icon>\n          <mwc-icon id=\"play\" @click=${() => this.onTapPlay()} ?hidden=${this.playing}>play_arrow</mwc-icon>\n          <mwc-icon id=\"pause\" @click=${() => this.onTapPause()} ?hidden=${!this.playing}>pause</mwc-icon>\n          <mwc-icon id=\"right\" @click=${() => this.onTapRight()}>keyboard_arrow_right</mwc-icon>\n          <mwc-icon id=\"down\" @click=${() => this.onTapDown()}>keyboard_arrow_down</mwc-icon>\n        </div>\n\n        <div id=\"setting-container\">\n          <div id=\"setting\">\n            <label id=\"schedule-container\">\n              <mwc-icon id=\"schedule\">schedule</mwc-icon>\n              <input\n                .value=${this.playtime}\n                @change=${(e: Event) => (this.playtime = Number((e.target as HTMLInputElement).value))}\n              />\n              sec.\n            </label>\n            <div id=\"grid-setting-container\">\n              <mwc-icon id=\"view_module\">view_module</mwc-icon>\n              <select\n                .value=${this.rows}\n                @change=${(e: Event) => (this.rows = Number((e.target as HTMLInputElement).value))}\n              >\n                ${[1, 2, 3, 4, 5].map(row => html` <option>${row}</option> `)}\n              </select>\n              x\n              <select\n                .value=${this.columns}\n                @change=${(e: Event) => (this.columns = Number((e.target as HTMLInputElement).value))}\n              >\n                ${[1, 2, 3, 4, 5].map(column => html` <option>${column}</option> `)}\n              </select>\n            </div>\n          </div>\n\n          <div id=\"etc\">\n            <mwc-icon id=\"fullscreen\" @click=${() => this.onTapFullscreen()} ?hidden=${this._fullscreened}\n              >fullscreen</mwc-icon\n            >\n            <mwc-icon id=\"fullscreen-exit\" @click=${() => this.onTapFullscreen()} ?hidden=${!this._fullscreened}\n              >fullscreen_exit</mwc-icon\n            >\n            <mwc-icon id=\"close\" @click=${() => this.onTapClose()}>close</mwc-icon>\n          </div>\n        </div>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    SwipeListener(this)\n\n    this.addEventListener('swipe', (e: Event) => {\n      var directions = (e as any).detail.directions\n\n      if (directions.left) {\n        this.onTapRight()\n      } else if (directions.right) {\n        this.onTapLeft()\n      } else if (directions.top) {\n        this.onTapDown()\n      } else if (directions.bottom) {\n        this.onTapUp()\n      }\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('boards') || changes.has('columns') || changes.has('rows')) {\n      this.boards && this.boards.length > 0 ? this.restart() : this.stop()\n    } else if (changes.has('playtime') && this.playing) {\n      this._resetTransformTimer()\n    }\n  }\n\n  async _resetFadeTimer(stop?: boolean) {\n    if (!this._controlAnimation) {\n      this._controlAnimation = this._control.animate(\n        [\n          {\n            opacity: 1,\n            easing: 'ease-in'\n          },\n          { opacity: 0 }\n        ],\n        { delay: 1000, duration: 2000 }\n      )\n    }\n\n    this._control.hidden = false\n\n    this._controlAnimation.cancel()\n    if (stop) return\n\n    try {\n      this._controlAnimation.play()\n      await this._controlAnimation.finished\n      this._control.hidden = true\n    } catch (e) {\n      /* cancelled */\n    }\n  }\n\n  _resetTransformTimer() {\n    clearTimeout(this._transferTimer)\n\n    this.playing = true\n\n    if (this._currentPlayer) {\n      this._transferTimer = setTimeout(() => {\n        if (this._transferTimer) this._currentPlayer.next()\n      }, this.playtime * 1000)\n    }\n  }\n\n  onMousemove() {\n    this._resetFadeTimer()\n  }\n\n  onMouseoverControl() {\n    this._resetFadeTimer(true)\n  }\n\n  onTapFullscreen() {\n    togglefullscreen(\n      this,\n      () => {\n        this._fullscreened = true\n        this.focus()\n      },\n      () => {\n        this._fullscreened = false\n        this.focus()\n      }\n    )\n  }\n\n  onTransform() {\n    requestAnimationFrame(() => this.started && this.playing && this._resetTransformTimer())\n  }\n\n  onTapPlay() {\n    this._resetTransformTimer()\n  }\n\n  onTapPause() {\n    clearTimeout(this._transferTimer)\n    this.playing = false\n  }\n\n  onTapLeft() {\n    this._currentPlayer.axis = 'y'\n    this._currentPlayer.previous()\n  }\n\n  onTapRight() {\n    this._currentPlayer.axis = 'y'\n    this._currentPlayer.next()\n  }\n\n  onTapUp() {\n    this._currentPlayer.axis = 'x'\n    this._currentPlayer.next()\n  }\n\n  onTapDown() {\n    this._currentPlayer.axis = 'x'\n    this._currentPlayer.previous()\n  }\n\n  onTapClose() {\n    if (this._fullscreened) {\n      exitfullscreen()\n    }\n\n    window.history.back()\n  }\n\n  async restart() {\n    await this.stop()\n    await this.start()\n  }\n\n  async start() {\n    if (!this.boards || this.boards.length == 0) return\n\n    this.started = true\n    this.playing = true\n\n    await this.updateComplete\n\n    this._currentPlayer = this.renderRoot.querySelector(':not([style*=\"display: none\"])[player]')\n\n    this._resetTransformTimer()\n    this._resetFadeTimer()\n\n    this.focus()\n  }\n\n  async stop() {\n    clearTimeout(this._transferTimer)\n\n    this._currentPlayer && this._currentPlayer.stop()\n    this.started = false\n\n    /**\n     * this.started = false 로 인한 update를 강제하기 위함임.\n     * this.start() 가 바로 호출되어 this.started 의 변화가 render에 반영되지 않을 수 있으므로.\n     */\n    await this.updateComplete\n  }\n}\n"]}

package/dist/src/ox-board-player-style.d.ts

@@ -0,0 +1 @@
+export declare const style: import("lit-element").CSSResult;

package/dist/src/ox-board-player-style.js

@@ -0,0 +1,200 @@
+import { css } from 'lit-element';
+export const style = css `
+  :host {
+    display: flex;
+    position: relative;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    justify-content: center;
+    align-items: center;
+  }
+
+  ::slotted(*) {
+    border: none;
+  }
+
+  ::slotted > * {
+    flex: 1;
+  }
+
+  board-wrapper {
+    width: 100%;
+    height: 100%;
+    position: relative;
+  }
+
+  board-wrapper[front] {
+    background: black;
+  }
+
+  board-wrapper[back] {
+    background: black;
+  }
+
+  #control {
+    position: absolute;
+    bottom: 1vh;
+    width: 100vw;
+    max-width: 435px;
+    display: grid;
+    grid-template-columns: 42px 42px 1fr;
+    color: white;
+    justify-content: center;
+    align-items: center;
+    grid-auto-flow: dense;
+    padding: 5px;
+    box-sizing: border-box;
+    grid-template-rows: 12px 60px 12px;
+  }
+
+  #control[hidden] {
+    display: none;
+  }
+
+  #control > div > * {
+    cursor: pointer;
+    user-select: none;
+  }
+
+  #joystick {
+    position: relative;
+    box-sizing: border-box;
+    border: 2px solid tomato;
+    background-color: #c34827;
+    box-shadow: 0 0 5px #000;
+    width: 100%;
+    height: 100%;
+    grid-column: 1 / span 2;
+    border-radius: 50%;
+    z-index: 2;
+    grid-row: 1 / span 3;
+  }
+
+  #joystick mwc-icon {
+    position: absolute;
+    display: block;
+    width: 20px;
+    height: 20px;
+    font-size: 25px;
+    line-height: 0.7;
+  }
+
+  mwc-icon#up {
+    left: 29px;
+  }
+
+  mwc-icon#left {
+    top: 32px;
+    left: -2px;
+  }
+
+  mwc-icon#play,
+  mwc-icon#pause {
+    left: 20px;
+    top: 20px;
+    width: 40px;
+    height: 40px;
+    border: 1px solid rgba(0, 0, 0, 0.15);
+    border-radius: 50%;
+    background-color: rgba(0, 0, 0, 0.15);
+    font-size: 45px;
+    line-height: 0.9;
+  }
+
+  mwc-icon#right {
+    top: 31px;
+    left: 60px;
+  }
+
+  mwc-icon#down {
+    left: 29px;
+    top: 63px;
+  }
+
+  mwc-icon#pause {
+    text-indent: -2px;
+  }
+
+  #setting-container {
+    grid-column: 2 / span 2;
+    grid-row: 2;
+    gap: 0 10px;
+    border-radius: 12px;
+    background: rgba(0, 0, 0, 0.7);
+    height: 100%;
+    box-shadow: rgb(0, 0, 0) 0px 0px 5px;
+    display: grid;
+    grid-template-columns: 1fr 60px;
+    align-items: center;
+    padding-left: 60px;
+    padding-right: 5px;
+  }
+
+  #setting {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: 0 10px;
+  }
+
+  #setting mwc-icon {
+    font-size: 22px;
+    color: rgba(255, 174, 53, 0.8);
+  }
+
+  #setting input {
+    width: 50px;
+    margin-right: 5px;
+    font-size: 14px;
+    background-color: transparent;
+    border: none;
+    border-bottom: 1px solid #fff;
+    color: #fff;
+    text-align: right;
+  }
+
+  #setting select {
+    border: none;
+    font-size: 14px;
+  }
+
+  #setting input:focus {
+    outline: none;
+  }
+
+  #schedule-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  #grid-setting-container {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  #etc {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    align-items: center;
+    justify-items: center;
+  }
+
+  #etc mwc-icon {
+    font-size: 30px;
+  }
+
+  #control [hidden] {
+    display: none;
+  }
+
+  @media screen and (max-width: 460px) {
+    #setting {
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+    }
+  }
+`;
+//# sourceMappingURL=ox-board-player-style.js.map

package/dist/src/ox-board-player-style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-board-player-style.js","sourceRoot":"","sources":["../../src/ox-board-player-style.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAA;AAEjC,MAAM,CAAC,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqMvB,CAAA","sourcesContent":["import { css } from 'lit-element'\n\nexport const style = css`\n  :host {\n    display: flex;\n    position: relative;\n    flex-direction: column;\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    justify-content: center;\n    align-items: center;\n  }\n\n  ::slotted(*) {\n    border: none;\n  }\n\n  ::slotted > * {\n    flex: 1;\n  }\n\n  board-wrapper {\n    width: 100%;\n    height: 100%;\n    position: relative;\n  }\n\n  board-wrapper[front] {\n    background: black;\n  }\n\n  board-wrapper[back] {\n    background: black;\n  }\n\n  #control {\n    position: absolute;\n    bottom: 1vh;\n    width: 100vw;\n    max-width: 435px;\n    display: grid;\n    grid-template-columns: 42px 42px 1fr;\n    color: white;\n    justify-content: center;\n    align-items: center;\n    grid-auto-flow: dense;\n    padding: 5px;\n    box-sizing: border-box;\n    grid-template-rows: 12px 60px 12px;\n  }\n\n  #control[hidden] {\n    display: none;\n  }\n\n  #control > div > * {\n    cursor: pointer;\n    user-select: none;\n  }\n\n  #joystick {\n    position: relative;\n    box-sizing: border-box;\n    border: 2px solid tomato;\n    background-color: #c34827;\n    box-shadow: 0 0 5px #000;\n    width: 100%;\n    height: 100%;\n    grid-column: 1 / span 2;\n    border-radius: 50%;\n    z-index: 2;\n    grid-row: 1 / span 3;\n  }\n\n  #joystick mwc-icon {\n    position: absolute;\n    display: block;\n    width: 20px;\n    height: 20px;\n    font-size: 25px;\n    line-height: 0.7;\n  }\n\n  mwc-icon#up {\n    left: 29px;\n  }\n\n  mwc-icon#left {\n    top: 32px;\n    left: -2px;\n  }\n\n  mwc-icon#play,\n  mwc-icon#pause {\n    left: 20px;\n    top: 20px;\n    width: 40px;\n    height: 40px;\n    border: 1px solid rgba(0, 0, 0, 0.15);\n    border-radius: 50%;\n    background-color: rgba(0, 0, 0, 0.15);\n    font-size: 45px;\n    line-height: 0.9;\n  }\n\n  mwc-icon#right {\n    top: 31px;\n    left: 60px;\n  }\n\n  mwc-icon#down {\n    left: 29px;\n    top: 63px;\n  }\n\n  mwc-icon#pause {\n    text-indent: -2px;\n  }\n\n  #setting-container {\n    grid-column: 2 / span 2;\n    grid-row: 2;\n    gap: 0 10px;\n    border-radius: 12px;\n    background: rgba(0, 0, 0, 0.7);\n    height: 100%;\n    box-shadow: rgb(0, 0, 0) 0px 0px 5px;\n    display: grid;\n    grid-template-columns: 1fr 60px;\n    align-items: center;\n    padding-left: 60px;\n    padding-right: 5px;\n  }\n\n  #setting {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    grid-gap: 0 10px;\n  }\n\n  #setting mwc-icon {\n    font-size: 22px;\n    color: rgba(255, 174, 53, 0.8);\n  }\n\n  #setting input {\n    width: 50px;\n    margin-right: 5px;\n    font-size: 14px;\n    background-color: transparent;\n    border: none;\n    border-bottom: 1px solid #fff;\n    color: #fff;\n    text-align: right;\n  }\n\n  #setting select {\n    border: none;\n    font-size: 14px;\n  }\n\n  #setting input:focus {\n    outline: none;\n  }\n\n  #schedule-container {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  #grid-setting-container {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  #etc {\n    display: grid;\n    grid-template-columns: 1fr 1fr;\n    align-items: center;\n    justify-items: center;\n  }\n\n  #etc mwc-icon {\n    font-size: 30px;\n  }\n\n  #control [hidden] {\n    display: none;\n  }\n\n  @media screen and (max-width: 460px) {\n    #setting {\n      grid-template-columns: 1fr;\n      grid-template-rows: 1fr 1fr;\n    }\n  }\n`\n"]}

package/dist/src/ox-board-player.d.ts

@@ -0,0 +1,39 @@
+import '@material/mwc-fab';
+import '@material/mwc-icon';
+import './ox-board-wrapper';
+import './player/board-player-carousel';
+import { LitElement, PropertyValues } from 'lit';
+export declare class BoardPlayer extends LitElement {
+    static styles: import("lit").CSSResult;
+    boards: Array<any>;
+    playtime: number;
+    columns: number;
+    rows: number;
+    started: boolean;
+    playing: boolean;
+    provider: any;
+    _controlAnimation?: Animation;
+    _transferTimer?: any;
+    _currentPlayer?: any;
+    _fullscreened: boolean;
+    _control: HTMLElement;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    _resetFadeTimer(stop?: boolean): Promise<void>;
+    _resetTransformTimer(): void;
+    onMousemove(): void;
+    onMouseoverControl(): void;
+    onTapFullscreen(): void;
+    onTransform(): void;
+    play(): void;
+    pause(): void;
+    moveLeft(): void;
+    moveRight(): void;
+    moveUp(): void;
+    moveDown(): void;
+    onTapClose(): void;
+    restart(): Promise<void>;
+    start(): Promise<void>;
+    stop(): Promise<void>;
+}