From 845b9f674c8f261580a22de08d110eb7837ed44b Mon Sep 17 00:00:00 2001
From: Alexander Goryushkin <aleotu@gmail.com>
Date: Fri, 22 Sep 2023 23:04:40 -0300
Subject: [PATCH 1/2] add div with title to metadata component code

---
 src/json-utils.js     | 30 +++++++++++++++++++++++++++++-
 src/viewer-styles.css | 19 +++++++++++++++++++
 2 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/src/json-utils.js b/src/json-utils.js
index d874a3810..abdac1f34 100644
--- a/src/json-utils.js
+++ b/src/json-utils.js
@@ -410,7 +410,35 @@ AFRAME.registerComponent('metadata', {
     sceneTitle: { default: '' },
     sceneId: { default: '' }
   },
-  init: function () {}
+  init: function () {
+    this.titleElement = undefined;
+  },
+  createTitleElement: function (titleText) {
+    const titleDiv = this.titleElement = document.createElement('div');
+    const newContent = document.createTextNode(titleText);
+    titleDiv.setAttribute('id', 'sceneTitle');
+    titleDiv.appendChild(newContent);
+    document.body.append(titleDiv);
+  },
+  updateTitleText: function (titleText) {
+    this.titleElement.textContent = titleText;
+  },
+  update: function (oldData) {
+    // If `oldData` is empty, then this means we're in the initialization process.
+    // No need to update.
+    if (Object.keys(oldData).length === 0) { return; }
+
+    const titleText = this.data.sceneTitle;
+    const titleElement = this.titleElement;
+
+    if (titleText !== oldData.sceneTitle) {
+      if (!titleElement) {
+        this.createTitleElement(titleText);
+      } else {
+        this.updateTitleText(titleText);
+      }
+    }   
+  }
 });
 
 AFRAME.registerComponent('set-loader-from-hash', {
diff --git a/src/viewer-styles.css b/src/viewer-styles.css
index 0418d02d9..f83b2c22a 100644
--- a/src/viewer-styles.css
+++ b/src/viewer-styles.css
@@ -137,3 +137,22 @@ body {
 	background: #6100FF;
 	z-index: 9999;
 }
+
+/********* scene title css *********/
+
+#sceneTitle {
+	position: fixed;
+	color: white;
+	font-size: 20px;
+	font-family: Lato;
+	font-weight: 400;
+	word-wrap: break-word;
+	bottom: 43px;
+	pointer-events: none;
+    z-index: 2;
+    width: 100%;
+    text-align: center;
+    height: 26px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
\ No newline at end of file

From 492cd301d24a9d3dbe8c3ba98f7f71ade2c9612e Mon Sep 17 00:00:00 2001
From: Alexander Goryushkin <aleotu@gmail.com>
Date: Fri, 6 Oct 2023 19:05:16 -0300
Subject: [PATCH 2/2] create scene-title component

add 'newTitle' event emitter to metadata component
---
 index.html        |  1 +
 src/json-utils.js | 20 ++++++++++++++++++--
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/index.html b/index.html
index 30a3c6ba0..e60360f10 100644
--- a/index.html
+++ b/index.html
@@ -47,6 +47,7 @@
       inspector="url: //3dstreet.app/dist/3dstreet-editor.js"
       notify
       metadata
+      scene-title
       >
       <a-assets>
         <!-- uncomment the line below to load assets from local github submodule -->
diff --git a/src/json-utils.js b/src/json-utils.js
index abdac1f34..a4160a9ea 100644
--- a/src/json-utils.js
+++ b/src/json-utils.js
@@ -410,8 +410,24 @@ AFRAME.registerComponent('metadata', {
     sceneTitle: { default: '' },
     sceneId: { default: '' }
   },
+  init: function () { },
+  update: function (oldData) {
+    const sceneTitle = this.data.sceneTitle;
+    if (sceneTitle !== oldData.sceneTitle) {
+      this.el.emit('newTitle', {sceneTitle: sceneTitle});
+    }  
+  }
+});
+
+AFRAME.registerComponent('scene-title', {
+  schema: {
+    titleText: { default: '' }
+  },
   init: function () {
     this.titleElement = undefined;
+    this.el.addEventListener('newTitle', (evt) => {
+      this.el.setAttribute('scene-title', 'titleText', evt.detail.sceneTitle);
+    });
   },
   createTitleElement: function (titleText) {
     const titleDiv = this.titleElement = document.createElement('div');
@@ -428,10 +444,10 @@ AFRAME.registerComponent('metadata', {
     // No need to update.
     if (Object.keys(oldData).length === 0) { return; }
 
-    const titleText = this.data.sceneTitle;
+    const titleText = this.data.titleText;
     const titleElement = this.titleElement;
 
-    if (titleText !== oldData.sceneTitle) {
+    if (titleText !== oldData.titleText) {
       if (!titleElement) {
         this.createTitleElement(titleText);
       } else {