@operato/board 1.4.62 → 1.4.64

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@operato/board",
-  "version": "1.4.62",
+  "version": "1.4.64",
   "description": "Webcomponent for board following open-wc recommendations",
   "author": "heartyoh",
   "main": "dist/src/index.js",
@@ -88,18 +88,18 @@
   },
   "dependencies": {
     "@open-wc/scoped-elements": "^2.0.0-next.6",
-    "@operato/app": "^1.4.62",
-    "@operato/data-grist": "^1.4.39",
-    "@operato/font": "^1.4.62",
-    "@operato/graphql": "^1.4.20",
-    "@operato/i18n": "^1.4.36",
-    "@operato/input": "^1.4.39",
-    "@operato/layout": "^1.4.32",
-    "@operato/markdown": "^1.4.61",
-    "@operato/popup": "^1.4.32",
-    "@operato/property-editor": "^1.4.62",
-    "@operato/styles": "^1.4.11",
-    "@operato/utils": "^1.4.28",
+    "@operato/app": "^1.4.64",
+    "@operato/data-grist": "^1.4.64",
+    "@operato/font": "^1.4.64",
+    "@operato/graphql": "^1.4.64",
+    "@operato/i18n": "^1.4.64",
+    "@operato/input": "^1.4.64",
+    "@operato/layout": "^1.4.64",
+    "@operato/markdown": "^1.4.64",
+    "@operato/popup": "^1.4.64",
+    "@operato/property-editor": "^1.4.64",
+    "@operato/styles": "^1.4.64",
+    "@operato/utils": "^1.4.64",
     "@polymer/paper-dropdown-menu": "^3.2.0",
     "@types/file-saver": "^2.0.4",
     "@types/sortablejs": "^1.10.7",
@@ -148,5 +148,5 @@
       "prettier --write"
     ]
   },
-  "gitHead": "889a8429b0cc8fb4579c2090d4586f1feebf4dae"
+  "gitHead": "47382eb5b652aeb12fc530a9508921824e19aca0"
 }

package/src/data-storage/data-storage.ts

