@viewdo/dxp-story-cli
Version:
DXP Story Management CLI
521 lines (519 loc) • 27.9 kB
JSON
{
"$schema": "http://json-schema.org/draft-07/schema#",
"name": "view.DO UI-ML: Video State",
"description": "Data to create different types of video players from different sources.",
"required": ["id", "name", "url", "next", "playerSettings"],
"type": "object",
"properties": {
"id": {
"name": "Id",
"type": "string",
"description": "A unique identifier for the state. Used by iVXjs for navigation and CSS styling."
},
"name": {
"name": "Name",
"type": "string",
"description": "A human readable name of the state."
},
"type": {
"name": "Type",
"type": "string",
"description": "This state's type indicating what kind of state will render to the user.",
"enum": [
"video",
"html",
"input",
"navigation"
]
},
"url": {
"name": "Url",
"type": "string",
"description": "The url pathname which this state can be found that must be preceded by a /. For example, if the domain name is \"http://www.example.com\" and this state's url is \"/test\" then the url for this state will be \"http://www.example.com/#/test.\""
},
"next": {
"type": "array",
"name": "Next",
"description": "A collection of rules and state Ids that indicate which state this state will go to once an appropriate actions is performed on the state. Each state will have its own action that will trigger a next navigation.",
"minLength": 1,
"items": {
"name": "Next Collection Items",
"type": "object",
"description": "Indicates which state to go to next based on its stateId and rule",
"required": ["stateId"],
"properties": {
"stateId": {
"name": "State ID",
"type": "string",
"description": "The stateId the user will go to if the rule is evaluated to true or missing."
},
"rule": {
"name": "Rule",
"type": "object",
"description": "Supplies the rule information for this experiences rule function to evaluate if this state should be used. If this rule evaluates to 'true', then iVXjs will navigate to the corresponding state.",
"required": ["conditions"],
"properties": {
"conditionOperators": {
"name": "Condition Operators",
"type": "string",
"description": "Indicates how to evaluate the conditions for this rule.",
"enum": [
"and",
"or",
"not"
]
},
"conditions": {
"name": "Conditions",
"type": "array",
"description": "The conditions/rules to be evaluate to a boolean.",
"items": {
"type": "object",
"name": "Condition Settings",
"description": "The key, value and the evaluator for each of the conditions.",
"required": ["key", "is", "value"],
"properties": {
"key": {
"name": "Condition Key",
"type": "string",
"description": "The key from the experience.data object or a keyword the rule function uses to get the correct data."
},
"is": {
"name": "Condition Comparer",
"type": "string",
"description": "The type of comparison this key will be evaluated against the value",
"enum": [
"lt",
"lte",
"gt",
"gte",
"equals",
"notEquals"
]
},
"value": {
"name": "Condition Value",
"type": ["number", "string", "boolean", "integer"],
"description": "The value to evaluate the data found in the 'key'."
},
"type": {
"name": "Condition Type",
"type": "string",
"description": "Type of comparison. By default, it is input meaning it looks for any data input in the experience object. However, some data modules may use this to indicate a special kind of condition"
}
}
}
}
}
}
}
}
},
"audio": {
"type": "object",
"name": "State Audio",
"description": "All settings for state-wide audio that plays when a user enters the state.",
"required": ["src"],
"properties": {
"src": {
"name": "State Audio Source",
"type": "string",
"description": "The path to the audio for this state."
},
"loop": {
"name": "Loop",
"type": "boolean",
"description": "Determines if the state wide audio should repeat if the audio ends."
},
"cuePoints": {
"type": "array",
"name": "State Audio Cue Points",
"description": "Events/Actions to fire while a state wide audio plays.",
"items": {
"type": "object",
"name": "State Audio Cue Points Event Data",
"description": "Events to fire at a specific time during an audio clip.",
"required": ["timeAt"],
"properties": {
"timeAt": {
"name": "Time At",
"type": "number",
"description": "Time in the audio at which this event should fire."
},
"once": {
"name": "Once",
"type": "boolean",
"description": "Indicates that this event should fire once (just in case the audio loops)"
},
"eventName": {
"name": "State Audio Event Name",
"type": "string",
"description": "The event to be fired."
},
"args": {
"name": "State Audio Event Arguments",
"type": "object",
"description": "Arguments for this event."
}
}
}
},
"onEnd": {
"name": "On Audio End",
"type": "array",
"description": "Events to fire when the audio clip is finished."
}
}
},
"header": {
"type": "object",
"name": "Header",
"description": "Contains all the settings for the header which appears before the main section of the state.",
"properties": {
"templateUrl": {
"name": "Header's Template URL Path",
"type": "string",
"description": "Url path to an external .html file"
},
"html": {
"name": "Header's HTML",
"type": "string",
"description": "HTML to be inserted in the header section of the state."
},
"classes": {
"name": "Header's CSS Class Names",
"type": "string",
"description": "Classes to add to the header section of this state. Used mostly for injecting classes for ui frameworks."
}
}
},
"section": {
"type": "object",
"name": "Section",
"description": "Contains all the settings for the section (the wrapper around state specific features like forms, links and video",
"properties": {
"classes": {
"name": "Section CSS Class Names",
"type": "string",
"description": "Classes to be added to the section part of the state. Primarily used for UI frameworks and targeting specific elements."
}
}
},
"footer": {
"type": "object",
"name": "Footer",
"description": "Contains all the settings for the footer which appears after the main section of the state.",
"properties": {
"templateUrl": {
"name": "Footer Template URL Path",
"type": "string",
"description": "Url path to an external .html file."
},
"html": {
"name": "Footer HTML",
"type": "string",
"description": "HTML to be inserted in the footer section of the state."
},
"classes": {
"name": "Footer CSS Class Names",
"type": "string",
"description": "Classes to add to the footer section in this state. Used mostly for injecting classes for ui frameworks."
}
}
},
"onEnter": {
"name": "On Enter",
"type": "array",
"description": "A collection of events and actions to run everytime the user loads this state.",
"items": {
"type": "object",
"descriptions": "Event data as defined in the event section of this documentation"
}
},
"onExit": {
"name": "On Exit",
"type": "array",
"description": "A collection of events and actions to run every time the user exits this state.",
"items": {
"type": "object",
"descriptions": "Event data as defined in the event section of this documentation"
}
},
"playerSettings": {
"name": "Player Settings",
"type": "object",
"description": "The player settings for the video player types. Depending on the settings, it will create the appropriate video players to support the settings. Though none of the elements are required, there needs to be at least src, sources, vimeoId, or youtubeId.",
"properties": {
"id": {
"name": "Player Id",
"type": "string",
"description": "This will set the id for the player and only events with the match playerId in their args fire with this player. This is useful if you would like to create player specific controls when you have multiple video players on the page."
},
"autoplay": {
"name": "Autoplay",
"type": "boolean",
"description": "Informs if this video should autoplay when a user enters the state. It defaults to false. (Doesn't work with iPhone)"
},
"controls": {
"name": "Controls",
"type": [
"boolean",
"string",
"object"
],
"description": "Contains settings which controls to use for this video. (DEPRECIATION NOTE: You can still use boolean or a string. If true, the native controls appear. If false, as many of the native controls are hidden. If the value is equal to 'standard', this will trigger the default controls for this instance of iVX.js.)",
"enum": [
"standard"
],
"required": ["type"],
"properties": {
"type": {
"name": "Control Type",
"type": [
"boolean",
"string"
],
"description": "Decides which controls to use for this video. If true, the native controls appear. If false, as many of the native controls are hidden. If the value is equal to 'standard', this will trigger the default controls for this instance of iVX.js."
},
"classes" : {
"name" : "Classes",
"type" : "string",
"description" : "Classes to add to the controls container."
}
}
},
"classes": {
"name": "Classes",
"type": [
"string"
],
"description": "Classes to be added to the video player. Each class should be separated by a space. These classes will be put on the Video element for HTML5, and the iFrames for YouTube and Vimeo."
},
"attributes": {
"name": "Attributes",
"type": "object",
"description": "Any other attributes the user wants to add to the video player. The key of the data is the attribute name and the value is the attribute's value. (HTML5 Only)"
},
"src": {
"name": "HTML5 Video Source",
"type": "string",
"description": "Filepath to the video file to play in the HTML5 video element. Is required if there are no 'sources', 'vimeoId', or 'youtubeId' is defined"
},
"poster": {
"name": "Poster Image",
"type": "string",
"description": "Filepath to a poster image to appear above the video (HTML5 Only)"
},
"sources": {
"name": "Sources",
"type": "array",
"description": "If using the HTML5 video element, these are the settings for source tags between the video element.",
"items": {
"name": "HTML5 Video Source Settings",
"type": "object",
"description": "Settings for this source tag",
"required": ["src", "type"],
"properties": {
"src": {
"name": "Source Tag Source",
"type": "string",
"description": "The path to the this video source."
},
"type": {
"name": "Source Tag Video Type",
"type": "string",
"description": "The file type of the video source, required by this source tag"
}
}
}
},
"tracks": {
"name": "Tracks",
"type": "array",
"description": "If using the HTML 5 video element, this will the settings for the tracks element in the elements used for close captioning",
"items": {
"name": "HTML5 Video Track Settings",
"type": "object",
"description": "Settings for the track element",
"required": ["id", "kind"],
"properties": {
"id": {
"name": "Track Id",
"type": "string",
"description": "Unique track identifier used in selecting tracks from the track collection and choosing languages."
},
"kind": {
"name": "Track Tag Kind",
"type": "string",
"description": "Kind of track such as chapter",
"enum": [
"subtitles",
"captions",
"metadata",
"chapters"
]
},
"default": {
"name": "Is Default Track",
"type": "boolean",
"description": "Determines if this track is the default track for this video"
},
"label": {
"name": "Label",
"type": "string",
"description": "Label for the track. This will appear in the language select dropdown"
},
"src": {
"name": "Track Tag Source",
"type": "string",
"description": "Path to the .VTT file for this track (Required if there are no cues)"
},
"cues": {
"name": "Cues",
"type": "array",
"description": "Cues are an array of cues. (Required if there is no src)",
"items": {
"name": "HTML5 Track Cue",
"type": "object",
"description": "Settings for a cue point. Each cue has a start and end time. Based on the kind selected, different properties have different affects similar to how tracks work. For more info, go to this link: <a href='https://developer.mozilla.org/en-US/docs/Web/API/WebVTT_API'>WebVTT API MDN.</a>",
"required": ["id", "start", "end", "payload"],
"properties": {
"id": {
"name": "Cue Id",
"type": "string",
"description": "Unique identifier for this cue. Used primarily for selecting tracks and chapters"
},
"start": {
"name": "Start Time",
"type": "number",
"description": "Time in seconds where this cue starts in the video"
},
"end": {
"name": "End Time",
"type": "number",
"description": "Time in seconds where this cue ends in the video"
},
"payload": {
"name": "Payload",
"type": "string",
"description": "It is the payload for this cue. The payload content does different things based on their kind. Their kinds and the payload meaning is as follows: <ul><li>Captions: Caption content that appears on the video</li><li>Subtitles: Subtitle content that appears on the video</li><li>Chapter: Renders a chapter label. If standard controls are on, this will appear as the label for the chapter buttons.</li><li>Metadata: A string that can be anything from a JSON, HTML, text, etc. </li> </ul>"
},
"position": {
"name": "Position",
"type": "string",
"description": "Specifies where the text will appear horizontally. If vertical is set, where the text appears vertically. The value is a percent that ranges from 0% to 100%. 0% means to the left. 100% means to the right."
},
"size": {
"name": "Size",
"type": "string",
"description": "Specifies the width of the text area. If vertical is set, it determines the width. The value is a percent from 0% to 100%. 100% means full width. 50% means half width."
},
"align": {
"name": "Align",
"type": "string",
"description": "Specifies the alignment of the text. Text is aligned within the space given by the size cue setting if it is set.",
"enum": [
"start",
"middle",
"end"
]
},
"vertical": {
"name": "Vertical",
"type": "string",
"description": "Indicates that the text will be displayed vertically rather than horizontally, such as in some Asian languages.",
"enum": [
"rl",
"lr"
]
},
"line": {
"name": "Line",
"type": "string",
"description": "Indicates where the text appears vertically. If vertical is set, line specifies where text appears horizontally. Can be either 0 to 1 number"
}
}
}
}
}
}
}
}
},
"personalizations": {
"name": "Video Personalizations",
"type": "array",
"description": "An array of settings for personalizations for this video state.",
"items": {
"name": "Video Personalization Settings",
"type": "object",
"description": "Settings for this personalization HTML element",
"required": ["id", "html"],
"properties": {
"id": {
"name": "Personalization ID",
"type": "string",
"description": "The id for this personalization that will be targeted by CSS/JS."
},
"html": {
"name": "Personalization HTML",
"type": "string",
"description": "The HTML to be inside this personalization."
},
"templateUrl": {
"name": "Personalization Template Path",
"type": "string",
"description": "Url path to an external .html file"
}
}
}
},
"cuePoints": {
"name": "Video Event Cue Points",
"type": "array",
"description": "An array of cue-points data which will tell what event to fire and when during a video.",
"items": {
"name": "Video Cue Point Settings",
"type": "object",
"description": "A cuePoints are similar to events and actions but with two properties: timeAt and endAt. These properties allow the developer to say when in a video these actions and events should occur. The action will only fire though if the video is playing, so if the user scrubs or the developer skips to another part of the video, the events will not fire.",
"required": ["eventName"],
"properties": {
"eventName": {
"name": "Cue Point Event Name",
"type": "string",
"description": "Event name to be fired"
},
"args": {
"name": "Cue Point Event's Arguments",
"type": "object",
"description": "Arguments for the event to be fired"
},
"timeAt": {
"name": "Cue Point Time",
"type": "number",
"description": "Time in seconds where this event is fired. If there is not an endAt property, the action will fire only if the videos internal clock is within 0.2 seconds of the time."
},
"endAt": {
"name": "End At Time",
"type": "number",
"description": "Time where the cue-point ends. This means if a user scrubs or starts after this time, the event will not fire. Used with timeAt, it creates a window where an event should fire. Without a timeAt property, it will fire at least once from the beginning to this time."
},
"always": {
"name": "Always Fire",
"type": "boolean",
"description": "By default, a cue-point event only fires once. If the event needs to fire whenever the video is at the point in the video, this needs to be true."
}
}
}
},
"onVideoEnd": {
"name": "Video End Events",
"type": "array",
"description": "An array of event data to run when a user finishes the video and before the navigation to the next state is fired if there is next state.",
"items": {
"type": "object",
"descriptions": "Event data as defined in the event section of this documentation"
}
}
}
}