import { useSetDocumentId, useSetLocation } from '@veltdev/react';

export default function YourDocument() {


  //Set Document ID
  useSetDocumentId('some_document_id');

  //Set Root Location
  useSetLocation({
      'id': 'locationId1',
      'locationName': 'Scene1LocationName',
      'version': {
        'id': 'v1.0',
        'name': 'Version Name'
      },
      'page': 'mainPage',
      'videoFrame': '120'
      // You can keep adding more field to make the location very specific.
      // The field names can be anything.
  })

  //Add another Location
  useSetLocation({
      'id': 'locationId2',
      'locationName': 'Scene2LocationName',
      'version': {
        'id': 'v1.0',
        'name': 'Version Name'
      },
      'page': 'mainPage',
      'videoFrame': '240'
      // You can keep adding more field to make the location very specific.
      // The field names can be anything.
  },true)


  return (
    <div>
      <div class="page">
        <div id="location1-container-id" data-velt-location={JSON.stringify({
            'id': 'locationId1',
            'locationName': 'Scene1LocationName',
            'version': {
              'id': 'v1.0',
              'name': 'Version Name'
            },
            'page': 'mainPage',
            'videoFrame': '120'
        })}>
          <div class="card">
            // any content
          </div>
        </div>
        <div id="location2-container-id" data-velt-location={JSON.stringify({
            'id': 'locationId2',
            'locationName': 'Scene2LocationName',
            'version': {
              'id': 'v1.0',
              'name': 'Version Name'
            },
            'page': 'mainPage',
            'videoFrame': '240'
        })}>
          <div class="card">
            // any content
          </div>
        </div>
      </div>
    </div>
    
  );
}

Add multiple Locations

There are three main steps to adding multiple locations that are both required:

  1. Add a root location
  2. Add additional locations with setLocation(locationObject,true).
  3. Bind location container elements on the page to locations using location data attribute.
1

Add a root location

useSetDocumentId('some_document_id');

useSetLocation({ 
  'id': 'locationRoot',
  'locationName': 'PageWithVideo',
  'version': {
		'id': 'v1.0',
		'name': 'Version Name'
	},
})
2

Add additional locations with useSetLocation()

To add multiple locations that are meant to be active at the same time, use the useSetLocation() hook and pass in true as the second parameter.

useSetLocation({ 
  'id': 'locationId1',
  'locationName': 'Scene1LocationName',
  'version': {
		'id': 'v1.0',
		'name': 'Version Name'
	},
  'videoFrame': '120'
}, true)

useSetLocation({
  'id': 'locationId2',
  'locationName': 'Scene2LocationName',
  'version': {
		'id': 'v1.0',
		'name': 'Version Name'
	},
  'videoFrame': '50'
}, true)

useSetLocation({
  'id': 'locationId3',
  'locationName': 'Scene3LocationName',
  'version': {
		'id': 'v1.0',
		'name': 'Version Name'
	},
  'videoFrame': '80'
}, true)
3

Bind location container elements to location object

Location data attributes are mandatory if you are using multiple locations.

If you have elements representing multiple locations displayed on the same page, then you can bind them to a location using the data-velt-location attribute.

You should stringify and pass the location object as value to the data attribute.

Be sure to Stringify the location object before passing it to the data attribute. Also be sure to add a unique id to each of the containers for extra robustness.

let dataAttributeObject1 = {
  key1: "value1"
}

let dataAttributeObject2 = {
  key2: "value2"
}


<div class="page">
  <div id="location1-container-id" data-velt-location={JSON.stringify(dataAttributeObject1)}>
    <div class="card">
      // any content
    </div>
  </div>
  <div id="location2-container-id" data-velt-location={JSON.stringify(dataAttributeObject2)}>
    <div class="card">
      // any content
    </div>
  </div>
</div>
import { useSetDocumentId, useSetLocation } from '@veltdev/react';

export default function YourDocument() {


  //Set Document ID
  useSetDocumentId('some_document_id');

  //Set Root Location
  useSetLocation({
      'id': 'locationId1',
      'locationName': 'Scene1LocationName',
      'version': {
        'id': 'v1.0',
        'name': 'Version Name'
      },
      'page': 'mainPage',
      'videoFrame': '120'
      // You can keep adding more field to make the location very specific.
      // The field names can be anything.
  })

  //Add another Location
  useSetLocation({
      'id': 'locationId2',
      'locationName': 'Scene2LocationName',
      'version': {
        'id': 'v1.0',
        'name': 'Version Name'
      },
      'page': 'mainPage',
      'videoFrame': '240'
      // You can keep adding more field to make the location very specific.
      // The field names can be anything.
  },true)


  return (
    <div>
      <div class="page">
        <div id="location1-container-id" data-velt-location={JSON.stringify({
            'id': 'locationId1',
            'locationName': 'Scene1LocationName',
            'version': {
              'id': 'v1.0',
              'name': 'Version Name'
            },
            'page': 'mainPage',
            'videoFrame': '120'
        })}>
          <div class="card">
            // any content
          </div>
        </div>
        <div id="location2-container-id" data-velt-location={JSON.stringify({
            'id': 'locationId2',
            'locationName': 'Scene2LocationName',
            'version': {
              'id': 'v1.0',
              'name': 'Version Name'
            },
            'page': 'mainPage',
            'videoFrame': '240'
        })}>
          <div class="card">
            // any content
          </div>
        </div>
      </div>
    </div>
    
  );
}