Basic Hub example
  • Comedy
  • Action
  • Fantasy
  • Indiana Jones
  • Arnold Schwarzenegger
  • Jackie Chan
  • Contents and the method of displaying of <deo-hub>, as well as of <deo-video>, are determined by its attributes and subsidiary elements.

    Attributes of <deo-hub>
    cover-image, width, height, aspect

    the same as <deo-video>

    spacing

    spacing between elements (widgets) of the hub. A number between 0 and 0.2, 0.05 by default

    content-height

    height of widgets by default (where applicable) in metres. A number between 1 and 3. 2 by default

    content-offset

    displacement of the attributes in a cylindrical coordinate system. Valid value: X, Y.
    X — angular displacement (in radians), Y — vertical displacement (in metres)

    content-offset

    Widgets of <deo-hub>

    The hub contains the set of widgets.

    Common attributes of the widgets

    position

    widget’s position in cylindrical coordinates, valid value: X, Y.
    X -- angular coordinate (in radians), Y — vertical coordinate (in metres)

    aligned-to

    widget copies the position in space of given widget. Value: string, ID of any other widget.

    If neither position nor aligned-to are set, widgets are lined up:

    content-offset

    offset

    displacement of the widget in a cylindrical coordinate system. Used as a last resort at any method of choosing the position (either position or aligned-to)

    content-height

    has the same value as attribute ‘content-height’ of <deo-hub>, but used only for the widget for which it is set

    Widget <deo-grid>

    The major element of the hub: the grid of thumbnails, by clicking which the video is played

    Attributes

    columns, rows

    a number of columns and rows in the grid. Valid value: integer

    aspect

    aspect ratio of the thumbnails. Valid values: X:Y or X/Y

    vertical

    a bool value, which shows the direction of the scroll in the grid

    content-provider

    a path to the function which will provide the content to the grid. Accepts four arguments: filters, currentPage, itemsPerPage, callback.

    Requests the information about content for the grid (either from the server or from local database — wherever you want), then calls for callback with one object-argument {totalPages, items}, where totalPages is the total number of pages at the current configuration of filters with itemsPerPage thumbnails per page.

    items

    an array of objects which contain the information about the thumbnails. Each such object is represented with such forms:

    {
        "cover-image": "https://s3.deovr.com/images/100.png", // string, url to cover image
        "angle": "180", // number, fov of the video
        "format": "LR", // string, format of the video (LR, TB, mono)
        "flat": "false", // boolean, is video flat or stereo
        "title": "Kings And Swords", // string, title of the video,
        "src": [
          {
            "url": "https://s3.deovr.com/videos/h264/100_1080p.mp4", //string, url to video file,
            "quality": "1080p", // string, example: 1920p
            "mimeType": "" // string
          },
          {
            "url": "https://s3.deovr.com/videos/h264/100_1440p.mp4",
            "quality": "1440p",
            "mimeType": ""
          },
          {
            "url": "https://s3.deovr.com/videos/h264/100_1920p.mp4",
            "quality": "1920p",
            "mimeType": ""
          }
        ]
    }
    An Example of ‘content-provider’:
    window.contentProviderFunction = (filters, currentPage, itemsPerPage, callback) => {
        fetch(API_URL, ...)
            .then(response => response.json())
            .then(body => {
                callback({
                    totalPages: body.totalPages,
                    items: body.items
                });
            });
    }
    
    // Somewhere in HTML
    
    <deo-grid content-provider="contentProviderFunction" … ></deo-grid>
    Widget <deo-list>

    Interactive list, which is used as a filter or categorisator for <deo-grid>

    Subsidiary elements

    Contains the elements of <li>, which set the meaning of each element of the list. These values will be used in filters in content-provider (see <deo-grid>)

    Attributes

    title

    The heading of the list, string

    filter

    string, the name of the filter. Will appear in array filters in content-provider (see <deo-grid>)

    attached-to

    string, id of the grid, which will be filtered with this list

    Widget <deo-paginator>

    A convenient paginator for <deo-grid>

    Attributes

    attached-to

    grid, which will be flipped through using this paginator

    Widget <deo-img>

    Widget, which helps to include the images in the hub

    Attributes

    src

    string, image file url

    scale

    a scale of a picture, positive number

    onclick

    name of the function which will be called upon clicking on the image

    Widget <deo-spacer>

    Widget, which allows you to make indentations between other widgets

    Attributes

    width

    a number from 0 to 2

    Other Content of <deo-hub>
    <deo-preplay>

    Everything is totally similar to the same element from <deo-video>

    <deo-video>

    Everything is totally similar to the same element from <deo-video>
    <deo-video> included inside the <deo-hub> allows you to run DeoVR in player mode with the ability to switch to the hub

    An Example of Hub Creation

    For example, we want to create such hub:

    <deo-video>

    Everything is totally similar to the same element from <deo-video>

    content-offset

    First, we put the major element of the hub somewhere on the page and give it the necessary attributes.

    <deo-hub width="100%"
             aspect="16:10"
             cover-image="/images/hub_cover.png">
    </deo-hub>
    

    Then, we create widgets.
    Let’s start with creating the most important thing – the grid:

    <deo-grid
            id="main-grid"
            aspect="16:10"
            columns="4"
            rows="3"
            content-provider="contentProviderFunction">
    </deo-grid>
    

    Then we make filters for the grid:

    <deo-list
            title="Genres"
            filter="genres"
            attached-to="main-grid">
    
            <li>Comedy</li>
            <li>Action</li>
            <li>Fantasy</li>
    </deo-list>
    <deo-list
            title="Actors"
            filter="actors"
            attached-to="main-grid">
    
            <li>Indiana Jones</li>
            <li>Arnold Schwarzenegger</li>
            <li>Jackie Chan</li>
    </deo-list>

    All that’s left is to create a logo and a paginator and to put them above and below the grid respectively. To do that, we should use attributes aligned-to and offset:

    <deo-img
            src="/images/hub_logo.png"
            aligned-to="main-grid"
            offset="0, 1.25">
    </deo-img>
    <deo-paginator
            attached-to="main-grid"
            aligned-to="main-grid"
            offset="0, -1.25">
    </deo-paginator>

    The full code of the example:

    <deo-hub
            width="100%"
            aspect="16:10"
            cover-image="/images/hub_cover.png">
        <deo-list
                title="Genres"
                filter="genres"
                attached-to="main-grid">
            <li>Comedy</li>
            <li>Action</li>
            <li>Fantasy</li>
        </deo-list>
    
        <deo-grid
                id="main-grid"
                aspect="16:10"
                columns="4"
                rows="3"
                content-provider="contentProviderFunction">
        </deo-grid>
    
        <deo-list
                title="Actors"
                filter="actors"
                attached-to="main-grid">
            <li>Indiana Jones</li>
            <li>Arnold Schwarzenegger</li>
            <li>Jackie Chan</li>
        </deo-list>
    
        <deo-img
                src="/images/hub_logo.png"
                aligned-to="main-grid"
                offset="0, 1.25">
        </deo-img>
    
        <deo-paginator
                attached-to="main-grid"
                aligned-to="main-grid"
                offset="0, -1.25">
        </deo-paginator>
    
    </deo-hub>