architwin 1.0.14 → 1.0.16

package/architwin.ts

@@ -0,0 +1,1656 @@
+import axios from "axios";
+import type { MpSdk, ShowcaseBundleWindow, Scene } from "./bundle/sdk";
+import type {
+  ITag,
+  IUser,
+  ISpace,
+  IShowcaseObject,
+  I3DObject,
+  IMPConfig,
+  ISweep,
+  IVideoObject,
+  ITagPublic,
+  NearbyPayload,
+  NearbyObjects,
+  ISlideshowObject,
+  IObjectData,
+
+} from "./types";
+import { distance} from "mathjs";
+// @ts-ignore
+// import * as _config from './config.json'
+import JSZip from "jszip";
+import JSZipUtils from "jszip-utils";
+
+const _config = {
+  aws: {
+    region: "ap-northeast-1",
+    accessKeyId: "AKIAVVUXZ66KW7GBSW7A",
+    secretAccessKey: "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'",
+  },
+  mp: {
+    sdkKey: "a3ae8341bd8f44899eba16df86307d7d",
+    urlParams: [
+      "help",
+      "play",
+      "nt",
+      "play",
+      "qs",
+      "brand",
+      "dh",
+      "tour",
+      "gt",
+      "hr",
+      "mls",
+      "mt",
+      "tagNav",
+      "pin",
+      "portal",
+      "f",
+      "fp",
+      "lang",
+      "kb",
+      "lp",
+      "st",
+      "title",
+      "tourcta",
+      "wts",
+      "ts",
+      "hl",
+      "vr",
+      "nozoom",
+      "search",
+      "wh",
+    ],
+  },
+};
+
+const apiURL = "http://localhost:5173/api/v1/";
+const sdkKey = _config.mp.sdkKey;
+const urlParams = _config.mp.urlParams;
+
+console.log("apiURL...", apiURL);
+// start here
+let _api = {} as any;
+let _space = {} as ISpace;
+let _atwin = {} as MpSdk;
+let _tags = [] as ITag[];
+
+let tags = [] as ITagPublic[];
+let sweeps = [] as any;
+
+let _allSlideShow = [] as ISlideshowObject[]
+let _slideShowImage = [] as any
+let _currentSlideShowID = 0
+let _currentSlideIndex = 0
+let _currentSlideShow = null
+var _timer = null
+let _videos = [] as IVideoObject[]
+let _currentViewMode = "" as MpSdk.Mode.Mode | null
+let _3DXObject = [] as Scene.INode[]
+let _unrenderedObjects = [] as IShowcaseObject[]
+let _transformControlNode:Scene.INode
+let _inputControlComponent = null
+let _selectedObject = {} as IObjectData
+let previousTimestamp:number = 0;
+
+let _currentSweep = {} as ISweep;
+let _currentCameraPose = {} as any;
+let _sweeps = [] as any;
+
+
+
+// end here
+
+
+let _atwinSrc = `/bundle/showcase.html?m=''&applicationKey=${sdkKey}&newtags=1`;
+
+// =========================================== INITIALIZATION ===========================================
+
+// initialization: loginUser, iframe, space, tags, objects
+async function connectSpace(
+  url: string,
+  auth: { apiKey: string; user: IUser },
+  config: IMPConfig
+) {
+  console.log("connectSpace()");
+
+  console.log("__config", config);
+
+  const api = axios.create({
+    baseURL: apiURL,
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+      "Content-Type": "application/json",
+      Authorization: auth.apiKey,
+    },
+  });
+
+  _api = api;
+
+  const showcase = document.getElementById(
+    config.iframeId
+  ) as HTMLIFrameElement;
+
+  const spaceId = getSpaceId(url);
+
+  if (!spaceId) {
+    console.error("spaceId is undefined");
+    return;
+  }
+
+  await loginUser(auth.user);
+
+  const space = await getSpace(spaceId);
+
+  if (!space) {
+    console.error("space is undefined");
+    return;
+  }
+
+  setSpace(space);
+
+  _atwinSrc = getIframeSrc(config);
+
+  console.log("__atwinSrc", _atwinSrc);
+
+  showcase.src = _atwinSrc;
+
+  const tags = await getTags(space);
+
+  if (!tags) {
+    console.log("tags is undefined");
+    return;
+  }
+
+  setTags(tags);
+
+  const objects = await get3DObjects(spaceId);
+
+  if (!objects) {
+    console.log("objects is undefined");
+    return;
+  }
+
+  //setObjects(objects);
+
+  showcase.contentWindow?.location.reload(); // force reload iframe
+
+  const showcaseWindow = showcase.contentWindow as ShowcaseBundleWindow;
+
+  showcase.addEventListener("load", async () => {
+    console.log('iframe.addEventListener("load")');
+
+    console.log("showcaseWindow", showcaseWindow);
+
+    try {
+      _atwin = await showcaseWindow.MP_SDK.connect(showcaseWindow);
+      console.log("Hello Bundle SDK", _atwin);
+      onShowcaseConnect();
+    } catch (e) {
+      console.error(e);
+    }
+  });
+}
+
+// start here
+// After connectSpace it will render: tags, objects, and listeners
+async function onShowcaseConnect(): Promise<void> {
+  console.log("onShowcaseConnect()");
+  try {
+    const modelData = await _atwin.Model.getData();
+    console.log("Model sid:" + modelData.sid);
+
+    _atwin.App.state.subscribe(async (appState) => {
+      console.log("appState", appState);
+
+      if (appState.phase === _atwin.App.Phase.LOADING) {
+        console.log("App is loading...");
+        await hideTags();
+      } else if (appState.phase === _atwin.App.Phase.STARTING) {
+        console.log("App is starting...");
+        await showTags(_tags);
+      } else if (appState.phase === _atwin.App.Phase.PLAYING) {
+        console.log("App is playing...");
+        await getSweeps();
+        await setLighting()
+        _atwin.Sweep.current.subscribe(function (currentSweep) {
+          // Change to the current sweep has occurred.
+          if (currentSweep.sid === "") {
+            console.log("Not currently stationed at a sweep position");
+          } else {
+            _currentSweep = currentSweep;
+            console.log("Currently at sweep", _currentSweep.id);
+
+              // check auto play
+              videoAutoPlay()
+
+              // console.log("_3DXObject "+_3DXObject.length)
+              // _3DXObject.forEach(obj => {
+              //   console.log("3D Position "+ JSON.stringify(obj.position))
+              // })
+            }
+        });
+  
+          _atwin.Camera.pose.subscribe(async function (pose) {
+            // Changes to the Camera pose have occurred.
+            _currentCameraPose = pose;
+            console.log("Current Camera Pose", _currentCameraPose);
+            const hasElapsed = hasTimeElapsed(300)
+            if (hasElapsed) {
+              console.log("_unrenderedObjects "+_unrenderedObjects.length)
+              await renderOnDemand()
+            }
+            if (hasTimeElapsed(1000)) {
+              getNearbyObjects({type: 'ALL',distance:2})
+            }
+          });
+          
+          _atwin.Mode.current.subscribe((mode) => {
+            _currentViewMode = mode;
+          });
+      }
+    });
+  } catch (e) {
+    console.error(e);
+  }
+}
+
+// end here
+
+
+/**
+ * Super light weight alternative to lodash's debounce
+ * This function will allow you to debounce a function a set amoint in milliseconds
+ * Useful for improving performance if your function is inside a subscribe method
+ * @param maxTime milliseconds
+ * @returns {boolean}
+ */
+
+function hasTimeElapsed(maxTime:number):boolean {
+  const currentTimestamp = Date.now();
+
+  // Difference in milliseconds
+  const differenceInMilliseconds = (currentTimestamp - previousTimestamp) % 1000;
+  previousTimestamp = currentTimestamp
+  if (differenceInMilliseconds >= maxTime) {
+    console.log(`Elapsed more than ${maxTime}`);
+    return true
+  } else {
+    console.log(`Elapsed less than ${maxTime}`);
+    return false
+  }
+}
+
+/**
+ * This function detects and return objects fetched from the API that have NOT been rendered yet
+ * Not to be confused with getNearbyObjects which returns INodes that have already been rendered
+ * @constructor
+ * @param payload 
+ * @type {NearbyPayload}
+ * @returns {Array<IShowcaseObject>}
+ */
+
+function getNearbyUnrenderedObjects(payload:NearbyPayload):Array<IShowcaseObject>{
+  let toBeRendered = [] as IShowcaseObject[]
+  const currentPose = {
+    x: _currentCameraPose.position.x,
+    y: _currentCameraPose.position.y 
+  }
+  toBeRendered = _unrenderedObjects.filter(obj => {
+    const obj_pos = {
+      x: obj.object_position.x,
+      y: obj.object_position.y,
+    }
+    const distance = calculateDistance(currentPose,obj_pos)
+    return distance < payload.distance
+  })
+
+  const filtered = _unrenderedObjects.filter(obj=> {
+    return toBeRendered.indexOf(obj) === -1
+  })
+  _unrenderedObjects = filtered
+  console.log("render toBeRendered "+ toBeRendered.length)
+  return toBeRendered
+}
+
+/**
+ * This function returns an object that returns an array of 3D, video, and slideshow objects
+ * You can pass a object type as a object parameter to set what the contents of the returned objects will be
+ * @constructor
+ * @param payload 
+ * @type {NearbyPayload}
+ * @returns {NearbyObjects}
+ */
+
+function getNearbyObjects(payload:NearbyPayload):NearbyObjects{
+  if (payload.type === undefined || payload.type === '') {
+    payload.type = 'ALL'
+  }
+  if (payload.distance === undefined) {
+    payload.distance = 2
+  }
+
+  const pos1 = {
+    x: _currentCameraPose.position.x,
+    y: _currentCameraPose.position.y 
+  }
+  let three_d = [] as Scene.INode[]
+  let videos = [] as IVideoObject[]
+  let slideshows = [] as ISlideshowObject[]
+  if (payload.type === 'ALL' || '3DX') {
+    three_d = _3DXObject.filter(obj => {
+      const pos2 = {
+        x: obj.position.x,
+        y: obj.position.y
+      }
+      const distance = calculateDistance(pos1,pos2)
+      console.log("3DX Distance: "+distance)
+      return distance < payload.distance
+    })
+  }
+  if (payload.type === 'ALL' || 'VIDEO') {
+    videos = _videos.filter(vid => {
+      const pos2 = {
+        x: vid.node.position.x,
+        y: vid.node.position.y
+      }
+      const distance = calculateDistance(pos1,pos2)
+      console.log("Video Distance: "+distance)
+      return distance < payload.distance
+    })
+  }
+
+  if(payload.type === 'ALL' || 'SLIDESHOW'){
+
+    slideshows = _allSlideShow.filter(slide => {
+      const pos2 = {
+        x: slide.node.position.x,
+        y: slide.node.position.y
+      }
+      const distance = calculateDistance(pos1,pos2)
+      console.log("Slideshow Distance: "+distance)
+      return distance < payload.distance
+    })
+  }
+
+  console.log("nearby3DXObjects "+three_d.length)
+  console.log("nearbyVideos "+videos.length)
+  console.log("nearbySlideshows "+slideshows.length)
+  return {
+    x3d: three_d,
+    videos: videos,
+    slideshows: slideshows
+  }
+}
+
+async function show3DObjects(object: IShowcaseObject): Promise < void> {
+  const [sceneObject] = await _atwin.Scene.createObjects(1);
+  const id = Math.floor(Math.random() * 20);
+  const modelNode = sceneObject.addNode(id.toString());
+  const component = modelNode.addComponent(getComponentLoader(object), {
+    url: object.object_data?.amazon_uri,
+  });
+  if (!component.inputs) {
+    console.error("component.inputs is undefined");
+    return;
+  }
+
+  component.inputs.localScale = {
+    x: object.object_scale.x,
+    y: object.object_scale.y,
+    z: object.object_scale.z,
+  };
+
+  // @ts-ignore
+  modelNode.obj3D.position.set(
+    object.object_position.x,
+    object.object_position.y,
+    object.object_position.z
+  );
+
+  // @ts-ignore
+  modelNode.obj3D.rotation.set(
+    object.object_rotation.x,
+    object.object_rotation.y,
+    object.object_rotation.z
+  );
+
+  _3DXObject.push(modelNode)
+  console.log("_3DXObject "+_3DXObject.length)
+  modelNode.start();
+
+  //Spy on component
+  component.spyOnEvent(new ClickSpy(object,modelNode,component))
+}
+
+/**
+ * Renders objects if within set range
+ * This function SHOULD be debounced for better performance
+ * @constructor
+ */
+ async function renderOnDemand () {
+  if (_unrenderedObjects.length !== 0) {
+    console.log("renderOnDemand()")
+    const objects = getNearbyUnrenderedObjects({type:'',distance:2})
+    objects.forEach(async (obj) => {
+      if (
+        obj.object_data?.object_type === "FBX" ||
+        obj.object_data?.object_type === "GLB"
+      ) {
+        await show3DObjects(obj);
+      }else if (obj.object_data?.object_type === "MP4") {
+        await showVideoObjects(obj);
+      } else if (obj.object_data?.object_type === "ZIP") {
+        await showSlideScreenModel(obj);
+      }
+    })
+  }
+}
+
+
+// get iframe src with configurations (mp url parameters)
+function getIframeSrc(config: IMPConfig): string {
+  console.log("getIframeSrc()", config);
+
+  const modelId = _space.space_url.split("?m=")[1];
+
+  if (!modelId) {
+    console.error("modelId is undefined");
+    return "";
+  }
+  
+  let src = ``;
+  src += `architwin/bundle/showcase.html?m=${modelId}&applicationKey=${sdkKey}&newtags=1`;
+
+  for (let param of urlParams) {
+    if (param in config) {
+      // @ts-ignore
+      src += `&${param}=${config[param]}`;
+    }
+  }
+
+  return src;
+}
+
+// login user to fix cors error
+async function loginUser(user: IUser) {
+  console.log("loginUser(user)", user);
+
+  const response = await _api.post(
+    "/cas/tickets?email=" + user.email + "&password=" + user.password
+  );
+  console.log("loginUser, response", response.status, response.data);
+  if (response.status == 200) {
+    return response.data;
+  } else {
+    return response;
+  }
+}
+
+// get showcase/space data in api
+async function getSpace(spaceId: string): Promise<ISpace | null> {
+  console.log("getShowcase(spaceId: string)", spaceId);
+
+  const response = await _api.get(`showcases/id/${spaceId}`);
+  console.log("response", response);
+
+  if (response.status === 200) {
+    if (response.data.data.length === 0) {
+      console.error("No data");
+    }
+
+    return response.data.data[0];
+  } else {
+    console.error("Error in fetchShowcase()" + response);
+  }
+  return null;
+}
+
+function getSpaceId(url: string) {
+  const urlArray = url.split(
+    /^(([^:\/?#]+):)?(\/\/([^\/?#]*))?([^?#]*)(\?([^#]*))?(#(.*))?/
+  );
+  const path = urlArray[5];
+  const spaceId = path.split("/")[3];
+
+  console.log("urlArray", urlArray);
+  console.log("path", path);
+
+  if (!spaceId) {
+    console.error("spaceId is undefined");
+    return;
+  }
+  return spaceId;
+}
+
+function setSpace(space: ISpace): void {
+  console.log("setSpace(space: ISpace)", space);
+  _space = space;
+}
+
+// get tags from api
+async function getTags(space: ISpace): Promise<ITag[] | null> {
+  console.log("getTags()");
+
+  try {
+    const response = await _api.get(`tags/showcase-id/${space.id}`);
+    console.log("response", response);
+    if (response.status === 200) {
+      const tags = response.data.data;
+
+      if (!tags) {
+        console.error("tags is undefined");
+      }
+
+      return tags;
+    } else {
+      console.error("Custom Error: Unable to fetch tags");
+    }
+  } catch (error) {
+    console.error(error);
+  }
+
+  return null;
+}
+
+async function setTags(tags: ITag[]) {
+  console.log("setTags()", tags);
+  _tags = tags.map((tag) => {
+    //@ts-ignore
+    tag.json_data = JSON.parse(tag.json_data);
+    //@ts-ignore
+    tag.json_data.id = tag.json_data.sid;
+    return tag;
+  });
+
+  mapTags(_tags);
+}
+
+// get objects from api
+async function get3DObjects(showcase_id: string): Promise<IShowcaseObject[]> {
+  //This function will return the 3d objects associated with each
+  if (showcase_id) {
+    try {
+      const id = parseInt(showcase_id);
+
+      console.log("showcase_id " + id);
+
+      const response = await _api.get(`showcase-objects/showcase-id/${id}`);
+
+      const showcase_objects: Array<IShowcaseObject> = response.data.data;
+
+      console.log("showcase_objects " + JSON.stringify(showcase_objects));
+
+      const getRequests = showcase_objects.map((obj) =>
+        _api.get(`objects/id/${obj.object_id}`)
+      );
+      try {
+        const response = await axios.all(getRequests);
+
+        const object_data: Array<I3DObject> = response.map((res) => {
+          return res.data.data[0];
+        });
+        console.log("object_data" + JSON.stringify(object_data));
+        const threed_objects: Array<IShowcaseObject> = showcase_objects.map(
+          (showcase) => {
+            const target = object_data.find(
+              (obj) => obj.id === showcase.object_id
+            );
+            if (target) {
+              showcase.object_data = target;
+            }
+            //parse string back to an object
+            if (showcase.object_position) {
+              showcase.object_position =
+                typeof showcase.object_position === "string"
+                  ? JSON.parse(showcase.object_position)
+                  : showcase.object_position;
+            }
+            if (showcase.object_rotation) {
+              showcase.object_rotation =
+                typeof showcase.object_rotation === "string"
+                  ? JSON.parse(showcase.object_rotation)
+                  : showcase.object_rotation;
+            }
+            if (showcase.object_scale) {
+              showcase.object_scale =
+                typeof showcase.object_scale === "string"
+                  ? JSON.parse(showcase.object_scale)
+                  : showcase.object_scale;
+            }
+            return showcase;
+          }
+        );
+
+        console.log(
+          "get3DObjectsByShowcaseId " + JSON.stringify(threed_objects)
+        );
+        _unrenderedObjects = threed_objects
+        return threed_objects;
+      } catch (error) {
+        console.error("threed_objects " + error);
+      }
+    } catch (error) {
+      console.error("get3DObjectsByShowcaseId " + error);
+    }
+  }
+  return [];
+}
+
+// function setObjects(objects: IShowcaseObject[]) {
+//   console.log("setObjects()", objects);
+//   _objects = objects;
+// }
+
+// =========================================== END INITIALIZATION ===========================================
+
+// =========================================== TAGS FUNCTIONALITY ===========================================
+
+// navigate to tag
+async function gotoTag(tag_id: number): Promise<void> {
+  console.log("gotoTag(tag: tag_id)", tag_id);
+  if (!tag_id) {
+    console.error("tag is undefined");
+    return;
+  }
+  try {
+    const tag = _tags.find((i) => i.id === tag_id);
+
+    if (!tag) {
+      console.error("tag is not found");
+      return;
+    }
+    await _atwin.Mattertag.navigateToTag(
+      tag.json_data.id,
+      _atwin.Mattertag.Transition.FLY
+    );
+  } catch (error) {
+    console.error(error);
+  }
+}
+
+// render tags to space
+async function showTags(tags: ITag[]): Promise<void> {
+  tags.forEach(async (tag, indx) => {
+    const mpData = tag.json_data;
+    if (!mpData) {
+      console.error("tag.json_data/mpData is undefined");
+      return;
+    }
+
+    const tagIds = await _atwin.Tag.add({
+      anchorPosition: mpData.anchorPosition,
+      color: mpData.color,
+      description: mpData.description,
+      //@ts-ignore
+      id: mpData.sid,
+      label: mpData.label,
+      stemVector: mpData.stemVector,
+      stemVisible: mpData.stemVisible,
+    });
+    // console.log('tagIds', tagIds)
+    if (tagIds) {
+      //@ts-ignore
+      tag.json_data.id = tagIds[0];
+
+      // register attachment
+      //@ts-ignore
+      if (
+        // @ts-ignore
+        tag.json_data.media &&
+        // @ts-ignore
+        // @ts-ignore
+        tag.json_data.media.src.trim() !== ""
+      ) {
+        try {
+          console.log("Attaching media...");
+          //@ts-ignore
+          const [attachmentId1] = await _atwin.Tag.registerAttachment(
+            // @ts-ignore
+            tag.json_data.media.src
+          );
+          tag.json_data["attachments"] = [attachmentId1];
+          //@ts-ignore
+          await _atwin.Tag.attach(tag.json_data.sid, attachmentId1);
+          console.log("Media successfully attached");
+        } catch (error) {
+          console.warn(
+            "Custom warn: Media not attached: Invalid media src link: " + error
+          );
+          //@ts-ignore
+          console.warn(
+            // @ts-ignore
+            `mediaSrc: ${tag.json_data.media.src} | tag index: ${indx}`
+          );
+        }
+      }
+
+      //   if(_space.tagpin_image){
+      //       const iconLink = _baseUurl + _uploadDir + _space.tagpin_image
+      //       const textureId = _space.tagpin_image
+      //       await _atwin.Asset.registerTexture(textureId, iconLink)
+      //       await _atwin.Tag.editIcon(tag.json_data.id, textureId)
+      //   }
+    }
+  });
+
+  console.log("tags", _tags);
+}
+
+// remove built in tags
+async function hideTags(): Promise<void> {
+  console.log("hideTags()");
+  const tags = await _atwin.Mattertag.getData();
+  if (tags) {
+    const tagIds = tags.map((i: MpSdk.Mattertag.MattertagData) => i.sid);
+    await _atwin.Mattertag.remove(tagIds);
+    console.log("Tags removed in space: ", tagIds);
+  }
+}
+
+// only expose tag id and name for the tags array
+function mapTags($tags: ITag[]) {
+  console.log("mapTags()", $tags);
+  tags = $tags.map((i) => {
+    const x = {} as ITagPublic;
+    x.id = i.id;
+    x.name = i.json_data.label;
+    return x;
+  });
+
+  console.log("tags", tags);
+}
+
+// =========================================== END TAGS FUNCTIONALITY ===========================================
+
+// =========================================== SWEEP FUNCTIONALITY ===========================================
+
+// get explicit location for currentSweep
+function getCurrentSweep() {
+  return _currentSweep;
+}
+
+// get explicit location for currentPose
+function getCurrentCameraPose() {
+  return _currentCameraPose;
+}
+
+// get explicit location for currentPose's position
+function getCameraPosition() {
+  return _currentCameraPose.position;
+}
+
+// get explicit location for currentSweep's position
+function getCurrentSweepPosition() {
+  return _currentSweep.position;
+}
+
+// gets all Sweeps in loaded Space
+async function getSweeps(): Promise<ISweep | null> {
+  console.log("Getting Sweeps in Space");
+
+  // original implementation
+  _atwin.Sweep.data.subscribe({
+    onCollectionUpdated: function (collection) {
+      console.log("Sweeps In Space", collection);
+      if (!collection) {
+        console.log("No Sweeps in loaded Space");
+      }
+      _sweeps = collection;
+
+      const sw = Object.values(_sweeps);
+
+      sweeps = sw.map((item: any) => {
+        return {
+          id: item.uuid,
+          position: item.position,
+          neighbors: item.neighbors,
+        };
+      });
+    },
+  });
+
+  return null as any;
+}
+
+
+// moves to selected Sweep
+async function moveToSweep(sweepId: string) {
+  // this is sweepData to be used in the moveTo
+  // const position = sweep.position;
+  const transition = _atwin.Sweep.Transition.FLY;
+  const transitionTime = 2000; // in milliseconds
+  console.log("Sweep Move", sweepId);
+
+  _atwin.Sweep.moveTo(sweepId, {
+    // position: position,
+    transition: transition,
+    transitionTime: transitionTime,
+  })
+    .then(function () {
+      // Move successful.
+      console.log("Sweep Arrived at sweep " + sweepId);
+      // getNearbySweeps(sweepId);
+    })
+    .catch(function (error) {
+      // Error with moveTo command
+      console.log("Sweep Error on Arriving", error);
+    });
+}
+
+// returns nearby Sweeps
+async function getNearbySweeps(sweepId: string) {
+  if (sweepId) {
+    const nearby = await sweeps.find((item: any) => item.id == sweepId)
+      .neighbors;
+
+    console.log("Nearby Sweeps", nearby);
+    return nearby;
+  } else {
+    console.log("No Nearby Sweeps");
+  }
+}
+
+
+// =========================================== END SWEEP FUNCTIONALITY ===========================================
+
+// =========================================== OBJECTS FUNCTIONALITY ===========================================
+
+function getComponentLoader(object: IShowcaseObject) {
+  if (object && object.object_data) {
+    let index = object.object_data.object_type as string;
+
+    let component = {
+      FBX: _atwin.Scene.Component.FBX_LOADER,
+      GLB: _atwin.Scene.Component.GLTF_LOADER,
+      MP4: "liveVideo",
+      ZIP: "slideScreenModel",
+    };
+
+    return component[index] || "";
+  }
+
+  return "";
+}
+
+function setSelectedObject(data:IShowcaseObject,node:Scene.INode,component:Scene.IComponent) {
+  _selectedObject = {
+    object:data,
+    component: component,
+    node:node
+  }
+  console.log("setSelectedObject()")
+}
+
+async function setLighting() {
+  const [sceneObject] = await _atwin.Scene.createObjects(1);
+  const lights = sceneObject.addNode();
+
+  lights.addComponent("mp.directionalLight", {
+    intensity: 0.6,
+    color: { r: 1.0, g: 1.0, b: 1.0 },
+  });
+
+  lights.addComponent("mp.ambientLight", {
+    intensity: 0.6,
+    color: { r: 1.0, g: 1.0, b: 1.0 },
+  });
+
+  lights.start();
+}
+
+function clearTransformControls() {
+  if (!_transformControlNode ) {
+    console.error('_transformControlNode is undefined')
+    return
+  }
+  if (_inputControlComponent == null || !_inputControlComponent) {
+    console.error('_inputControlComponent is undefined')
+    return
+  }
+
+  _transformControlNode.stop()
+  //_inputControlComponent.stop()
+  console.log('clearTransformControls()')
+}
+
+async function setTransformControls(selectedObject:IObjectData,mode:string = 'translate') {
+  console.log("Object to be transformed "+selectedObject.object.object_data.name)
+
+  clearTransformControls()
+
+  const [ sceneObject ] = await _atwin.Scene.createObjects(1);
+  const transformNode = sceneObject.addNode();
+  const transformComponent = transformNode.addComponent('mp.transformControls')
+  _transformControlNode = transformNode
+
+  const inputComponent = transformNode.addComponent('mp.input', {
+    eventsEnabled: true,
+    userNavigationEnabled: true,
+  })
+
+  _inputControlComponent = inputComponent.spyOnEvent(new ClickSpy(selectedObject.object,selectedObject.node,selectedObject.component))
+  transformNode.start()
+  transformComponent.inputs.selection = selectedObject.node
+  transformComponent.inputs.mode = mode
+}
+// async function testObject() {
+//   const [ sceneObject ] = await _atwin.Scene.createObjects(1);
+//   const modelNode = sceneObject.addNode();
+//   const component = modelNode.addComponent(_atwin.Scene.Component.FBX_LOADER, {
+//     url: "https://cdn.jsdelivr.net/gh/mrdoob/three.js@dev/examples/models/fbx/stanford-bunny.fbx",
+//   });
+
+//   // Create a scene node with a transform control component.
+//   const node = sceneObject.addNode();
+//   const myControl = node.addComponent('mp.transformControls');
+
+//   node.start();
+//   component.inputs.localScale = {
+//     x: 0.00002,
+//     y: 0.00002,
+//     z: 0.00002
+//   };
+//   modelNode.obj3D.position.set(0,-1,0);
+//   modelNode.start()
+
+//   // Attach the model to the transform control
+//   myControl.inputs.selection = modelNode;
+//   // Make the transform control visible so that the user can manipulate the control selection.
+//   myControl.inputs.visible = true;
+
+//   // set 'translate' mode to position the selection.
+//   myControl.inputs.mode = 'translate';
+// }
+function calculateDistance(
+  pos1: { x: number; y: number },
+  pos2: { x: number; y: number }
+) {
+  const dx = pos2.x - pos1.x;
+  const dy = pos2.y - pos1.y;
+  return Math.sqrt(dx * dx + dy * dy);
+}
+
+async function showVideoObjects(object: IShowcaseObject) {
+  await createVideoComponent();
+
+  const [sceneObject] = await _atwin.Scene.createObjects(1);
+  const liveStreamNode = sceneObject.addNode();
+  var liveStreamComponent = await liveStreamNode.addComponent(
+    getComponentLoader(object),
+    {
+      url: object.object_data?.amazon_uri,
+    }
+  );
+
+  liveStreamNode.position.set(
+    object.object_position.x,
+    object.object_position.y,
+    object.object_position.z
+  );
+  // @ts-ignore
+  liveStreamNode.obj3D.rotation.set(
+    object.object_rotation.x,
+    object.object_rotation.y,
+    object.object_rotation.z
+  );
+
+  liveStreamNode.scale.set(
+    object.object_scale.x,
+    object.object_scale.y,
+    object.object_scale.z
+  );
+
+  if (liveStreamComponent.outputs.loadingState != "Error") {
+    liveStreamNode.start();
+  }
+
+  liveStreamComponent.inputs.src = object.object_data?.amazon_uri;
+
+  _videos.push({
+    data: object,
+    component: liveStreamComponent,
+    node: liveStreamNode,
+    type: 'VIDEO',
+  } as IVideoObject);
+}
+
+function playVideo(videoId: number) {
+  let videoObject = _videos.find((object) => object.data.id == videoId);
+
+
+  if (videoObject) {
+    // @ts-ignore
+    videoObject.component.video.play();
+  } else {
+    console.error("Unable to find video object using that id");
+  }
+}
+
+function pauseVideo(videoId: number) {
+  let videoObject = _videos.find((object) => object.data.id == videoId);
+
+  if (videoObject) {
+    // @ts-ignore
+    videoObject.component.video.pause();
+  } else {
+    console.error("Unable to find video object using that id");
+  }
+}
+
+function videoAutoPlay() {
+  async function nearestVideo(videoObject: IVideoObject) {
+    let videoPosition = videoObject.data.object_position;
+    let cameraPosition = getCurrentSweepPosition();
+
+    const computedDistance = distance(
+      [cameraPosition.x, cameraPosition.y, cameraPosition.z],
+      [videoPosition.x, videoPosition.y, videoPosition.z]
+    );
+
+    try {
+      if (
+        videoObject.data.autoplay &&
+        videoObject.data.autoplay_distance &&
+        computedDistance < videoObject.data.autoplay_distance
+      ) {
+        // @ts-ignore
+        videoObject.component.video.play();
+      } else {
+        // @ts-ignore
+        videoObject.component.video.pause();
+      }
+    } catch (e) {
+      console.error("Unable to play or stop video");
+    }
+  }
+
+  _videos.forEach((videoObject: IVideoObject) => nearestVideo(videoObject));
+}
+
+function createVideoComponent() {
+  function videoRenderer() {
+    this.inputs = {
+      visible: true,
+      userNavigationEnabled: true,
+      eventsEnabled: true,
+      colliderEnabled: true,
+      src: null,
+    };
+
+    this.outputs = {
+      texture: null,
+      video: null,
+      aspect: 720 / 480,
+    };
+
+    this.onInit = function () {
+      this.video;
+      this.texture;
+    };
+
+    this.onEvent = function (eventType, eventData) {};
+
+    this.onInputsUpdated = function (previous) {
+      this.releaseTexture();
+
+      const THREE = this.context.three;
+      if (!this.inputs.src) {
+        this.video.src = "";
+        return;
+      }
+
+      if (this.inputs.src instanceof HTMLVideoElement) {
+        this.video = this.inputs.src;
+      } else {
+        this.video = this.createVideoElement();
+
+        if (typeof this.inputs.src === "string") {
+          this.video.src = this.inputs.src;
+        } else {
+          this.video.srcObject = this.inputs.src;
+        }
+
+        this.video.load();
+      }
+
+      this.texture = new THREE.VideoTexture(this.video);
+      this.texture.minFilter = THREE.LinearFilter;
+      this.texture.magFilter = THREE.LinearFilter;
+      this.texture.format = THREE.RGBFormat;
+
+      var geometry = new THREE.PlaneGeometry(1, 1);
+      geometry.scale(1, 480 / 720, 1);
+      geometry.translate(0, 0.33, 0);
+      this.material = new THREE.MeshBasicMaterial({
+        map: this.texture,
+        side: THREE.DoubleSide,
+      });
+      var mesh = new THREE.Mesh(geometry, this.material);
+      this.outputs.objectRoot = mesh;
+      this.outputs.collider = mesh;
+      mesh.visible = this.inputs.visible;
+
+      this.outputs.texture = this.texture;
+      this.outputs.video = this.video;
+    };
+
+    this.releaseTexture = function () {
+      if (this.texture) {
+        this.outputs.texture = null;
+        this.texture.dispose();
+      }
+    };
+
+    this.createVideoElement = function () {
+      const video = document.createElement("video");
+      video.setAttribute("id", "htmlLivestreamVideo");
+      video.crossOrigin = "anonymous";
+      video.setAttribute("height", "480");
+      video.setAttribute("width", "720");
+      video.setAttribute("webkit-playsinline", "webkit-playsinline");
+      video.setAttribute("controls", "controls");
+      video.muted = false;
+      video.loop = true;
+      video.volume = 1;
+      return video;
+    };
+
+    this.onTick = function (tickDelta) {};
+
+    this.onDestroy = function () {
+      this.material.dispose();
+    };
+
+    this.spyOnEvent = function (payload) {
+      console.log("payload", payload);
+    };
+  }
+
+  function makeVideoRender() {
+    return new videoRenderer();
+  }
+
+  _atwin.Scene.register("liveVideo", makeVideoRender);
+}
+
+//This function is for registering the custom component
+function createSlideScreenModel() {
+  function SlideScreenModelRenderer() {
+    this.inputs = {
+      src: null,
+      userNavigationEnabled: true,
+      eventsEnabled: true,
+      colliderEnabled: true,
+      visible: true,
+    };
+    this.outputs = {
+      texture: null,
+      t_image: null,
+    };
+    this.onInit = function () {
+      this.texture;
+      this.t_image;
+      this.material;
+      this.mesh;
+    };
+
+    //This is commented out since the slideshow must not be clicked yet
+
+    this.events = {
+      "INTERACTION.CLICK": true,
+    };
+
+    this.onEvent = async function (eventType, eventData) {
+      console.log("onEventSlideShow", eventType, eventData);
+      if (eventType == "INTERACTION.CLICK") {
+        if (_allSlideShow.length > 0) {
+          let slideshow = _allSlideShow.filter(
+            (l) =>
+              l.collider?.collider?.uuid == eventData.collider?.uuid ?? false
+          )[0];
+          console.log("slideShow eventData", slideshow);
+          if (slideshow != null) {
+            console.log("slideShow eventData", slideshow);
+
+            // This is the UNIQUE properties of this plane
+            var mousePosition = await getMousePosition();
+            
+            // @ts-ignore
+            var planePosition = slideshow.node.obj3D.position;
+
+            console.log("MOUSE POSITION", mousePosition);
+            console.log("PLANE POSITION", planePosition);
+
+            if (slideshow.object.object_type == "ZIP") {
+              if (slideshow.id != _currentSlideShowID) {
+                _currentSlideIndex = _slideShowImage.find(
+                  (elem) => elem.id === slideshow.id
+                ).idx;
+                console.log("CURRENT INDEX", _currentSlideIndex);
+                _currentSlideShow = _slideShowImage.find(
+                  (elem) => elem.id === slideshow.id
+                ).images;
+                console.log("CURRENT SLIDE", _currentSlideShow);
+              }
+              if (slideshow.id == _currentSlideShowID) {
+                console.log("ChangeImage", slideshow, _currentSlideShowID);
+                if (planePosition.x < mousePosition.x) {
+                  console.log("LEFT SIDE");
+                  clearInterval(_timer);
+                  // model.pause()
+                  this.inputs.src = imageStream("prev");
+                } else if (planePosition.y < mousePosition.y) {
+                  console.log("RIGHT SIDE");
+                  // model.pause()
+                  clearInterval(_timer);
+                  this.inputs.src = imageStream("next");
+                } else if (planePosition.y > mousePosition.y) {
+                  console.log("AUTOPLAY");
+                  _timer = setInterval(() => {
+                    _currentSlideIndex =
+                      (_currentSlideIndex + 1) % _currentSlideShow.length;
+                    console.log("CURRENT INDEX", _currentSlideIndex);
+                    this.inputs.src = imageStream("next");
+                  }, 2000);
+                }
+              } else {
+                _currentSlideShowID = slideshow.id;
+              }
+            }
+          }
+        }
+      }
+    };
+
+    this.onInputsUpdated = function (previous) {
+      this.releaseTexture();
+      const three = this.context.three;
+      // Create IMAGE
+      this.t_image = document.createElement("IMG");
+      this.t_image.src = this.inputs.src;
+      this.t_image.setAttribute("width", "auto");
+      this.t_image.setAttribute("height", "auto");
+      this.t_image.crossOrigin = "anonymous";
+      const planeGeo = new three.PlaneGeometry(1.5, 1.5);
+      // planeGeo.scale(1, 480/720, 1);
+      planeGeo.translate(0, 0.33, 0);
+
+      // this.texture = new THREE.Texture(this.t_image);
+
+      // used texture loader for onLoad callback
+      if (previous.src != this.inputs.src) {
+        console.log("this.inputs.src", this.inputs.src);
+        this.texture = new three.TextureLoader().load(
+          this.t_image.src,
+          (tex = this.texture) => {
+            // onLoad callback function
+            tex.minFilter = three.LinearFilter;
+            tex.magFilter = three.LinearFilter;
+            tex.format = three.RGBAFormat;
+            tex.needsUpdate = true; //This should be true in order to update the texture
+            tex.onUpdate = this.textureUpdated;
+            this.material = new three.MeshBasicMaterial({
+              map: this.texture,
+              side: three.DoubleSide,
+              transparent: true,
+              // color: 0xFF0000,
+              alphaTest: 0.5,
+            });
+            this.mesh = new three.Mesh(planeGeo, this.material); //Create a mesh for the Plane
+            this.mesh.scale.set(
+              1.0,
+              this.texture.image.height / this.texture.image.width,
+              1.0
+            ); // setting the aspect ratio of image as the scale of mesh
+
+            this.outputs.objectRoot = this.mesh;
+            this.outputs.collider = this.mesh;
+            this.outputs.texture = this.texture;
+            this.outputs.t_image = this.t_image;
+          }
+        );
+      }
+      if (this.mesh != null) {
+        this.mesh.visible = this.inputs.visible;
+      }
+    };
+
+    this.textureUpdated = function (params) {
+      console.log("Update Callback", params);
+    };
+
+    this.releaseTexture = function () {
+      if (this.texture) {
+        this.outputs.texture = null;
+      }
+    };
+
+    this.onTick = function (tickDelta) {};
+
+    this.onDestroy = function () {
+      this.material.dispose();
+      this.texture.dispose();
+    };
+  }
+
+  function makeSlideScreenModelRenderer() {
+    return new SlideScreenModelRenderer();
+  }
+
+  // Registering the component with the sdk
+  _atwin.Scene.register("slideScreenModel", makeSlideScreenModelRenderer);
+}
+
+//This is the function for rendering the slidescreen model
+async function showSlideScreenModel(object: IShowcaseObject) {
+  createSlideScreenModel();
+
+  const [sceneObject] = await _atwin.Scene.createObjects(1);
+  const modelNode = sceneObject.addNode();
+  const component = modelNode.addComponent("slideScreenModel");
+  console.log("COMPONENT", component);
+
+  modelNode.scale.set = {
+    x: object.object_scale.x,
+    y: object.object_scale.y,
+    z: object.object_scale.z,
+  };
+
+  //@ts-ignore
+  modelNode.obj3D.position.set(
+    object.object_position.x,
+    object.object_position.y,
+    object.object_position.z
+  );
+
+  //@ts-ignore
+  modelNode.obj3D.rotation.set(
+    object.object_rotation.x,
+    object.object_rotation.y,
+    object.object_rotation.z
+  );
+
+  // modelNode.scale.set(1, 1, 1)
+  // modelNode.position.set(-3.32,0.01 ,3.33)
+  modelNode.start();
+
+  await addImageToSlideShow(object.object_data, component, object.id);
+  console.log("SLIDE OUTPUT", component.outputs);
+
+  var slideShow = {
+    id: object.id,
+    collider: component.outputs,
+    object: object.object_data,
+    node: modelNode,
+    component: component,
+    type: 'ZIP'
+  } as ISlideshowObject
+
+  _allSlideShow.push(slideShow);
+  console.log("ALL SLIDESHOW", _allSlideShow);
+}
+
+//This function is accessing the zip files and place it inside the slidescreen
+async function addImageToSlideShow(data, component, objectID) {
+  var dataList = [];
+  await new JSZip.external.Promise(function (resolve, reject) {
+    JSZipUtils.getBinaryContent(data.amazon_uri, function (err, data) {
+      if (err) {
+        console.log("getBI error", err);
+        reject(err);
+      } else {
+        console.log("getBI success", data);
+        resolve(data);
+      }
+    });
+  })
+    .then(function (data) {
+      console.log("data from getBI", data);
+      //@ts-ignore
+      return JSZip.loadAsync(data);
+    })
+    .then((data) => {
+      console.log("data from loadAsync", data);
+      for (let key in data.files) {
+        // determine whether it is a directory
+        if (key.includes("__MACOSX")) continue;
+        if (key.includes(".DS_Store")) continue;
+        if (data.files[key].dir) continue;
+        let base = data.file(data.files[key].name).async("base64"); // will be converted to base64 format picture
+        base.then((res) => {
+          dataList.push({
+            name: data.files[key].name,
+            path: `data:image/png;base64,${res}`,
+          });
+          if (dataList.length == 1) {
+            component.inputs.src = `data:image/png;base64,${res}`;
+          }
+        });
+      }
+
+      _slideShowImage.push({
+        id: objectID,
+        images: dataList,
+        idx: 0,
+        playID: null,
+        play: false,
+        comp: component,
+      });
+    });
+}
+
+async function getMousePosition() {
+  var planePosition;
+  await _atwin.Pointer.intersection.subscribe(function (intersection) {
+    planePosition = intersection.position;
+    // console.log("This is intersection mouse position", planePosition);
+  });
+  // pointer.cancel();
+  return planePosition;
+}
+
+//This is the function to change the image in the slideshow
+function imageStream(direction) {
+  let diff = direction === "prev" ? -1 : 1;
+  let length = _currentSlideShow.length;
+  let index = _currentSlideIndex + diff;
+  if (index === -1) {
+    index = length - 1;
+  }
+  if (index === length) {
+    index = 0;
+  }
+
+  _currentSlideIndex = index;
+  _slideShowImage.find((elem) => elem.id === _currentSlideShowID).idx = index;
+  return _currentSlideShow[_currentSlideIndex].path;
+}
+
+// ===== END OBJECTS FUNCTIONALITY =====
+
+// ===== NAVIGATION AND CAMERA CONTROL =====
+async function cameraRotate(x: number, y: number, speed: number) {
+  // x and y is rotation in horizontal and vertical rotation in degrees
+  // speed, speed of rotation
+  await _atwin.Camera.rotate(x, y, { speed: speed })
+    .then(() => {
+      console.log("camera rotate success.", x, y);
+    })
+    .catch((error) => {
+      console.log("camera rotate error.", error);
+    });
+}
+
+async function cameraPan(x: number, z: number) {
+  let mode = getViewMode();
+
+  if (
+    mode == _atwin.Mode.Mode.FLOORPLAN ||
+    mode == _atwin.Mode.Mode.DOLLHOUSE
+  ) {
+    // x is pan (look sideways left and right) in degrees
+    // z is tilt (look up and down) in degrees
+    await _atwin.Camera.pan({ x: x, z: z })
+      .then(() => {
+        console.log("camera pan success.");
+      })
+      .catch((error) => {
+        console.log("camera rotate error:", error);
+      });
+  } else {
+    console.error("Incorrect view mode.");
+  }
+}
+
+async function cameraLookAt(x: number, y: number) {
+  // set camera view at coordinate in SCREEN
+  // x and y is PIXEL from upper left corner
+  await _atwin.Camera.lookAtScreenCoords(x, y)
+    .then(function () {
+      console.log("camera looking at...", x, y);
+    })
+    .catch(function (error) {
+      console.log("camera looking at error:", error);
+    });
+}
+
+/**
+ * Moves the camera position in the direction of the argument provided.
+ * @constructor
+ * @param direction FORWARD,BACKWARD,LEFT,RIGHT,UP,DOWN
+ * @type {string}
+ */
+
+async function moveInDirection(direction: string) {
+  // move in DIRECTION, can be LEFT, RIGTH, UP, DOWN, FORWARD, BACKWARD
+  let nextDirection = _atwin.Camera.Direction.LEFT;
+  switch (direction.toUpperCase()) {
+    case "LEFT":
+      nextDirection = _atwin.Camera.Direction.LEFT;
+
+      break;
+    case "RIGHT":
+      nextDirection = _atwin.Camera.Direction.RIGHT;
+
+      break;
+
+    case "UP":
+      nextDirection = _atwin.Camera.Direction.UP;
+
+      break;
+    case "DOWN":
+      nextDirection = _atwin.Camera.Direction.DOWN;
+
+      break;
+
+    case "BACK":
+      nextDirection = _atwin.Camera.Direction.BACK;
+
+      break;
+
+    case "FORWARD":
+      nextDirection = _atwin.Camera.Direction.FORWARD;
+
+      break;
+
+    default:
+      nextDirection = _atwin.Camera.Direction.LEFT;
+
+      break;
+  }
+
+  await _atwin.Camera.moveInDirection(nextDirection)
+    .then(function () {
+      console.log("Move to...", nextDirection);
+    })
+    .catch(function () {
+      console.warn(
+        "An error occured while moving in that direction.",
+        nextDirection
+      );
+    });
+}
+
+// =========================================== END NAVIGATION AND CAMERA CONTROL ===================================
+
+// =========================================== MODE FUNCTIONALITY ==================================================
+function getViewMode() {
+  return _currentViewMode;
+}
+
+async function setViewMode(mode: string) {
+  console.log("=== get Mode Type ===", _getModeType(mode));
+  let modeType = _getModeType(mode);
+
+  await _atwin.Mode.moveTo(modeType)
+    .then(function (nextMode) {
+      // Move successful.
+      console.log("Arrived at new view mode " + nextMode);
+    })
+    .catch(function (error) {
+      // Error with moveTo command
+      console.error("Error occur on:", error);
+    });
+}
+
+function _getModeType(mode: string) {
+  let modes = {
+    DOLLHOUSE: "mode.dollhouse",
+    FLOORPLAN: "mode.floorplan",
+    INSIDE: "mode.inside",
+    OUTSIDE: "mode.outside",
+    TRANSITIONING: "mode.transitioning",
+  };
+
+  return modes[mode.toUpperCase()] || "";
+}
+
+// ================== INPUT EVENT CLASSES ======================= //
+
+class ClickSpy {
+  object_data: IShowcaseObject;
+  node: Scene.INode;
+  component: Scene.IComponent;
+  
+  constructor(data:IShowcaseObject,node:Scene.INode,component:Scene.IComponent){
+    this.object_data = data
+    this.node = node
+    this.component = component
+  }
+  public eventType = 'INTERACTION.CLICK';
+  public async onEvent(payload: unknown) {
+    console.log('INTERACTION.CLICK', payload);
+    const selectedObj:IObjectData = {
+      object: this.object_data,
+      node: this.node,
+      component: this.component
+    }
+
+    setSelectedObject(this.object_data,this.node,this.component)
+    await setTransformControls(selectedObj)
+  }
+}
+
+export {
+  tags,
+  sweeps,
+  connectSpace,
+  gotoTag,
+  getCurrentSweep,
+  getCurrentSweepPosition,
+  moveToSweep,
+  getNearbySweeps,
+  pauseVideo,
+  playVideo,
+  getCurrentCameraPose,
+  getCameraPosition,
+  moveInDirection,
+  cameraLookAt,
+  cameraPan,
+  cameraRotate,
+  getViewMode,
+  setViewMode,
+};
+