Skip to content

Commit 9a08483

Browse files
taj54taj54
authored
Merge pull request #15 from taj54/main
Refine target element mounting and bump version
2 parents c46cbae + 47f4db5 commit 9a08483

File tree

12 files changed

+1034
-59
lines changed

12 files changed

+1034
-59
lines changed

‎examples/App.vue‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<template>
2+
<ExampleInteractiveVideo />
3+
</template>
4+
5+
<script lang="ts">
6+
import { defineComponent } from 'vue';
7+
import ExampleInteractiveVideo from './ExampleInteractiveVideo.vue';
8+
9+
export default defineComponent({
10+
name: 'App',
11+
components: {
12+
ExampleInteractiveVideo,
13+
},
14+
});
15+
</script>

‎examples/ExampleInteractiveVideo.vue‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
<template>
2+
<div>
3+
<h1>Interactive Video Examples</h1>
4+
5+
<h2>Scenario 1: Component Renders Its Own Container</h2>
6+
<p>This example does not provide a `targetElementId` prop. The `InteractiveVideo` component will generate its own unique ID and render a `div` for the player.</p>
7+
<InteractiveVideo
8+
videoUrl="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
9+
:autoplay="false"
10+
:loop="false"
11+
:cues="exampleCues"
12+
@analytics-event="handleAnalyticsEvent"
13+
style="width: 600px; height: 337.5px; border: 1px solid blue;"
14+
/>
15+
16+
<h2>Scenario 2: External Container Provided</h2>
17+
<p>This example provides a `targetElementId` prop (`my-custom-player-container`). The `InteractiveVideo` component will attach to the `div` with this ID, which is rendered externally.</p>
18+
<div id="my-custom-player-container" style="width: 600px; height: 337.5px; border: 1px solid green;"></div>
19+
<InteractiveVideo
20+
videoUrl="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
21+
targetElementId="my-custom-player-container"
22+
:autoplay="false"
23+
:loop="false"
24+
@analytics-event="handleAnalyticsEvent"
25+
/>
26+
</div>
27+
</template>
28+
29+
<script lang="ts">
30+
import { defineComponent } from 'vue';
31+
import InteractiveVideo from '../src'; // Adjust path as needed
32+
import { CuePoint } from '@interactive-video-labs/core';
33+
34+
export default defineComponent({
35+
name: 'ExampleInteractiveVideo',
36+
components: {
37+
InteractiveVideo,
38+
},
39+
setup() {
40+
const handleAnalyticsEvent = (event: string, payload?: any) => {
41+
console.log(`Analytics Event: ${event}`, payload);
42+
};
43+
44+
const exampleCues: CuePoint[] = [
45+
{
46+
id: 'segmentChange',
47+
time: 10,
48+
label: 'Segment Change',
49+
payload: {
50+
interaction: {
51+
type: 'choice-video-segment-change',
52+
title: 'Choose your path',
53+
description: 'Select a video segment to jump to.',
54+
question: 'Where would you like to go?',
55+
options: [
56+
{
57+
level: 'Segment A',
58+
video: 'https://interactive-video-labs.github.io/assets/sample-interaction-1.mp4'
59+
},
60+
{
61+
level: 'Segment B',
62+
video: 'https://interactive-video-labs.github.io/assets/sample-interaction-2.mp4'
63+
}
64+
]
65+
}
66+
}
67+
},
68+
{
69+
id: 'intro',
70+
time: 2,
71+
label: 'Introduction',
72+
payload: { message: 'Welcome!' }
73+
},
74+
];
75+
76+
return {
77+
handleAnalyticsEvent,
78+
exampleCues,
79+
};
80+
},
81+
});
82+
</script>
83+
84+
<style scoped>
85+
div {
86+
margin-bottom: 20px;
87+
}
88+
</style>

‎examples/index.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>Interactive Video Vue Wrapper Example</title>
7+
</head>
8+
<body>
9+
<div id="app"></div>
10+
<script type="module" src="/main.ts"></script>
11+
</body>
12+
</html>

‎examples/main.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue';
2+
import App from './App.vue';
3+
4+
createApp(App).mount('#app');

‎examples/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "examples",
3+
"version": "1.0.0",
4+
"description": "",
5+
"main": "index.js",
6+
"scripts": {
7+
"dev": "vite",
8+
"test": "echo \"Error: no test specified\" && exit 1",
9+
},
10+
"keywords": [],
11+
"author": "",
12+
"license": "ISC",
13+
"type": "module",
14+
"packageManager": "[email protected]",
15+
"dependencies": {
16+
"vue": "^3.5.18"
17+
},
18+
"devDependencies": {
19+
"vite": "^5.0.0",
20+
"@vitejs/plugin-vue": "^5.0.0",
21+
"typescript": "^5.0.0"
22+
}
23+
}

0 commit comments

Comments
 (0)