Skip to content

Commit 14988e3

Browse files
iamramanjotiamramanjot
authored
Added optional content id (#26)
1 parent 1e0c3e7 commit 14988e3

3 files changed

Lines changed: 86 additions & 68 deletions

File tree

‎demo/demo.js‎

Lines changed: 26 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ function getDeviceInfo() {
3333
document.addEventListener("DOMContentLoaded", () => {
3434
const videoElement = document.getElementById("videoPlayer");
3535
const inputElement = document.getElementById("videoUrlInput");
36+
const contentIdInputField = document.getElementById("contentIdInputField");
3637
const loadBtn = document.getElementById("loadButton");
3738

3839
const eventsinkUrl =
@@ -47,23 +48,7 @@ document.addEventListener("DOMContentLoaded", () => {
4748
return url;
4849
}
4950

50-
async function loadVideo(urlRaw) {
51-
const url = cleanUrl(urlRaw);
52-
if (!url) return;
53-
54-
await analytics.init({
55-
sessionId: `demo-page-${Date.now()}`,
56-
heartbeatInterval: 10000,
57-
});
58-
analytics.load(videoElement);
59-
if (Hls.isSupported() && url.endsWith(".m3u8")) {
60-
const hls = new Hls();
61-
hls.loadSource(url);
62-
hls.attachMedia(videoElement);
63-
} else {
64-
videoElement.src = url;
65-
}
66-
51+
function generateContentId(url) {
6752
const parsedUrl = new URL(url);
6853
let contentId;
6954
if (
@@ -86,6 +71,30 @@ document.addEventListener("DOMContentLoaded", () => {
8671
contentId = contentId.substring(0, fileExtIndex);
8772
}
8873
}
74+
return contentId;
75+
}
76+
77+
async function loadVideo(urlRaw) {
78+
const url = cleanUrl(urlRaw);
79+
if (!url) return;
80+
81+
await analytics.init({
82+
sessionId: `demo-page-${Date.now()}`,
83+
heartbeatInterval: 10000,
84+
});
85+
analytics.load(videoElement);
86+
if (Hls.isSupported() && url.endsWith(".m3u8")) {
87+
const hls = new Hls();
88+
hls.loadSource(url);
89+
hls.attachMedia(videoElement);
90+
} else {
91+
videoElement.src = url;
92+
}
93+
94+
// Use input field contentId if available, otherwise generate from URL
95+
const userContentId = contentIdInputField.value.trim();
96+
const contentId = userContentId || generateContentId(url);
97+
8998
const { deviceType, deviceModel } = getDeviceInfo();
9099
analytics.reportMetadata({
91100
live: false,

‎demo/index.html‎

Lines changed: 59 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -11,59 +11,68 @@
1111
<link rel="stylesheet" href="./style.css" />
1212
</head>
1313
<body>
14-
<header>
15-
<picture>
16-
<source srcset="./logo-darkmode.png" media="(prefers-color-scheme: dark)">
17-
<img src="./logo-lightmode.png" />
18-
</picture>
19-
<h1>Open Analytics</h1>
20-
</header>
14+
<header>
15+
<picture>
16+
<source srcset="./logo-darkmode.png" media="(prefers-color-scheme: dark)">
17+
<img src="./logo-lightmode.png" />
18+
</picture>
19+
<h1>Open Analytics</h1>
20+
</header>
2121

22-
<div id="wrapper">
23-
<div id="controls">
24-
<input
25-
id="videoUrlInput"
26-
type="text"
27-
value="https://archive.org/serve/big-bunny-sample-video/SampleVideo.ia.mp4"
28-
placeholder="Paste video URL here..."
29-
/>
30-
<button id="loadButton" title="Load video">Load</button>
31-
</div>
22+
<div id="wrapper">
23+
<div id="controls">
24+
<input
25+
id="contentIdInputField"
26+
class="inputField"
27+
type="text"
28+
style="width: 20px"
29+
value=""
30+
placeholder="Paste content name here .."
31+
/>
32+
<input
33+
id="videoUrlInput"
34+
type="text"
35+
class="inputField"
36+
value="https://archive.org/serve/big-bunny-sample-video/SampleVideo.ia.mp4"
37+
placeholder="Paste video URL here..."
38+
/>
39+
<button id="loadButton" title="Load video">Load</button>
40+
</div>
3241

33-
<video id="videoPlayer" controls></video>
42+
<video id="videoPlayer" controls></video>
3443

35-
<a
36-
id="grafana-link"
37-
href="https://eyevinn-openanalytics.grafana-grafana.auto.prod.osaas.io/d/aekgm1nvquozkd/counting-events?orgId=1&from=now-6h&to=now&timezone=browser"
38-
target="_blank"
39-
rel="noopener noreferrer"
40-
tabindex="0"
41-
role="button"
42-
>
43-
Open Grafana Dashboard
44-
</a>
45-
</div>
44+
<a
45+
id="grafana-link"
46+
href="https://eyevinn-openanalytics.grafana-grafana.auto.prod.osaas.io/d/aekgm1nvquozkd/counting-events?orgId=1&from=now-6h&to=now&timezone=browser"
47+
target="_blank"
48+
rel="noopener noreferrer"
49+
tabindex="0"
50+
role="button"
51+
>
52+
Open Grafana Dashboard
53+
</a>
54+
</div>
4655

47-
<footer>
48-
<a
49-
id="osc-link"
50-
href="https://docs.osaas.io/osaas.wiki/Solution%3A-Eyevinn-Open-Analytics.html"
51-
target="_blank"
52-
rel="noopener noreferrer"
53-
tabindex="2"
54-
>Getting Started</a>
55-
<a
56-
id="osc-logo"
57-
href="https://www.osaas.io/"
58-
target="_blank"
59-
rel="noopener noreferrer"
60-
tabindex="1"
61-
>
62-
<picture>
63-
<source srcset="./OSC-logo-darkmode.png" media="(prefers-color-scheme: dark)">
64-
<img src="./OSC-logo-lightmode.png" />
65-
</picture>
66-
</a>
67-
</footer>
56+
<footer>
57+
<a
58+
id="osc-link"
59+
href="https://docs.osaas.io/osaas.wiki/Solution%3A-Eyevinn-Open-Analytics.html"
60+
target="_blank"
61+
rel="noopener noreferrer"
62+
tabindex="2"
63+
>Getting Started</a>
64+
<a
65+
id="osc-logo"
66+
href="https://www.osaas.io/"
67+
target="_blank"
68+
rel="noopener noreferrer"
69+
tabindex="1"
70+
>
71+
<picture>
72+
<source srcset="./OSC-logo-darkmode.png" media="(prefers-color-scheme: dark)">
73+
<img src="./OSC-logo-lightmode.png" />
74+
</picture>
75+
</a>
76+
</footer>
6877
</body>
6978
</html>

‎demo/style.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ video {
2929
margin: 1rem 0;
3030
}
3131

32-
#videoUrlInput {
32+
.inputField {
3333
flex-grow: 1;
3434
padding: 0.5rem;
3535
margin: 0 1rem 0 0;

0 commit comments

Comments
 (0)