@operato/board 0.2.15

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

@@ -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;
+    }
+  }
+`

package/src/ox-board-player.ts

@@ -0,0 +1,292 @@
+import '@material/mwc-fab'
+import '@material/mwc-icon'
+import './ox-board-wrapper'
+import './player/board-player-carousel'
+
+import { LitElement, PropertyValues, html } from 'lit'
+import { customElement, property, query, state } from 'lit/decorators.js'
+import { exitfullscreen, togglefullscreen } from './utils/fullscreen'
+
+import { SwipeListener } from './utils/swipe-listener'
+import { style } from './ox-board-player-style'
+
+@customElement('ox-board-player')
+export class BoardPlayer extends LitElement {
+  static styles = style
+
+  @property({ type: Array }) boards: Array<any> = []
+  @property({ type: Number }) playtime = 30
+  @property({ type: Number }) columns = 1
+  @property({ type: Number }) rows = 1
+  @property({ type: Boolean }) started = false
+  @property({ type: Boolean }) playing = false
+  @property({ type: Object }) provider: any
+
+  @state() _controlAnimation?: Animation
+  @state() _transferTimer?: any
+  @state() _currentPlayer?: any
+  @state() _fullscreened = false
+
+  @query('#control') _control!: HTMLElement
+
+  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.moveUp()}>keyboard_arrow_up</mwc-icon>
+          <mwc-icon id="left" @click=${() => this.moveLeft()}>keyboard_arrow_left</mwc-icon>
+          <mwc-icon id="play" @click=${() => this.play()} ?hidden=${this.playing}>play_arrow</mwc-icon>
+          <mwc-icon id="pause" @click=${() => this.pause()} ?hidden=${!this.playing}>pause</mwc-icon>
+          <mwc-icon id="right" @click=${() => this.moveRight()}>keyboard_arrow_right</mwc-icon>
+          <mwc-icon id="down" @click=${() => this.moveDown()}>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: Event) => (this.playtime = Number((e.target as HTMLInputElement).value))}
+              />
+              sec.
+            </label>
+            <div id="grid-setting-container">
+              <mwc-icon id="view_module">view_module</mwc-icon>
+              <select
+                .value=${this.rows}
+                @change=${(e: Event) => (this.rows = Number((e.target as HTMLInputElement).value))}
+              >
+                ${[1, 2, 3, 4, 5].map(row => html` <option>${row}</option> `)}
+              </select>
+              x
+              <select
+                .value=${this.columns}
+                @change=${(e: Event) => (this.columns = Number((e.target as HTMLInputElement).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: Event) => {
+      var directions = (e as any).detail.directions
+
+      if (directions.left) {
+        this.moveRight()
+      } else if (directions.right) {
+        this.moveLeft()
+      } else if (directions.top) {
+        this.moveDown()
+      } else if (directions.bottom) {
+        this.moveUp()
+      }
+    })
+
+    this.setAttribute('tabindex', '0')
+    this.addEventListener('keydown', (e: KeyboardEvent) => {
+      switch (e.key) {
+        case 'Right': // for IE/Edge
+        case 'ArrowRight':
+          e.stopPropagation()
+          this.moveRight()
+          break
+
+        case 'Left': // for IE/Edge
+        case 'ArrowLeft':
+          e.stopPropagation()
+          this.moveLeft()
+          break
+
+        case 'Up': // for IE/Edge
+        case 'ArrowUp':
+          e.stopPropagation()
+          this.moveUp()
+          break
+
+        case 'Down': // for IE/Edge
+        case 'ArrowDown':
+          e.stopPropagation()
+          this.moveDown()
+          break
+      }
+    })
+
+    this.focus()
+  }
+
+  updated(changes: PropertyValues<this>) {
+    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?: boolean) {
+    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())
+  }
+
+  play() {
+    this._resetTransformTimer()
+  }
+
+  pause() {
+    clearTimeout(this._transferTimer)
+    this.playing = false
+  }
+
+  moveLeft() {
+    this._currentPlayer.axis = 'y'
+    this._currentPlayer.previous()
+  }
+
+  moveRight() {
+    this._currentPlayer.axis = 'y'
+    this._currentPlayer.next()
+  }
+
+  moveUp() {
+    this._currentPlayer.axis = 'x'
+    this._currentPlayer.next()
+  }
+
+  moveDown() {
+    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
+  }
+}