architwin 1.0.33 → 1.0.36

package/README.md

@@ -35,9 +35,23 @@ ArchiTwin Library
       - [Adding a Media Screen](#adding-a-media-screen)
       - [Media Screen Parameter Reference](#media-screen-parameter-reference)
       - [Attaching an image or video to a Media Screen](#attaching-an-image-or-video-to-a-media-screen)
+      - [Delete Media Screen](#delete-media-screen)
     - [Getting the coordinates of a clicked area in the 3D space](#getting-the-coordinates-of-a-clicked-area-in-the-3d-space)
     - [Setting Video Playback in the Space](#setting-video-playback-in-the-space)
     - [Setting Animation Control in the Space](#setting-animation-control-in-the-space)
+  - [Meeting Guide](#meeting-guide)
+    - [Create Meeting](#create-meeting)
+    - [Start Meeting](#start-meeting)
+    - [Stop Meeting](#stop-meeting)
+    - [Utility Methods](#utility-methods)
+    - [Update Meeting Details](#update-meeting-details)
+    - [Meeting Info](#meeting-info)
+    - [Meeting Config Options](#meeting-config-options)
+      - [Meeting Custom Colors](#meeting-custom-colors)
+      - [Meeting Custom Avatars](#meeting-custom-avatar)
+      - [Meeting Device Control](#meeting-custom-control)
+      - [Meeting Bar Position](#meeting-bar-position)
+      - [Meeting Status](#meeting-status)
   - [Function Reference](#function-reference)
       - [Tags](#tags)
     - [Sweeps](#sweeps)
@@ -45,6 +59,9 @@ ArchiTwin Library
     - [Navigation](#navigation)
     - [Camera](#camera)
     - [Objects](#objects)
+    - [Meeting](#meeting)
+    
+
 ## Installation
 ---------------------
 ### Install Using NPM
@@ -527,7 +544,12 @@ Space can also contain Image Slideshow Screens. This is similar to the Video Scr
 Clicking on the right section of the current slide image will display the next slide. 
 Clicking on the the left section will display the previous slide. 
 
-The slideshow can be auto played in whole by clicking the lower-right corner. 
+The slideshow can be auto played in whole by clicking the lower-right corner.
+
+**Meeting**
+Space meeting feature introduces immersive way to conduct virtual gatherings and collaborative sessions. This innovative feature allows users to convene inside a Space, where participants represented by an avatar and can interact, communicate, and share ideas in a more lifelike and engaging manner.
+
+Please check [Meeting Guide](#meeting-guide) to know how to use Meeting feature.
 
 ## Points of Interest
 Tags are primarily use to mark locations or objects in space for quick and direct navigation.
@@ -917,90 +939,6 @@ function myCallbackFunction(clickedPosition){
 atwin.getTargetPosition(myCallbackFunction)
 ```
 
-#### Attaching an image or video to a Media Screen
-You can think of a media screen as a blank canvas whose content is totally up to you. If you wish to set the content of the media screen, you may use the `attachMediaScreenContent()` method.
-
-**Attach Media Screen Parameters**
-
-| parameter | type | required |  default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| mediaScreenId | number | yes | none | id of object |
-| mediaUrl | string | yes | none | valid public url to the media|
-| mediaType | string | no | image | 'image' or 'video' |
-
-**IMPORTANT:** The link to your media you provide to the mediaUrl **MUST** be publicly accessible and have the appropriate CORS headers, otherwise, your media will not load into the media screen.
-
-In this example, we are using a link pointing to the media stored in an s3 bucket as the mediaUrl and a random media screen id. You will have to substitute the id with an actual id of a **rendered** media screen.
-
-Example with image:
-```typescript
-const targetMediaScreenId = 12
-const validUrl = 'https://stg-feelpet.s3.ap-northeast-1.amazonaws.com/0CB45E51-EC48-4727-906A-4CD8A13C0770.jpg'
-
-atwin.attachMediaScreenContent(targetMediaScreenId,validUrl,'image')
-```
-
-Example with video:
-```typescript
-const targetMediaScreenId = 12
-const validUrl = 'https://stg-feelpet.s3.ap-northeast-1.amazonaws.com/VID_20230203_165202.mp4'
-
-atwin.attachMediaScreenContent(targetMediaScreenId,validUrl,'video')
-```
-
-When setting a video as the media screen content. You can use the `setVideoPlayback()` method to programmatically play,pause,mute,and unmute a video. You can navigate to the [playback controls section](#setting-video-playback-in-the-space) to learn more about the method. Here is an example on how to use it. 
-
-In this example, we are getting a random media screen from the `atwin._3DXObjects` array which contains all the objects rendered in the space. Media screens whose media type is a video will have a variable called `planeElement` inside the object's `component` which contains an HTML video element that we can manipulate using the `setVideoPlayback()` method. Please take note that this variable is not accessible if the media type of the media screen content is an image.
-
-
-*Interface used* (TS)
-```typescript
-export interface IObjectData {
-  collider?: any
-  object: IShowcaseObject
-  component: Scene.IComponent
-  node: Scene.INode
-  type?: string
-}
-```
-
-*Example*
-```typescript
-const randomMediaScreen:IObjectData = atwin._3DXObjects.find(obj => obj.object.object_data.object_type == 'FRAME')
-
-setVideoPlayback('play',randomMediaScreen.component.planeElement)
-```
-
-You can use the [transform controls](#transforming-objects) to change the position, scale, and rotation of the media screen using the mouse cursor.
-
-### Getting the coordinates of a clicked area in the 3D space
-
-The 3D space you walk around in is a three dimensional mesh under the hood. Every point in this space has an x,y,z coordinate. These coordinates are important since it allows us to anchor objects into the 3D space and navigate around it. You may at times need the ability to get the coordinates of an area in the space. You can do this by utilizing the `getTargetPosition()` method. 
-
-**Parameter Reference**
-| parameter | type | required | default | values |
-| :----: | :----: | :---: | :---: | :---: |
-| callback | Function | no | none | any valid function|
-
-You can invoke the method by doing the following
-
-```typescript
-//pass a callback function to the method below to get
-//the coordinates once the user has clicked on an area
-function myCallbackFunction(coords){
-  //Line of code to do something else
-  return coords
-}
-
-atwin.getTargetPosition(myCallbackFunction)
-```
-
-The method accepts a callback function that is triggered once the user has clicked on an area in the space. The methods passes the x,y,z coordinates of the clicked position to the callback function you have passed into the method. When the method is invoked the original white circle pointer is replaced with the target pointer pictured below
-
-<img src="https://drive.google.com/uc?id=1vD4ELNj_rjBVh3hOyYjMcO12Ffmse2Rz" width="50" height="50" />
-
-The pointer goes back to normal after the user has clicked on any area inside the 3D space
-
 ### Setting Video Playback in the Space
 
 Setting video playback refers to the act of adjusting various controls associated with the playback of a video in the space. It involves manipulating controls such as pause, play, mute, and unmute to modify the playback behavior according to user's preferences.
@@ -1057,6 +995,435 @@ If you wish to pause the Animation of the 3D object, change the parameter to 'pa
 atwin.setAnimationState('pause',17)
 ```
 
+## Meeting Guide
+
+Hosting Live Virtual Meetings in 3D Space
+
+The meeting feature in ArchiTwin Library is a virtual meeting inside a 3D Space. Each participant in the virtual meeting is represented by a 3D object called an avatar. The meeting feature enables an immersive way to conduct virtual gatherings and collaborative sessions inside a 3D Space. A popular application of this virtual meeting feature is for architectural design reviews. Architects, designers, and clients can gather in the shared 3D Space as avatars to explore and discuss the virtual representation of a building or project. This immersive approach allows stakeholders to experience the design from various perspectives, collaborate in real-time, and make informed decisions more efficiently, regardless of their physical locations.
+
+The next few sections will explain how you can get started in creating or hosting your own virtual meeting inside your 3D Spaces.
+
+### Create Meeting
+
+Before you can start hosting your virtual meeting, we must first create a meeting. 
+
+````typescript
+atwin.createMeeting(
+  spaceId: string, 
+  hostName: string, 
+  title: string, 
+  meetingStart: Date, 
+  meetingStatus: MeetingStatus
+  duration: number, 
+  password: string,
+)
+````
+
+The `createMeeting` method requires the following parameters to work.
+
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| spaceId | string | yes | any string |
+| hostName | string | yes | any string|
+| title | string | yes | any string |
+| meetingStart | string | yes | any string |
+| meetingStatus | string | yes | '0', '1', '2', or '3'|
+| duration | number | yes | any number |
+| password | string | no | any string|
+
+`spaceId` : string - The ID of the Space where the meeting will take place.
+
+`hostName` : string - The meeting's host name.
+
+`title` : string - The title of the meeting.
+
+`meetingStart` : string - The date and time when meeting will start, `meetingStart` will follow ISO 8601 (e.g, '2023-07-19T17:34'). 
+format.
+
+`meetingStatus` : [Meeting Status](#meeting-status) - The initial status of meeting will automatically set to `STARTED` if `meetingStart` is empty or null.
+
+`duration` : number - Duration of the meeting in hour (e.g, 3, 2.5).
+
+Note: `duration` can accept floating numbers like `1.5`. `1.5` is equivalent to 1 hour and 30 minutes.
+
+`password` : string - Password of the meeting.
+
+*Example:*
+````typescript
+<script lang='ts'>
+  import * as atwin from 'architwin';
+
+  atwin.createMeeting(
+    '1', 
+    'John Doe', 
+    'Daily Meeting', 
+    '2023-07-19T17:34', 
+    1.5, 
+    'password123',
+  )
+
+</script>
+````
+
+Successfuly invoking the `createMeeting` method will return an object containing the meeting password, and meeting URL for host and guest which is used in another method called [startMeeting](#start-meeting).
+
+*Return Example:*
+````json
+{
+    "host": "http://localhost:5173/?meetingId=290d9f7d-fb14-4c8f-9d95-695cac59e44b&role=host",
+    "guest": "http://localhost:5173/?meetingId=290d9f7d-fb14-4c8f-9d95-695cac59e44b&role=guest",
+    "meeting_id": "290d9f7d-fb14-4c8f-9d95-695cac59e44b",
+    "meeting_password" : "password123"
+}
+````
+
+### Start Meeting
+
+Star the meeting using `startMeeting` method. 
+````typescript
+atwin.startMeeting(meetingUrl: string, meetingPassword?: string, meetingConfig?: MeetingConfig)
+````
+The `startMeeting` method requires the following parameters to work.
+
+| parameter | type | required | values |
+| :----: | :----: | :---: | :---: |
+| meetingUrl | string | yes | valid public URL |
+| meetingPassword | string | no | any string|
+| meetingConfig | MeetingConfig | no | MeetingConfig object |
+
+This `startMeeting` method will initialize the meeting and display pre-meeting settings.
+
+`meetingUrl` : string - The URL that is generated from `createMeeting` method.
+
+`meetingPassword` : string - The password set during creation of the meeting.
+
+`meetingConfig` : [MeetingConfig](#meeting-config-options) - You can pass `MeetingConfig` object to configure and customize the meeting experience. 
+
+NOTE: Please check [MeetingConfig](#meeting-config-options) interface to see more customization options.
+
+*Example:*
+````typescript
+atwin.startMeeting(
+  meetingUrl: "http://localhost:5173/?meetingId=290d9f7d-fb14-4c8f-9d95-695cac59e44b&role=host",
+  meetingPassword: 'password123',
+  meetingConfig: {
+    customColors: {
+      primary900: '16 29 70',
+      primary200: '141 164 239',
+      primary: '58 92 204',
+      }
+    deviceControl: {
+      videoInput: false,
+      audioInput: true,
+      audioOutput: true
+    },
+    meetingBarPosition: 'top',
+  }
+)
+````
+Successfuly invoking the `startMeeting` method will start the meeting.
+
+### Stop Meeting
+````typescript
+atwin.stopMeeting()
+````
+To end the current or initialized meeting use `stopMeeting` method.
+
+Note: `stopMeeting` method will have the same result of using hang-up button in meeting session control.
+
+### Utility Methods
+
+**Get Meeting Participants**
+````typescript
+atwin.getMeetingParticipants()
+````
+This method will return the current meeting participants' space data (e.g, position and rotation).
+
+*Return Example:*
+````json
+[
+  {
+    id: 123,
+    name: "John Doe",
+    avatar: {
+      model: "myAvatar.gltf",
+    },
+    avatarConfig: {
+      scale: 1,
+      height: 0,
+      laserOrigin: { x: 0, y: 0, z: 0 },
+    },
+    position: { x: 1, y: 2, z: 1 },
+    rotation: { x: 1, y: 1 },
+  },
+]
+````
+
+**Get all meeting in specific Space**
+````typescript
+atwin.getSpaceMeetings(spaceId: string)
+````
+This function will return a list of all meeting in a specific Space.
+
+*Example:*
+````typescript
+atwin.getSpaceMeetings(spaceId: 1)
+````
+
+*Return Example:*
+````json
+{
+    "status": "success",
+    "data": [
+        {
+            "id": 9,
+            "space_id": "1",
+            "meeting_id": "04acd056-e563-46bb-a585-9069c4e75160",
+            "host_name": "John Doe",
+            "title": "Meeting in Space",
+            "meeting_start": "2023-07-30 15:50:00",
+            "meeting_status": 3,
+            "duration": null,
+            "password": null,
+            "created_on": "2023-07-19 05:21:24",
+            "created_by": 5,
+            "modified_on": "2023-07-21 09:06:54",
+            "modified_by": 5,
+            "deleted_on": "2023-07-21 09:06:54",
+            "deleted_by": 5,
+            "is_deleted": false,
+            "is_read": null,
+            "is_new": null
+        },
+        {
+            "id": 10,
+            "space_id": "1",
+            "meeting_id": "35520e9d-1f1e-4135-9f7b-0e55cb7b9e05",
+            "host_name": "John Smith",
+            "title": "Space Meeting",
+            "meeting_start": "2023-07-19 13:30:00",
+            "meeting_status": 1,
+            "duration": null,
+            "password": null,
+            "created_on": "2023-07-19 05:21:44",
+            "created_by": 5,
+            "modified_on": "2023-07-19 05:21:44",
+            "modified_by": 5,
+            "deleted_on": "2023-07-19 05:21:44",
+            "deleted_by": 5,
+            "is_deleted": false,
+            "is_read": null,
+            "is_new": null
+        },
+    ]
+}
+````
+
+**Get Meeting**
+````typescript
+atwin.getMeeting(meetingId: string)
+````
+This method will return meeting details.
+
+*Example:*
+````typescript
+atwin.getMeeting(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b')
+````
+
+*Return Example:*
+````json
+{
+    "status": "success",
+    "data": {
+        "id": 16,
+        "space_id": "2",
+        "meeting_id": "bac67012-d2ff-47f6-b427-fc2538caac2b",
+        "host_name": "John Doe",
+        "title": "Meeting in Space",
+        "meeting_start": null,
+        "meeting_status": 1,
+        "duration": null,
+        "password": null,
+        "created_on": "2023-07-20 08:40:32",
+        "created_by": 5,
+        "modified_on": "2023-07-20 08:40:32",
+        "modified_by": 5,
+        "deleted_on": "2023-07-20 08:40:32",
+        "deleted_by": 5,
+        "is_deleted": false,
+        "is_read": null,
+        "is_new": null
+    }
+}
+````
+
+**Check meeting if exist**
+````typescript
+atwin.isMeetingExist(meetingId: string)
+````
+This method will check if meeting exists and returns a boolean.
+
+**Check meeting if active**
+````typescript
+atwin.isMeetingActive(meetingId: string)
+````
+This method will check if meeting is active and return a boolean.
+
+Note: Active meeting refers to `MeetingStatus.STARTED` or `MeetingStatus.SCHEDULED`.
+
+### Update Meeting Details
+
+Methods to update meeting details.
+
+All update methods will return a response.
+
+````typescript
+atwin.updateMeetingTitle(meetingId: string, meetingTitle: string)
+````
+
+````typescript
+atwin.updateMeetingStart(meetingId: string, meetingStart: string)
+````
+
+````typescript
+atwin.updateMeetingStatus(meetingId: string, meetingStatus: string)
+````
+
+````typescript
+atwin.updateMeetingSpace(meetingId: string, spaceId: string)
+````
+
+### Meeting Info
+````typescript
+export interface MeetingInfo {
+  space_id: number;
+  meeting_id?: string;
+  host_name?: string;
+  title?: string;
+  meeting_start?: Date;
+  meeting_status?: MeetingStatus;
+  duration?: number;
+  password?: string;
+}
+````
+
+`space_id` : number - The id of the Space.
+
+`meeting_id` : string - The meeting ID.
+
+`host_name` : string - The name of host of the meeting.
+
+`title` : string - The title of the meeting.
+
+`meeting_start` : Date - The date when meeting expected to start.
+
+`meeting_status` : [MeetingStatus](#meeting-status) - The status of the meeting.
+
+`duration` : number - The duration of the meeting.
+
+`password` : string - The password of the meeting.
+
+### Meeting Config Options
+````typescript
+export interface MeetingConfig {
+  customColors?: MeetingCustomColors;
+  customAvatars?: Avatar[];
+  deviceControl?: MeetingDeviceControl;
+  meetingBarPosition?: MeetingBarPosition;
+}
+````
+
+`customColors` : [MeetingCustomColors](#meeting-custom-colors) - This property allows you to personalize the theme of the meeting bar or modals by providing custom colors.
+
+`customAvatars` : [Avatar](#meeting-custom-avatar)[ ] - This property allows you to have the option to use your own avatars in the meeting.
+
+Note: You cannot have both the default avatars and custom avatar in avatar selection.
+
+`deviceControl` : [MeetingDeviceControl](#meeting-device-control) - This property allows you to determine whether participants can use their video input, audio input, and audio output devices during the meeting.
+
+`meetingBarPosition` : [MeetingBarPosition](#meeting-bar-position) - This property allows you to specify the position of the meeting bar or modals during the meeting.
+
+#### Meeting Custom Colors
+````typescript
+export interface MeetingCustomColors {
+  primary?: string,
+  primary900?: string,
+  primary200?: string,
+  secondary?: string,
+  gray?: string,
+  success?: string,
+  danger?: string,
+  black?: string,
+  white?: string,
+  gray100?: string,
+  gray200?: string,
+  gray300?: string,
+  gray400?: string,
+  gray500?: string,
+  gray600?: string,
+  gray700?: string,
+  gray800?: string,
+}
+````
+
+*Example:*
+````typescript
+const meetingCustomColors: MeetingCustomColors = {
+  primary900: '16 29 70',
+  primary200: '141 164 239',
+  primary: '58 92 204',
+  gray800: '250 250 252',
+  gray700: '233 229 239',
+  gray600: '201 196 209',
+  gray500: '174 169 184',
+  gray400: '126 122 136',
+  gray300: '87 83 95',
+  gray200: '57 54 62',
+  gray100: '38 36 42',
+}
+````
+
+#### Meeting Custom Avatar
+````typescript
+export interface Avatar {
+  model: string;
+  thumbnail: string;
+}
+````
+`model` : string - Source link of the GLB file or 3d model object.
+
+`thumbnail` : string - Source link of the thumbnail image.
+
+
+#### Meeting Device Control
+````typescript
+export interface MeetingDeviceControl {
+  videoInput: boolean;
+  audioInput: boolean;
+  audioOutput: boolean;
+}
+````
+`videoInput` : boolean - Enable or disable video input device.
+
+`audioInput` : boolean - Enable or disable audio input device.
+
+`audioOutput` : boolean - Enable or disable audio output device.
+
+#### Meeting Bar Position
+````typescript
+export type MeetingBarPosition = 'left' | 'right' | 'top' | 'bottom';
+````
+
+#### Meeting Status
+````typescript
+export const enum MeetingStatus {
+  SCHEDULED = 0,
+  STARTED = 1,
+  STOPPED = 2,
+  CANCELLED = 3,
+}
+````
+
 ## Function Reference
 
 Some Functions are **async**; when invoking them, Use keyword **await** or **.then** syntax
@@ -1386,6 +1753,148 @@ showObjectDimensions(selected:IObjectData)
 </script>
 ````
 
+### Meeting
+
+````typescript
+
+createMeeting(
+  spaceId: string, 
+  hostName: string, 
+  title: string, 
+  meetingStart: string, 
+  meetingStatus: MeetingStatus
+  duration: string, 
+  password: string,
+)
+
+  // returns an object consist of meeting URL, meeting ID, meeting password
+  // this is an async function that returns a Promise
+
+startMeeting(meetingUrl: string, meetingPassword?: string, meetingConfig: MeetingConfig)
+    // meetingUrl - URL generated by `createMeeting` function
+    // meetingPassword - optional but default is null
+    // meetingConfig - optional but default is null
+    // this is an void async function
+
+stopMeeting() 
+    // this is an async function
+
+getMeetingParticipants()
+    // return a list of participants
+    // this is an async function
+
+getSpaceMeetings(spaceId: string)
+    // spaceId - the id of Space
+    // returns a list if meetings
+    // this is an async function
+
+getMeeting(meetingId: string)
+    // meetingId - the id of the meeting
+    // returns a meeting
+    // this is an async function
+
+isMeetingExist(meetingId: string)
+    // meetingId - the id of the meeting
+    // returns a boolean
+    // this is an async function
+
+isMeetingActive(meetingId: string)
+    // meetingId - the id of the meeting
+    // returns a boolean
+    // this is an async function
+
+updateMeetingTitle(meetingId: string, meetingTitle: string)
+    // meetingId - the id of the meeting
+    // meetingTitle - the new meeting title
+    // returns a response status
+    // this is an async function
+
+updateMeetingStart(meetingId: string, meetingStart: string)
+    // meetingId - the id of the meeting
+    // meetingStart - the new date when meeting scheduled to start
+    // returns a response status
+    // this is an async function
+
+updateMeetingStatus(meetingId: string, meetingStatus: string)
+    // meetingId - the id of the meeting
+    // meetingStatus - can be 0 for SCHEDULED, 1 for STARTED, 2 for STOPPED, 3 for CANCELLED
+    // returns a response status
+    // this is an async function
+
+updateMeetingSpace(meetingId: string, spaceId: string)
+    // meetingId - the id of the meeting
+    // spaceId - the ID of the new Space 
+    // returns a response status
+    // this is an async function
+````
+
+**Example**
+````typescript
+<script lang="ts">
+  import * as atwin from 'architwin';
+  ...
+
+  // create a meeting and generate meeting URL
+  atwin.createMeeting(
+    '1', 
+    'John Doe', 
+    'Daily Meeting', 
+    '2023-07-19T17:34', 
+    1.5, 
+    'password123',
+  )
+
+  // start a meeting
+  atwin.startMeeting(
+    meetingUrl: "http://www.example.com/?meetingId=290d9f7d-fb14-4c8f-9d95-695cac59e44b&role=host",
+    meetingPassword: 'password123',
+    meetingConfig: {
+      customColors: {
+        primary900: '16 29 70',
+        primary200: '141 164 239',
+        primary: '58 92 204',
+        }
+      deviceControl: {
+        videoInput: false,
+        audioInput: true,
+        audioOutput: true
+      },
+      meetingBarPosition: 'top',
+    }
+  )
+
+  // stop current or initialized meeting
+  atwin.stopMeeting()
+
+  // get all current meeting's participant
+  atwin.getMeetingParticipants()
+
+  // get all meetings in specific Space
+  atwin.getSpaceMeetings(spaceId: 1)
+
+  // get specific meeting 
+  await atwin.getMeeting(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b')
+
+  // check if meeting exist
+  atwin.isMeetingExist(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b')
+
+  // check if meeting is active or on-going
+  atwin.isMeetingActive(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b')
+
+  // updates the meeting title
+  atwin.updateMeetingTitle(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b', meetingTitle: 'New Meeting Title')
+
+  // updates the date when the meeting schedule to start
+  atwin.updateMeetingStart(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b', meetingStart: '2023-07-19T17:34')
+
+  // updates the meeting status
+  atwin.updateMeetingStatus(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b', meetingStatus: '0')
+  
+  // updates the meeting space ID 
+  atwin.updateMeetingSpace(meetingId: 'bac67012-d2ff-47f6-b427-fc2538caac2b', spaceId: 2)
+
+</script>
+````
 **To Do:**
 * when adding an object it should specify the position, scale, rotate of the object
 for example:
@@ -1413,4 +1922,4 @@ for example:
   * we can do this by returning the media screen payload from addMediaScreen()
 
 * deleteMediaScreen() 
-* hideMediaScreen()
+* hideMediaScreen()