@clickview/player 0.0.0-rc.1 → 0.0.0-rc.12

package/.storybook/stories/assets/interactive.json

@@ -0,0 +1,451 @@
+{
+  "timepoints": [{
+      "interactions": [{
+          "data": {
+              "sentence": "A news website keeping track of the number of clicks stories receive is an example of a {17} tool used to gather information."
+          },
+          "actionableItems": [{
+              "name": "digital",
+              "order": 17,
+              "isCorrect": true,
+              "interactionId": 704598,
+              "id": 1560253,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:27:03",
+              "dateDeleted": null,
+              "dateModified": null
+          }],
+          "name": "A news website keeping track of the number of clicks stories receive is an example of a _______ tool used to gather information.",
+          "order": 0,
+          "description": null,
+          "errorMessage": null,
+          "isRequired": false,
+          "interactiveId": 190303,
+          "timepointId": 709577,
+          "typeId": 6,
+          "type": {
+              "name": "Missing word",
+              "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/missing-word-v2.png",
+              "colour": "51ada3",
+              "id": 6,
+              "deleted": false,
+              "dateCreated": "2015-10-19T09:01:50",
+              "dateDeleted": null,
+              "dateModified": null
+          },
+          "id": 704598,
+          "deleted": false,
+          "dateCreated": "0001-01-01T00:00:00",
+          "dateDeleted": null,
+          "dateModified": null
+      }],
+      "visibleAt": 2500,
+      "visibleFor": null,
+      "shouldPause": 1,
+      "interactiveId": 190303,
+      "id": 709577,
+      "deleted": false,
+      "dateCreated": "0001-01-01T00:00:00",
+      "dateDeleted": null,
+      "dateModified": null
+  }, {
+      "interactions": [{
+          "data": {},
+          "actionableItems": [{
+              "name": "True",
+              "order": 0,
+              "isCorrect": false,
+              "interactionId": 704603,
+              "id": 1560263,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:27:41",
+              "dateDeleted": null,
+              "dateModified": null
+          }, {
+              "name": "False",
+              "order": 1,
+              "isCorrect": true,
+              "interactionId": 704603,
+              "id": 1560262,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:27:41",
+              "dateDeleted": null,
+              "dateModified": null
+          }],
+          "name": "A 'cookie' is term used to describe personalised, targeted advertisements.",
+          "order": 0,
+          "description": null,
+          "errorMessage": null,
+          "isRequired": false,
+          "interactiveId": 190303,
+          "timepointId": 709582,
+          "typeId": 3,
+          "type": {
+              "name": "True or False",
+              "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/true-or-false-v2.png",
+              "colour": "b18cbb",
+              "id": 3,
+              "deleted": false,
+              "dateCreated": "2015-10-19T09:01:50",
+              "dateDeleted": null,
+              "dateModified": null
+          },
+          "id": 704603,
+          "deleted": false,
+          "dateCreated": "0001-01-01T00:00:00",
+          "dateDeleted": null,
+          "dateModified": null
+      }],
+      "visibleAt": 4500,
+      "visibleFor": null,
+      "shouldPause": 1,
+      "interactiveId": 190303,
+      "id": 709582,
+      "deleted": false,
+      "dateCreated": "0001-01-01T00:00:00",
+      "dateDeleted": null,
+      "dateModified": null
+  }, {
+      "interactions": [{
+          "data": {},
+          "actionableItems": [{
+              "name": "Advertising",
+              "order": 0,
+              "isCorrect": true,
+              "interactionId": 704604,
+              "id": 1560270,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:28:33",
+              "dateDeleted": null,
+              "dateModified": null
+          }, {
+              "name": "Social media",
+              "order": 1,
+              "isCorrect": true,
+              "interactionId": 704604,
+              "id": 1560269,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:28:33",
+              "dateDeleted": null,
+              "dateModified": null
+          }, {
+              "name": "News and 'fake news'",
+              "order": 2,
+              "isCorrect": true,
+              "interactionId": 704604,
+              "id": 1560271,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:28:33",
+              "dateDeleted": null,
+              "dateModified": null
+          }, {
+              "name": "Election campaigns",
+              "order": 3,
+              "isCorrect": true,
+              "interactionId": 704604,
+              "id": 1560268,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:28:33",
+              "dateDeleted": null,
+              "dateModified": null
+          }],
+          "name": "Select all that apply. In what contexts might 'hyper-nudging' occur?",
+          "order": 0,
+          "description": null,
+          "errorMessage": null,
+          "isRequired": false,
+          "interactiveId": 190303,
+          "timepointId": 709583,
+          "typeId": 1,
+          "type": {
+              "name": "Multiple Choice",
+              "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/multiple-choice-v2.png",
+              "colour": "629fc9",
+              "id": 1,
+              "deleted": false,
+              "dateCreated": "2015-10-19T09:01:50",
+              "dateDeleted": null,
+              "dateModified": null
+          },
+          "id": 704604,
+          "deleted": false,
+          "dateCreated": "0001-01-01T00:00:00",
+          "dateDeleted": null,
+          "dateModified": null
+      }],
+      "visibleAt": 6500,
+      "visibleFor": null,
+      "shouldPause": 1,
+      "interactiveId": 190303,
+      "id": 709583,
+      "deleted": false,
+      "dateCreated": "0001-01-01T00:00:00",
+      "dateDeleted": null,
+      "dateModified": null
+  }, {
+      "interactions": [{
+          "data": {
+              "sentence": "Cambridge Analytica had access not only to their own data, but also data made available to them by {18}."
+          },
+          "actionableItems": [{
+              "name": "Facebook",
+              "order": 18,
+              "isCorrect": true,
+              "interactionId": 704608,
+              "id": 1560286,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:29:22",
+              "dateDeleted": null,
+              "dateModified": null
+          }],
+          "name": "Cambridge Analytica had access not only to their own data, but also data made available to them by _________.",
+          "order": 0,
+          "description": null,
+          "errorMessage": null,
+          "isRequired": false,
+          "interactiveId": 190303,
+          "timepointId": 709587,
+          "typeId": 6,
+          "type": {
+              "name": "Missing word",
+              "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/missing-word-v2.png",
+              "colour": "51ada3",
+              "id": 6,
+              "deleted": false,
+              "dateCreated": "2015-10-19T09:01:50",
+              "dateDeleted": null,
+              "dateModified": null
+          },
+          "id": 704608,
+          "deleted": false,
+          "dateCreated": "0001-01-01T00:00:00",
+          "dateDeleted": null,
+          "dateModified": null
+      }],
+      "visibleAt": 8500,
+      "visibleFor": null,
+      "shouldPause": 1,
+      "interactiveId": 190303,
+      "id": 709587,
+      "deleted": false,
+      "dateCreated": "0001-01-01T00:00:00",
+      "dateDeleted": null,
+      "dateModified": null
+  }, {
+      "interactions": [{
+          "data": {},
+          "actionableItems": [{
+              "name": "True",
+              "order": 0,
+              "isCorrect": true,
+              "interactionId": 704613,
+              "id": 1560300,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:30:27",
+              "dateDeleted": null,
+              "dateModified": null
+          }, {
+              "name": "False",
+              "order": 1,
+              "isCorrect": false,
+              "interactionId": 704613,
+              "id": 1560301,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:30:27",
+              "dateDeleted": null,
+              "dateModified": null
+          }],
+          "name": "Companies can combine information from multiple different digital sources to draw conclusions about people's behaviour.",
+          "order": 0,
+          "description": null,
+          "errorMessage": null,
+          "isRequired": false,
+          "interactiveId": 190303,
+          "timepointId": 709592,
+          "typeId": 3,
+          "type": {
+              "name": "True or False",
+              "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/true-or-false-v2.png",
+              "colour": "b18cbb",
+              "id": 3,
+              "deleted": false,
+              "dateCreated": "2015-10-19T09:01:50",
+              "dateDeleted": null,
+              "dateModified": null
+          },
+          "id": 704613,
+          "deleted": false,
+          "dateCreated": "0001-01-01T00:00:00",
+          "dateDeleted": null,
+          "dateModified": null
+      }],
+      "visibleAt": 10500,
+      "visibleFor": null,
+      "shouldPause": 1,
+      "interactiveId": 190303,
+      "id": 709592,
+      "deleted": false,
+      "dateCreated": "0001-01-01T00:00:00",
+      "dateDeleted": null,
+      "dateModified": null
+  }, {
+      "interactions": [{
+          "data": {},
+          "actionableItems": [{
+              "name": "Answer",
+              "order": 0,
+              "isCorrect": null,
+              "interactionId": 704616,
+              "id": 1560311,
+              "deleted": false,
+              "dateCreated": "2020-11-04T23:32:59",
+              "dateDeleted": null,
+              "dateModified": null
+          }],
+          "name": "Think of a form of social media or an app that you use regularly. What personal details or other data do you think it has about you?",
+          "order": 0,
+          "description": null,
+          "errorMessage": null,
+          "isRequired": false,
+          "interactiveId": 190303,
+          "timepointId": 709595,
+          "typeId": 2,
+          "type": {
+              "name": "Short Answer",
+              "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/short-answer-v2.png",
+              "colour": "73b18c",
+              "id": 2,
+              "deleted": false,
+              "dateCreated": "2015-10-19T09:01:50",
+              "dateDeleted": null,
+              "dateModified": null
+          },
+          "id": 704616,
+          "deleted": false,
+          "dateCreated": "0001-01-01T00:00:00",
+          "dateDeleted": null,
+          "dateModified": null
+      }],
+      "visibleAt": 12500,
+      "visibleFor": null,
+      "shouldPause": 1,
+      "interactiveId": 190303,
+      "id": 709595,
+      "deleted": false,
+      "dateCreated": "0001-01-01T00:00:00",
+      "dateDeleted": null,
+      "dateModified": null
+  },{
+    "interactions": [{
+        "data": {
+            "annotation": "\n        Discussion Time!<br><br>Can you think of a choice you have made that felt like the RIGHT thing to do?&nbsp;<br><br>What were the consequences?<br><br>"
+        },
+        "actionableItems": [{
+            "name": "Answer",
+            "order": 0,
+            "isCorrect": null,
+            "interactionId": 702581,
+            "id": 1556100,
+            "deleted": false,
+            "dateCreated": "2020-11-03T21:34:21",
+            "dateDeleted": null,
+            "dateModified": null
+        }],
+        "name": "Annotation",
+        "order": 0,
+        "description": null,
+        "errorMessage": null,
+        "isRequired": false,
+        "interactiveId": 189978,
+        "timepointId": 707559,
+        "typeId": 4,
+        "type": {
+            "name": "Annotation",
+            "icon": "//static.clickview.com.au/cv-online/images/interactions/icons/annotation-v2.png",
+            "colour": "f07e7e",
+            "id": 4,
+            "deleted": false,
+            "dateCreated": "2015-10-19T09:01:50",
+            "dateDeleted": null,
+            "dateModified": null
+        },
+        "id": 702581,
+        "deleted": false,
+        "dateCreated": "0001-01-01T00:00:00",
+        "dateDeleted": null,
+        "dateModified": null
+    }],
+    "visibleAt": 14500,
+    "visibleFor": null,
+    "shouldPause": 1,
+    "interactiveId": 189978,
+    "id": 707559,
+    "deleted": false,
+    "dateCreated": "0001-01-01T00:00:00",
+    "dateDeleted": null,
+    "dateModified": null
+  },{
+    "interactions":[
+       {
+          "data":{
+             "url":"https://api-image.clickviewapp.com/v1/thumbnails/5920179",
+             "caption":"The dark green area on this map shows how large the Murray-Darling Basin is. This area alone is responsible for growing one third of Australia's entire food supply!"
+          },
+          "actionableItems":[
+             {
+                "name":"Viewed",
+                "order":0,
+                "isCorrect":true,
+                "interactionId":664721,
+                "id":1476619,
+                "deleted":false,
+                "dateCreated":"2020-09-24T05:31:04",
+                "dateDeleted":null,
+                "dateModified":null
+             }
+          ],
+          "name":"The dark green area on this map shows how large the Murray-Darling Basin is. This area alone is responsible for growing one third of Australia's entire food supply!",
+          "order":0,
+          "description":null,
+          "errorMessage":null,
+          "isRequired":false,
+          "interactiveId":183569,
+          "timepointId":669510,
+          "typeId":5,
+          "type":{
+             "name":"Image",
+             "icon":"//static.clickview.com.au/cv-online/images/interactions/icons/image-v2.png",
+             "colour":"f8981d",
+             "id":5,
+             "deleted":false,
+             "dateCreated":"2015-10-19T09:01:50",
+             "dateDeleted":null,
+             "dateModified":null
+          },
+          "id":664721,
+          "deleted":false,
+          "dateCreated":"0001-01-01T00:00:00",
+          "dateDeleted":null,
+          "dateModified":null
+       }
+    ],
+    "visibleAt":16500,
+    "visibleFor":null,
+    "shouldPause":1,
+    "interactiveId":183569,
+    "id":669510,
+    "deleted":false,
+    "dateCreated":"0001-01-01T00:00:00",
+    "dateDeleted":null,
+    "dateModified":null
+  }],
+  "immediateFeedback": true,
+  "id": 190303,
+  "name": "How Your Online Data is Used",
+  "duration": 0,
+  "posterImage": null,
+  "dateCreated": "2020-11-04T23:25:34",
+  "dateModified": null,
+  "dateDeleted": null,
+  "deleted": false
+}

