Skip to content

Commit a935957

Browse files
birmebirme
authored
fix: demo site (#24)
* fix: working demo site build * fix: deploy action * fix: fixup
1 parent 56c019b commit a935957

6 files changed

Lines changed: 65 additions & 189 deletions

File tree

‎.github/workflows/deploy-demo.yml‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,7 @@ jobs:
1616
- name: install dependencies
1717
run: |
1818
npm install
19-
npm run build
20-
working-directory: ./demo
19+
npm run build:demo
2120
- name: deploy to bucket
2221
uses: jakejarvis/s3-sync-action@v0.5.1
2322
with:
@@ -27,4 +26,4 @@ jobs:
2726
AWS_S3_BUCKET: 'www'
2827
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
2928
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
30-
SOURCE_DIR: 'demo/dist/'
29+
SOURCE_DIR: 'site/'

‎demo/demo.js‎

Lines changed: 54 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { PlayerAnalyticsConnector } from "@eyevinn/player-analytics-client-sdk-web";
1+
import { PlayerAnalyticsConnector } from "../index.ts";
22

33
function getDeviceInfo() {
44
const ua = navigator.userAgent || "";
@@ -30,51 +30,69 @@ function getDeviceInfo() {
3030
return { deviceType, deviceModel };
3131
}
3232

33-
document.addEventListener("DOMContentLoaded", async () => {
34-
const videoElement = document.querySelector("video");
33+
document.addEventListener("DOMContentLoaded", () => {
34+
const videoElement = document.getElementById("videoPlayer");
3535
const inputElement = document.getElementById("videoUrlInput");
36+
const loadBtn = document.getElementById("loadButton");
37+
3638
const eventsinkUrl =
3739
"https://eyevinn-epas1.eyevinn-player-analytics-eventsink.auto.prod.osaas.io/";
38-
const debug = false;
40+
const analytics = new PlayerAnalyticsConnector(eventsinkUrl, false);
3941

40-
const analytics = new PlayerAnalyticsConnector(eventsinkUrl, debug);
42+
function cleanUrl(raw) {
43+
let url = raw.trim().replace(/^"|"$/g, "");
44+
if (url.includes(" ")) {
45+
url = url.split(" ")[0];
46+
}
47+
return url;
48+
}
4149

42-
await analytics.init({
43-
sessionId: `demo-page-${Date.now()}`,
44-
heartbeatInterval: 10000,
45-
});
50+
async function loadVideo(urlRaw) {
51+
const url = cleanUrl(urlRaw);
52+
if (!url) return;
4653

47-
analytics.load(videoElement);
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+
}
4866

49-
// Default video
50-
let streamUrl =
51-
"https://archive.org/serve/big-bunny-sample-video/SampleVideo.ia.mp4";
52-
const contentId = streamUrl.split("/").pop() || "";
53-
const { deviceType, deviceModel } = getDeviceInfo();
67+
const contentId = url.split("/").pop() || "";
68+
const { deviceType, deviceModel } = getDeviceInfo();
69+
analytics.reportMetadata({
70+
live: false,
71+
contentId: contentId,
72+
contentUrl: videoElement.src,
73+
deviceType: deviceType,
74+
deviceModel: deviceModel,
75+
});
76+
videoElement.play();
77+
}
5478

55-
videoElement.src = streamUrl;
56-
analytics.reportMetadata({
57-
live: false,
58-
contentId: contentId,
59-
contentUrl: streamUrl,
60-
deviceType: deviceType,
61-
deviceModel: deviceModel,
79+
loadBtn.addEventListener("click", () => {
80+
const url = inputElement.value;
81+
loadVideo(url);
6282
});
6383

64-
inputElement.addEventListener("change", () => {
65-
const newUrl = inputElement.value.trim();
66-
if (newUrl) {
67-
videoElement.src = newUrl;
68-
const contentId = streamUrl.split("/").pop() || "";
69-
70-
analytics.reportMetadata({
71-
live: false,
72-
contentId: contentId,
73-
contentUrl: newUrl,
74-
deviceType: deviceType,
75-
deviceModel: deviceModel,
76-
});
77-
videoElement.play();
84+
inputElement.addEventListener("keydown", (e) => {
85+
if (e.key === "Enter") {
86+
loadBtn.click();
7887
}
7988
});
89+
90+
// Accessibility for Grafana
91+
document
92+
.getElementById("grafana-link")
93+
.addEventListener("keydown", function (e) {
94+
if (e.key === "Enter" || e.key === " ") {
95+
window.open(this.href, "_blank", "noopener");
96+
}
97+
});
8098
});

‎demo/index.html‎

Lines changed: 0 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ <h1>Open Analytics</h1>
2727
value="https://archive.org/serve/big-bunny-sample-video/SampleVideo.ia.mp4"
2828
placeholder="Paste video URL here..."
2929
/>
30-
<button id="previousButton" title="Previous video">Previous</button>
3130
<button id="loadButton" title="Load video">Load</button>
3231
</div>
3332

@@ -66,73 +65,5 @@ <h1>Open Analytics</h1>
6665
</picture>
6766
</a>
6867
</footer>
69-
70-
<script type="module">
71-
document.addEventListener("DOMContentLoaded", () => {
72-
const videoElement = document.getElementById("videoPlayer");
73-
const inputElement = document.getElementById("videoUrlInput");
74-
const loadBtn = document.getElementById("loadButton");
75-
const prevBtn = document.getElementById("previousButton");
76-
77-
const historyStack = [];
78-
79-
function cleanUrl(raw) {
80-
let url = raw.trim().replace(/^"|"$/g, "");
81-
if (url.includes(" ")) {
82-
url = url.split(" ")[0];
83-
}
84-
return url;
85-
}
86-
87-
function loadVideo(urlRaw, addToHistory = true) {
88-
const url = cleanUrl(urlRaw);
89-
if (!url) return;
90-
91-
if (addToHistory && videoElement.src) {
92-
historyStack.push(videoElement.src);
93-
}
94-
95-
if (Hls.isSupported() && url.endsWith(".m3u8")) {
96-
const hls = new Hls();
97-
hls.loadSource(url);
98-
hls.attachMedia(videoElement);
99-
} else {
100-
videoElement.src = url;
101-
}
102-
103-
videoElement.play();
104-
}
105-
106-
loadBtn.addEventListener("click", () => {
107-
const url = inputElement.value;
108-
loadVideo(url);
109-
});
110-
111-
inputElement.addEventListener("keydown", (e) => {
112-
if (e.key === "Enter") {
113-
loadBtn.click();
114-
}
115-
});
116-
117-
prevBtn.addEventListener("click", () => {
118-
const prevUrl = historyStack.pop();
119-
if (prevUrl) {
120-
loadVideo(prevUrl, false);
121-
} else {
122-
alert("No previous video in history.");
123-
}
124-
});
125-
126-
// Default video
127-
loadVideo("https://archive.org/serve/big-bunny-sample-video/SampleVideo.ia.mp4", false);
128-
129-
// Accessibility for Grafana
130-
document.getElementById("grafana-link").addEventListener("keydown", function (e) {
131-
if (e.key === "Enter" || e.key === " ") {
132-
window.open(this.href, "_blank", "noopener");
133-
}
134-
});
135-
});
136-
</script>
13768
</body>
13869
</html>

‎demo/package.json‎

Lines changed: 0 additions & 27 deletions
This file was deleted.

‎demo/webpack.config.js‎

Lines changed: 0 additions & 53 deletions
This file was deleted.

‎package.json‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,17 @@
66
"main": "dist/index.js",
77
"module": "dist/module.js",
88
"types": "dist/types.d.ts",
9+
"targets": {
10+
"demo": {
11+
"distDir": "./site",
12+
"source": "./demo/index.html",
13+
"publicUrl": "/"
14+
}
15+
},
916
"scripts": {
10-
"start": "parcel --dist-dir=site --public-url=/epasdev demo/index.html",
17+
"start": "parcel --target demo",
1118
"build": "rm -rf ./dist && parcel build index.ts && tsc",
19+
"build:demo": "parcel build --target demo demo/index.html --dist-dir=site",
1220
"prepare": "npm run build",
1321
"prettier": "prettier --write './src/**/*.{ts,js,json,html}'",
1422
"postversion": "git push --no-verify && git push --tags --no-verify"

0 commit comments

Comments
 (0)