diff --git a/README.md b/README.md
index 6c0b2e5..6a92d20 100644
--- a/README.md
+++ b/README.md
@@ -1,10 +1,79 @@
-adapt-youtube
-================
+# adapt-youtube
-Component that allows the [YouTube IFrame Player](https://developers.google.com/youtube/iframe_api_reference) to be used within Adapt. For a fuller description of the various settings in example.json, see the [YouTube IFrame Player API](https://developers.google.com/youtube/player_parameters).
+**Adapt YouTube** is a *presentation component* that allows the [YouTube IFrame Player](https://developers.google.com/youtube/iframe_api_reference) to be used within Adapt. For a fuller description of the various settings in example.json, see the [YouTube IFrame Player API](https://developers.google.com/youtube/player_parameters).
+## Installation
-----------------------------
+TBC
+
+## Settings Overview
+
+The attributes listed below are used in *components.json* to configure **Adapt YouTube Player**, and are properly formatted as JSON in [*example.json*](https://github.com/adaptlearning/adapt-youtube/example.json).
+
+### Attributes
+
+[**core model attributes**](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes): These are inherited by every Adapt component. [Read more](https://github.com/adaptlearning/adapt_framework/wiki/Core-model-attributes).
+
+**_component** (string): This value must be: `youtube`.
+
+**_classes** (string): CSS class name to be applied to **YouTube** containing `div`. The class must be predefined in one of the Less files. Separate multiple classes with a space.
+
+**_layout** (string): This defines the horizontal position of the component in the block. Acceptable values are `full`, `left` or `right`.
+
+**instruction** (string): This optional text appears above the component. It is frequently used to guide the learner’s interaction with the component.
+
+**_setCompletionOn** (string): This determines when Adapt will register this component as having been completed by the user. Acceptable values are `inview` (triggered when the component is fully displayed within the viewport), `play` (triggered when playback is initiated), or `ended` (triggered when the video has reached the end of playback).
+
+**_media** (object): The media configuration, containing values for various YouTube API features
+
+>**_source** (string): The URL of the YouTube video. This can be a direct link or an embed link
+
+>**_controls** (string): Specifies whether or not the player controls are displayed.
+
+>**_allowFullscreen** (string): Setting to give the learners option to play the YouTube video at full screen.
+
+>**_playsinline** (string): If enabled, videos will play 'inline' on iPhones (the same way they do on iPads).
+
+>**_aspectRatio** (string): The aspect ratio of the video as a decimal number. If the aspect ratio is 16:9 then you calculate the decimal version by dividing 16 by 9 i.e. 1.778. 4:3 aspect ratio is 1.33.
+
+>**_autoplay** (boolean): Specifies whether or not the video will automatically start to play when the player loads (not supported on iOS).
+
+>**_showRelated** (boolean): Since Sept 2018 the YouTube player no longer allows you to prevent related videos from being shown - see https://developers.google.com/youtube/player_parameters#rel
-**Version number:** 3.0.0 
-**Framework versions:** 5.19.1+
+>**_loop** (boolean): Whether to play the video on a loop or not.
+
+>**_modestBranding** (boolean): This parameter lets you use a YouTube player that does not show a YouTube logo. Set to true to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.
+
+>**_playbackQuality** (boolean): The suggested video quality for the video. You should select a playback quality that corresponds to the size of your video player. For example, if your page displays a 1280px by 720px video player, a hd720 quality video will actually look better than an hd1080 quality video.
+
+>**_showAnnotations** (boolean): Whether video annotations should be shown or not.
+
+>**_progressColor** (boolean): The colour that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. Setting this to 'white' will disable the 'modest branding' option.
+
+**_transcript** (object): The transcript attributes group contains values for **_inlineTranscript**, **_externalTranscript**, **inlineTranscriptButton**, **inlineTranscriptCloseButton**, **inlineTranscriptBody**, **transcriptLinkButton**, and **transcriptLink**.
+
+>**_setCompletionOnView** (boolean): This determines if Adapt will register this component as having been completed by the user when the inline transcript is opened. This is true by default.
+
+>**_inlineTranscript** (boolean): Determines whether the button that toggles the display of the inline transcript text will be displayed or not.
+
+>**_externalTranscript** (boolean): Determines whether the button that links to the optional external transcript will be displayed or not.
+
+>**inlineTranscriptButton** (string): This text appears on the button that toggles the visibility of the inline transcript text. It is displayed when the inline transcript text is hidden. If no text is provided, the **transcriptLink** will be displayed on the button.
+
+>**inlineTranscriptCloseButton** (string): This text appears on the button that toggles the visibility of the inline transcript. It is displayed when the inline transcript text is visible.
+
+>**inlineTranscriptBody** (string): This optional text appears below the video. If provided, its visibility is toggled by clicking the transcript button. It is hidden by default.
+
+>**transcriptLinkButton** (string): This text appears on the button that links to the optional external transcript. If no text is provided, the **transcriptLink** will be displayed on the button.
+
+>**transcriptLink** (string): File name (including path) of the optional external transcript. Path should be relative to the *src* folder (e.g., *course/en/pdf/video01_transcript.pdf*).
+
+### Accessibility
+
+### Limitations
+
+No known limitations
+
+----------------------------
+**Framework versions:** 5.19.1
+**Author / maintainer:** Adapt Core Team with [contributors](https://github.com/adaptlearning/adapt-youtube/graphs/contributors)
\ No newline at end of file
diff --git a/bower.json b/bower.json
index 16b33eb..4966283 100644
--- a/bower.json
+++ b/bower.json
@@ -1,26 +1,23 @@
{
"name": "adapt-youtube",
- "repository": {
- "type": "git",
- "url": "git://github.com/adaptlearning/adapt-youtube.git"
- },
"version": "3.1.0",
"framework": ">=5.19.1",
"homepage": "https://github.com/adaptlearning/adapt-youtube",
"issues": "https://github.com/adaptlearning/adapt-youtube/issues",
"component": "youtube",
- "displayName": "YouTube Player",
- "description": "YouTube Player for Adapt",
+ "targetAttribute": "_youtube",
+ "displayName": "YouTube",
+ "description": "Media player for when content needs to be streamed from the video hosting platform, YouTube.",
"main": "/js/adapt-youtube.js",
"keywords": [
"adapt-plugin",
"adapt-component"
],
+ "license": "GPL-3.0",
"authors": [
"Oliver Foster ",
"Matt Leathes "
],
- "license": "GPL-3.0",
"private": true,
"devDependencies": {
"@semantic-release/commit-analyzer": "^9.0.2",
diff --git a/package.json b/package.json
index 16b33eb..4966283 100644
--- a/package.json
+++ b/package.json
@@ -1,26 +1,23 @@
{
"name": "adapt-youtube",
- "repository": {
- "type": "git",
- "url": "git://github.com/adaptlearning/adapt-youtube.git"
- },
"version": "3.1.0",
"framework": ">=5.19.1",
"homepage": "https://github.com/adaptlearning/adapt-youtube",
"issues": "https://github.com/adaptlearning/adapt-youtube/issues",
"component": "youtube",
- "displayName": "YouTube Player",
- "description": "YouTube Player for Adapt",
+ "targetAttribute": "_youtube",
+ "displayName": "YouTube",
+ "description": "Media player for when content needs to be streamed from the video hosting platform, YouTube.",
"main": "/js/adapt-youtube.js",
"keywords": [
"adapt-plugin",
"adapt-component"
],
+ "license": "GPL-3.0",
"authors": [
"Oliver Foster ",
"Matt Leathes "
],
- "license": "GPL-3.0",
"private": true,
"devDependencies": {
"@semantic-release/commit-analyzer": "^9.0.2",
diff --git a/properties.schema b/properties.schema
index d46595b..581c78e 100644
--- a/properties.schema
+++ b/properties.schema
@@ -7,7 +7,8 @@
"ariaRegion": {
"type": "string",
"required": true,
- "default": "Media component which displays a YouTube video. Select the play / pause button to watch it.",
+ "title": "YouTube: ARIA region",
+ "default": "This is a media component which displays a YouTube video. Select the play / pause button to watch it.",
"inputType": "Text",
"validators": []
},
@@ -31,16 +32,18 @@
"instruction": {
"type": "string",
"required": false,
- "default": "",
+ "default": "Select the play button to start the video.",
"inputType": "Text",
- "validators": []
+ "validators": [],
+ "help": "This is the instruction text",
+ "translatable": true
},
"_setCompletionOn": {
"type": "string",
"required": true,
"enum": ["inview", "play", "ended"],
"default": "play",
- "title": "Completion trigger",
+ "title": "Set completion of Video on",
"inputType": {"type": "Select", "options":["inview", "play", "ended"]},
"validators": ["required"],
"help": "Defines what media event should trigger completion of this component."
@@ -90,7 +93,7 @@
"_aspectRatio": {
"type": "number",
"required": false,
- "default": "1.778",
+ "default": 1.778,
"title": "Aspect ratio",
"inputType": "Text",
"validators": [],
@@ -178,16 +181,15 @@
"type": "boolean",
"required": false,
"default": true,
- "title": "Trigger completion?",
+ "title": "Mark this component as complete when transcript is shown",
"inputType": "Checkbox",
- "validators": [],
- "help": "Whether to have this component mark as completed when the transcript is shown."
+ "validators": []
},
"_inlineTranscript": {
"type": "boolean",
"required": false,
"default": false,
- "title": "Show Inline",
+ "title": "Enable inline transcript",
"inputType": "Checkbox",
"validators": []
},
@@ -195,7 +197,7 @@
"type": "boolean",
"required": false,
"default": false,
- "title": "Show Link",
+ "title": "Enable linked transcript file",
"inputType": "Checkbox",
"validators": []
},
@@ -203,7 +205,7 @@
"type": "string",
"required": false,
"default": "",
- "title": "Inline Open Button",
+ "title": "Inline transcript open button label",
"inputType": "Text",
"validators": [],
"translatable": true
@@ -212,7 +214,7 @@
"type": "string",
"required": false,
"default": "",
- "title": "Inline Close Button",
+ "title": "Inline transcript close button label",
"inputType": "Text",
"validators": [],
"translatable": true
@@ -224,14 +226,13 @@
"title": "Inline Transcript",
"inputType": "TextArea",
"validators": [],
- "help": "Optional text appears below the video",
"translatable": true
},
"transcriptLinkButton": {
"type": "string",
"required": false,
"default": "",
- "title": "Link Open Button",
+ "title": "Linked transcript file button label",
"inputType": "Text",
"validators": [],
"translatable": true
@@ -240,7 +241,7 @@
"type": "string",
"required": false,
"default": "",
- "title": "Transcript Link",
+ "title": "Linked transcript file source",
"inputType": "Asset:other",
"validators": [],
"help": "Select a file for the transcript link"
diff --git a/schema/component.schema.json b/schema/component.schema.json
new file mode 100644
index 0000000..9bd2132
--- /dev/null
+++ b/schema/component.schema.json
@@ -0,0 +1,212 @@
+{
+ "$anchor": "youtube-component",
+ "$schema": "https://json-schema.org/draft/2020-12/schema",
+ "type": "object",
+ "$merge": {
+ "source": {
+ "$ref": "component"
+ },
+ "with": {
+ "required": [
+ "_media"
+ ],
+ "properties": {
+ "_supportedLayout": {
+ "type": "string",
+ "title": "Supported layout",
+ "default": "both",
+ "enum": [
+ "full-width",
+ "half-width",
+ "both"
+ ],
+ "_adapt": {
+ "editorOnly": true
+ }
+ },
+ "instruction": {
+ "type": "string",
+ "title": "Instruction",
+ "description": "This is the instruction text",
+ "default": "Select the play button to start the video.",
+ "_adapt": {
+ "translatable": true
+ }
+ },
+ "_setCompletionOn": {
+ "type": "string",
+ "title": "Set completion of Video on",
+ "description": "Defines what media event should trigger completion of this component.",
+ "default": "play",
+ "enum": [
+ "inview",
+ "play",
+ "ended"
+ ],
+ "_backboneForms": "Select"
+ },
+ "_media": {
+ "type": "object",
+ "title": "Media settings",
+ "properties": {
+ "_source": {
+ "type": "string",
+ "title": "Source URL",
+ "description": "The 'embed' URL of the YouTube video you want to be displayed",
+ "default": "",
+ "_backboneForms": {
+ "editorAttrs": {
+ "placeholder": "//www.youtube.com/embed/jNQXAC9IVRw"
+ }
+ }
+ },
+ "_controls": {
+ "type": "boolean",
+ "title": "Show Player Controls",
+ "description": "Specifies whether or not the player controls are displayed.",
+ "default": true
+ },
+ "_allowFullscreen": {
+ "type": "boolean",
+ "title": "Allow Fullscreen?",
+ "default": true
+ },
+ "_playsinline": {
+ "type": "boolean",
+ "title": "If enabled, videos will play 'inline' on iPhones (the same way they do on iPads).",
+ "default": false
+ },
+ "_aspectRatio": {
+ "type": "number",
+ "title": "Aspect ratio",
+ "description": "The aspect ratio of the video as a decimal number. If the aspect ratio is 16:9 then you calculate the decimal version by dividing 16 by 9 i.e. 1.778. 4:3 aspect ratio is 1.33",
+ "default": 1.778
+ },
+ "_autoplay": {
+ "type": "boolean",
+ "title": "Autoplay",
+ "description": "Specifies whether or not the video will automatically start to play when the player loads (not supported on iOS).",
+ "default": false
+ },
+ "_showRelated": {
+ "type": "boolean",
+ "title": "Show related videos",
+ "description": "Since Sept 2018 the YouTube player no longer allows you to prevent related videos from being shown - see https://developers.google.com/youtube/player_parameters#rel",
+ "default": false
+ },
+ "_loop": {
+ "type": "boolean",
+ "title": "Loop",
+ "description": "Whether to play the video on a loop or not.",
+ "default": false
+ },
+ "_modestBranding": {
+ "type": "boolean",
+ "title": "Modest branding",
+ "description": "This parameter lets you use a YouTube player that does not show a YouTube logo. Set to true to prevent the YouTube logo from displaying in the control bar. Note that a small YouTube text label will still display in the upper-right corner of a paused video when the user's mouse pointer hovers over the player.",
+ "default": true
+ },
+ "_playbackQuality": {
+ "type": "string",
+ "title": "Playback quality",
+ "description": "The suggested video quality for the video. You should select a playback quality that corresponds to the size of your video player. For example, if your page displays a 1280px by 720px video player, a hd720 quality video will actually look better than an hd1080 quality video.",
+ "default": "default",
+ "enum": [
+ "default",
+ "small",
+ "medium",
+ "large",
+ "hd720",
+ "hd1080",
+ "highres"
+ ],
+ "_backboneForms": "Select"
+ },
+ "_showAnnotations": {
+ "type": "boolean",
+ "title": "Video annotations",
+ "description": "Whether video annotations should be shown or not.",
+ "default": false
+ },
+ "_progressColor": {
+ "type": "string",
+ "title": "Progress bar color",
+ "description": "The colour that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. Setting this to 'white' will disable the 'modest branding' option.",
+ "default": "red",
+ "enum": [
+ "red",
+ "white"
+ ],
+ "_backboneForms": "Select"
+ }
+ }
+ },
+ "_transcript": {
+ "type": "object",
+ "title": "Transcript Options",
+ "default": {},
+ "properties": {
+ "_setCompletionOnView": {
+ "type": "boolean",
+ "title": "Mark this component as complete when transcript is shown",
+ "default": true
+ },
+ "_inlineTranscript": {
+ "type": "boolean",
+ "title": "Enable inline transcript",
+ "default": false
+ },
+ "_externalTranscript": {
+ "type": "boolean",
+ "title": "Enable linked transcript file",
+ "default": false
+ },
+ "inlineTranscriptButton": {
+ "type": "string",
+ "title": "Inline transcript open button label",
+ "default": "",
+ "_adapt": {
+ "translatable": true
+ }
+ },
+ "inlineTranscriptCloseButton": {
+ "type": "string",
+ "title": "Inline transcript close button label",
+ "default": "",
+ "_adapt": {
+ "translatable": true
+ }
+ },
+ "inlineTranscriptBody": {
+ "type": "string",
+ "title": "Inline Transcript",
+ "default": "",
+ "_adapt": {
+ "translatable": true
+ },
+ "_backboneForms": "TextArea"
+ },
+ "transcriptLinkButton": {
+ "type": "string",
+ "title": "Linked transcript file button label",
+ "default": "",
+ "_adapt": {
+ "translatable": true
+ }
+ },
+ "transcriptLink": {
+ "type": "string",
+ "isObjectId": true,
+ "title": "Linked transcript file source",
+ "description": "Select a file for the transcript link",
+ "_backboneForms": {
+ "type": "Asset",
+ "media": "other"
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/schema/course.schema.json b/schema/course.schema.json
new file mode 100644
index 0000000..dfa54e7
--- /dev/null
+++ b/schema/course.schema.json
@@ -0,0 +1,39 @@
+{
+ "$anchor": "youtube-course",
+ "$schema": "https://json-schema.org/draft/2020-12/schema",
+ "type": "object",
+ "$patch": {
+ "source": {
+ "$ref": "course"
+ },
+ "with": {
+ "properties": {
+ "_globals": {
+ "type": "object",
+ "default": {},
+ "properties": {
+ "_youtube": {
+ "type": "object",
+ "default": {},
+ "properties": {
+ "ariaRegion": {
+ "type": "string",
+ "title": "YouTube: ARIA region",
+ "default": "This is a media component which displays a YouTube video. Select the play / pause button to watch it.{{#any _transcript._inlineTranscript _transcript._externalTranscript}} An alternative transcript is also available.{{/any}}"
+ },
+ "skipToTranscript": {
+ "type": "string",
+ "title": "Skip to transcript",
+ "default": "Skip to transcript",
+ "_adapt": {
+ "translatable": true
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}