@@ -4,12 +4,14 @@ import { Component, PersistentDataStorage } from '@hatiolab/things-scene'
 
 class BoardDatabase extends Dexie {
   board_data!: Dexie.Table<IBoardData, number> // number = type of the primkey
+  playlist_data!: Dexie.Table<IPlayListData, number> // number = type of the primkey
   //...other tables goes here...
 
   constructor() {
     super('operato-board-database')
     this.version(1).stores({
-      board_data: '[board+refid]'
+      board_data: '[board+refid]',
+      playlist_data: '[playlist]'
       //...other tables goes here...
     })
   }
@@ -23,9 +25,20 @@ interface IBoardData {
   timestamp: number
 }
 
+interface IPlayListData {
+  id?: number
+  playlist: string
+  setting: {
+    playtime: number
+    columns: number
+    rows: number
+  }
+  timestamp: number
+}
+
 const db = new BoardDatabase()
 
-export class DataStorage implements PersistentDataStorage {
+export class BoardDataStorage implements PersistentDataStorage {
   private id: string
 
   constructor(id: string) {
@@ -45,3 +58,18 @@ export class DataStorage implements PersistentDataStorage {
     await db.board_data.where({ board: this.id, refid: key.state.refid }).delete()
   }
 }
+
+export class PlaylistStorage implements PersistentDataStorage {
+  public async load(key: String): Promise<any> {
+    const saved = await db.playlist_data.where({ playlist: key }).first()
+    return saved?.setting
+  }
+
+  public async save(key: String, value: any): Promise<void> {
+    await db.playlist_data.put({ playlist: key.toString(), setting: value, timestamp: Date.now() })
+  }
+
+  public async clear(key: String): Promise<void> {
+    await db.playlist_data.where({ playlist: key }).delete()
+  }
+}

package/src/index.ts

@@ -1,7 +1,7 @@
 export * from './types.js'
 
 export { registerDefaultGroups } from './component/register-default-groups.js'
-export { DataStorage } from './data-storage/data-storage.js'
+export { BoardDataStorage, PlaylistStorage } from './data-storage/data-storage.js'
 
 export * from './ox-board-viewer.js'
 export * from './ox-board-player.js'

package/src/ox-board-player.ts

@@ -8,8 +8,11 @@ import { customElement, property, query, state } from 'lit/decorators.js'
 
 import { exitfullscreen, SwipeListener, togglefullscreen } from '@operato/utils'
 
+import { PlaylistStorage } from './data-storage/data-storage.js'
 import { style } from './ox-board-player-style'
 
+const DEFAULT_PLAYLIST = String('__default__')
+
 @customElement('ox-board-player')
 export class BoardPlayer extends LitElement {
   static styles = style
@@ -29,6 +32,8 @@ export class BoardPlayer extends LitElement {
 
   @query('#control') _control!: HTMLElement
 
+  private playlistStorage: PlaylistStorage = new PlaylistStorage()
+
   render() {
     return html`
       <slot @mousemove=${() => this.onMousemove()} @transform=${() => this.onTransform()} tabindex="-1">
@@ -59,23 +64,44 @@ export class BoardPlayer extends LitElement {
             <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))}
+                .value=${String(this.playtime)}
+                @change=${(e: Event) => {
+                  this.playtime = Number((e.target as HTMLInputElement).value)
+                  this.playlistStorage.save(DEFAULT_PLAYLIST, {
+                    playtime: this.playtime,
+                    columns: this.columns,
+                    rows: this.rows
+                  })
+                }}
               />
               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))}
+                .value=${String(this.rows)}
+                @change=${(e: Event) => {
+                  this.rows = Number((e.target as HTMLInputElement).value)
+                  this.playlistStorage.save(DEFAULT_PLAYLIST, {
+                    playtime: this.playtime,
+                    columns: this.columns,
+                    rows: this.rows
+                  })
+                }}
               >
                 ${[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))}
+                .value=${String(this.columns)}
+                @change=${(e: Event) => {
+                  this.columns = Number((e.target as HTMLInputElement).value)
+                  this.playlistStorage.save(DEFAULT_PLAYLIST, {
+                    playtime: this.playtime,
+                    columns: this.columns,
+                    rows: this.rows
+                  })
+                }}
               >
                 ${[1, 2, 3, 4, 5].map(column => html` <option>${column}</option> `)}
               </select>
@@ -96,7 +122,17 @@ export class BoardPlayer extends LitElement {
     `
   }
 
-  firstUpdated() {
+  async firstUpdated() {
+    const setting = await this.playlistStorage.load('DEFAULT_PLAYLIST')
+
+    if (setting) {
+      const { playtime = 30, columns = 1, rows = 1 } = setting || {}
+
+      this.playtime = playtime
+      this.columns = columns
+      this.rows = rows
+    }
+
     SwipeListener(this)
 
     this.addEventListener('swipe', (e: Event) => {

package/src/ox-board-viewer.ts

@@ -9,7 +9,7 @@ import { Component, create, ReferenceProvider, SCENE_MODE } from '@hatiolab/thin
 import { isIOS, togglefullscreen } from '@operato/utils'
 import { ScrollbarStyles } from '@operato/styles'
 
-import { DataStorage } from './data-storage/data-storage.js'
+import { BoardDataStorage } from './data-storage/data-storage.js'
 import { DataSubscriptionProviderImpl } from './graphql/data-subscription.js'
 import { runScenario, startScenario } from './graphql/scenario.js'
 
@@ -243,7 +243,7 @@ export class BoardViewer extends LitElement {
       },
       mode: SCENE_MODE.VIEW,
       refProvider: this.provider!,
-      dataStorage: this.board.id !== 'preview' ? new DataStorage(this.board.id) : undefined,
+      dataStorage: this.board.id !== 'preview' ? new BoardDataStorage(this.board.id) : undefined,
       dataSubscriptionProvider: new DataSubscriptionProviderImpl()
     })