package/.storybook/stories/assets/thumbnails.vtt

@@ -0,0 +1,62 @@
+WEBVTT
+
+00:00:00.000 --> 00:00:01.000
+/sample_1280x720.mp4.vtx#xywh=6,77,160,90
+
+00:00:01.000 --> 00:00:02.000
+/sample_1280x720.mp4.vtx#xywh=171,77,160,90
+
+00:00:02.000 --> 00:00:04.000
+/sample_1280x720.mp4.vtx#xywh=336,77,160,90
+
+00:00:04.000 --> 00:00:05.000
+/sample_1280x720.mp4.vtx#xywh=501,77,160,90
+
+00:00:05.000 --> 00:00:06.000
+/sample_1280x720.mp4.vtx#xywh=666,77,160,90
+
+00:00:06.000 --> 00:00:08.000
+/sample_1280x720.mp4.vtx#xywh=6,172,160,90
+
+00:00:08.000 --> 00:00:09.000
+/sample_1280x720.mp4.vtx#xywh=171,172,160,90
+
+00:00:09.000 --> 00:00:10.000
+/sample_1280x720.mp4.vtx#xywh=336,172,160,90
+
+00:00:10.000 --> 00:00:12.000
+/sample_1280x720.mp4.vtx#xywh=501,172,160,90
+
+00:00:12.000 --> 00:00:13.000
+/sample_1280x720.mp4.vtx#xywh=666,172,160,90
+
+00:00:13.000 --> 00:00:14.000
+/sample_1280x720.mp4.vtx#xywh=6,267,160,90
+
+00:00:14.000 --> 00:00:16.000
+/sample_1280x720.mp4.vtx#xywh=171,267,160,90
+
+00:00:16.000 --> 00:00:17.000
+/sample_1280x720.mp4.vtx#xywh=336,267,160,90
+
+00:00:17.000 --> 00:00:18.000
+/sample_1280x720.mp4.vtx#xywh=501,267,160,90
+
+00:00:18.000 --> 00:00:20.000
+/sample_1280x720.mp4.vtx#xywh=666,267,160,90
+
+00:00:20.000 --> 00:00:21.000
+/sample_1280x720.mp4.vtx#xywh=6,362,160,90
+
+00:00:21.000 --> 00:00:22.000
+/sample_1280x720.mp4.vtx#xywh=171,362,160,90
+
+00:00:22.000 --> 00:00:24.000
+/sample_1280x720.mp4.vtx#xywh=336,362,160,90
+
+00:00:24.000 --> 00:00:25.000
+/sample_1280x720.mp4.vtx#xywh=501,362,160,90
+
+00:00:25.000 --> 00:00:29.000
+/sample_1280x720.mp4.vtx#xywh=666,362,160,90
+

package/.storybook/stories/utils/Wrap.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+interface WrapProps {
+  el: HTMLElement;
+}
+
+export function Wrap(props: WrapProps): React.ReactElement {
+  const ref = React.useRef<HTMLDivElement>();
+
+  React.useEffect(() => {
+    if (ref.current)
+      ref.current.appendChild(props.el);
+  }, []);
+
+  return (
+    <div ref={ref}></div>
+  );
+}