1.2.3

changelog.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 2025-04-20 - 1.2.3 - fix(core)
+Update dependency versions and adjust UI CSS for fab and combox elements
+
+- Bumped @design.estate/dees-catalog, dees-domtools, dees-element, and @social.io/interfaces to newer versions in package.json
+- Updated devDependencies to latest compatible versions
+- Adjusted CSS positioning in sio-fab and sio-combox for improved layout
+
+## 2025-01-26 - 1.2.2 - fix(sio-recorder)
+Fixed the recording loop and ensured it stops correctly
+
+- Added an await for domtoolsPromise in startRecording method.
+- Introduced a while loop to manage the recording status effectively.
+- Added delay and stop function call within the loop to manage record sessions.
+
 ## 2025-01-25 - 1.2.1 - fix(sio-recorder)
 Enhance styling and positioning for rrweb player elements in SioRecorder component.
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social.io/catalog",
-  "version": "1.2.1",
+  "version": "1.2.3",
   "private": false,
   "description": "catalog for social.io",
   "main": "dist_ts_web/index.js",
@@ -15,26 +15,26 @@
   "author": "Lossless GmbH",
   "license": "UNLICENSED",
   "dependencies": {
-    "@design.estate/dees-catalog": "^1.2.0",
+    "@design.estate/dees-catalog": "^1.5.6",
-    "@design.estate/dees-domtools": "^2.0.64",
+    "@design.estate/dees-domtools": "^2.3.2",
-    "@design.estate/dees-element": "^2.0.39",
+    "@design.estate/dees-element": "^2.0.42",
     "@design.estate/dees-wcctools": "^1.0.90",
     "@losslessone_private/loint-pubapi": "^1.0.14",
-    "@social.io/interfaces": "^1.0.5",
+    "@social.io/interfaces": "^1.2.1",
     "rrweb": "2.0.0-alpha.4",
     "rrweb-player": "1.0.0-alpha.4",
     "rrweb-snapshot": "2.0.0-alpha.4"
   },
   "devDependencies": {
-    "@git.zone/tsbuild": "^2.1.84",
+    "@git.zone/tsbuild": "^2.3.2",
-    "@git.zone/tsbundle": "^2.0.15",
+    "@git.zone/tsbundle": "^2.2.5",
-    "@git.zone/tsrun": "^1.2.49",
+    "@git.zone/tsrun": "^1.3.3",
-    "@git.zone/tstest": "^1.0.90",
+    "@git.zone/tstest": "^1.0.96",
-    "@git.zone/tswatch": "^2.0.23",
+    "@git.zone/tswatch": "^2.1.0",
     "@push.rocks/projectinfo": "^5.0.2",
     "@push.rocks/smartenv": "^5.0.12",
-    "@push.rocks/tapbundle": "^5.3.0",
+    "@push.rocks/tapbundle": "^5.6.3",
-    "@types/node": "^22.7.5"
+    "@types/node": "^22.14.1"
   },
   "files": [
     "ts/**/*",
@@ -58,5 +58,6 @@
   "bugs": {
     "url": "https://gitlab.com/social.io/private/catalog/issues"
   },
-  "homepage": "https://gitlab.com/social.io/private/catalog#readme"
+  "homepage": "https://gitlab.com/social.io/private/catalog#readme",
+  "packageManager": "pnpm@10.7.0+sha512.6b865ad4b62a1d9842b61d674a393903b871d9244954f652b8842c2b553c72176b278f64c463e52d40fff8aba385c235c8c9ecf5cc7de4fd78b8bb6d49633ab6"
 }

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@social.io/catalog',
-  version: '1.2.1',
+  version: '1.2.3',
   description: 'catalog for social.io'
 }

ts_web/elements/sio-combox.ts

@@ -4,6 +4,7 @@ import {
   html,
   customElement,
   type TemplateResult,
+  cssManager,
 } from '@design.estate/dees-element';
 import * as domtools from '@design.estate/dees-domtools';
 
@@ -124,7 +125,7 @@ export class SioCombox extends DeesElement {
           width: 100%;
           padding-bottom: 16px;
           grid-template-columns: repeat(2, 1fr);
-          background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 50%);
+          background-image: linear-gradient(to bottom, ${cssManager.bdTheme('#eeeeeb00', 'rgba(0, 0, 0, 0)')} 0%, ${cssManager.bdTheme('#eeeeebff', 'rgba(0, 0, 0, 1)')} 50%);
           padding-top: 24px;
         }
 

ts_web/elements/sio-fab.ts

@@ -120,7 +120,9 @@ export class SioFab extends DeesElement {
           height: 100%;
           font-size: 32px;
           color: ${cssManager.bdTheme('#777', '#999')};
-          top: 2px;
+          top: 0px;
+          left: 0px;
+          transform: translateY(2px);
         }
 
         #mainbox .icon.close dees-icon {
@@ -128,6 +130,8 @@ export class SioFab extends DeesElement {
           width: 100%;
           height: 100%;
           font-size: 24px;
+          top: 0px;
+          left: 0px;
           color: ${cssManager.bdTheme('#666', '#CCC')};
         }
 

ts_web/elements/sio-recorder.ts

@@ -32,6 +32,11 @@ export class SioRecorder extends DeesElement {
    */
   private events: IRecordingEvent[] = [];
 
+  /**
+   * status
+   */
+  public status: 'recording' | 'playing' | 'stopped' = 'stopped';
+
   /**
    * A reference to rrweb's stop recording function.
    * We'll store it when we begin a record session so we can call it later.
@@ -59,9 +64,7 @@ export class SioRecorder extends DeesElement {
   `;
 
   render() {
-    return html`
+    return html` <div id="playback"></div> `;
-      <div id="playback"></div>
-    `;
   }
 
   /**
@@ -101,10 +104,13 @@ export class SioRecorder extends DeesElement {
    * Starts an rrweb recording session that tracks the entire DOM,
    * including canvases and cross-origin iframes (if permissible).
    */
-  private startRecording(): void {
+  private async startRecording(): void {
+    await this.domtoolsPromise;
+    this.status = 'recording';
     this.events = [];
 
     // For capturing "everything," enable advanced flags:
+    while (this.status === 'recording') {
       this.stopFn = rrweb.record({
         emit: (event: any) => {
           // If you have a stricter type:
@@ -118,6 +124,9 @@ export class SioRecorder extends DeesElement {
 
         // checkoutEveryNms: 1000,        // check every N milliseconds
       });
+      await this.domtools.convenience.smartdelay.delayFor(1000);
+      await this.stopFn();
+    }
 
     console.log('Recording has started...');
   }
@@ -147,7 +156,6 @@ export class SioRecorder extends DeesElement {
         showController: false,
         width: this.playbackDiv.offsetWidth,
         height: this.playbackDiv.offsetHeight,
-
       },
     });
     this.domtools.convenience.smartdelay.delayFor(0).then(async () => {