Skip to content

Commit 1d65aa8

Browse files
bustardcellybustardcelly
committed
including intro for frontend builds.
1 parent f364953 commit 1d65aa8

File tree

5 files changed

+140
-2
lines changed

5 files changed

+140
-2
lines changed

‎configuration.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
"webappParentDirectory": "truetime",
44
"webappName": "truetime-multiview",
55
"webappSource": "./",
6-
"buildCommand": "npm install && npm run build && cp -R ./lib dist/ && mkdir -p dist/css && cp css/media-queries.css dist/css/",
6+
"buildCommand": "npm install && npm run build && cp -R ./lib dist/ && cp README.md dist/ && mkdir -p dist/css && cp css/media-queries.css dist/css/",
77
"webappOutput": "dist"
88
}

‎css/main.css

+36-1
Original file line numberDiff line numberDiff line change
@@ -216,7 +216,7 @@ dialog > .dialog_container > h3 {
216216
}
217217

218218
.hidden {
219-
display: none;
219+
display: none !important;
220220
}
221221

222222
.show {
@@ -263,3 +263,38 @@ dialog > .dialog_container > h3 {
263263
#logo-holder img {
264264
width: 240px;
265265
}
266+
267+
.intro-container {
268+
position: absolute;
269+
display: flex;
270+
justify-content: center;
271+
align-items: center;
272+
background-color: rgb(0, 0, 0, 0.67);
273+
top: 0;
274+
left: 0;
275+
right: 0;
276+
bottom: 0;
277+
}
278+
279+
.intro-container_info {
280+
width: 40%;
281+
height: fit-content;
282+
top: 25%;
283+
background-color: #eee;
284+
color: black;
285+
padding: 40px;
286+
z-index: 3000;
287+
}
288+
289+
.intro-container_buttons {
290+
display: flex;
291+
flex-direction: row;
292+
justify-content: center;
293+
}
294+
295+
#intro-submit {
296+
cursor: pointer;
297+
border: 1px solid var(--color-black);
298+
border-radius: 50px;
299+
padding: 9px 15px !important;
300+
}

‎index.html

+88
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,75 @@
5050
'background: #fff; color: #222'
5151
)
5252
console.log('')
53+
console.log(
54+
'%c [app] ' + '%c : app context. Default: `live`',
55+
'background: #222; color: #ebefd0',
56+
'background: #fff; color: #222'
57+
)
58+
console.log('')
59+
console.log(
60+
'%c [url] ' +
61+
'%c : The optional service URL (including protocol and possible port) that `GET` requests will be made on to retrieve the current list of live streams. Default: `undefined`',
62+
'background: #222; color: #ebefd0',
63+
'background: #fff; color: #222'
64+
)
65+
console.log('')
66+
console.log(
67+
'%c [vod] ' +
68+
'%c : The option to allow for live seek controls of the main stream. Default: `true`',
69+
'background: #222; color: #ebefd0',
70+
'background: #fff; color: #222'
71+
)
72+
console.log('')
73+
console.log(
74+
'%c [abr] ' +
75+
'%c : Flag to notify the application that the server uses Adaptive Bitrate control to provide different variants of the live streams. Default: `false`',
76+
'background: #222; color: #ebefd0',
77+
'background: #fff; color: #222'
78+
)
79+
console.log('')
80+
console.log(
81+
'%c [abrlow] ' +
82+
'%c : When `abr=true`, the specified ladder suffix/index at which the lowest ABR variant resides. This is used in accessing the live stream by name. All the non "main feed" subscribe will then load and playback the lowest ABR variant. Default: `3`',
83+
'background: #222; color: #ebefd0',
84+
'background: #fff; color: #222'
85+
)
86+
console.log('')
87+
console.log(
88+
'%c [abrhigh] ' +
89+
'%c : When `abr=true`, the specified ladder suffic/index at which the highest ABR variant resides. This is used in accessing the live stream by name. Only the "main feed" playback will load the highest ABR variant. Default: `1`',
90+
'background: #222; color: #ebefd0',
91+
'background: #fff; color: #222'
92+
)
93+
console.log('')
94+
console.log(
95+
'%c [abrhigh] ' +
96+
'%c : When `abr=true`, the specified ladder suffic/index at which the highest ABR variant resides. This is used in accessing the live stream by name. Only the "main feed" playback will load the highest ABR variant. Default: `1`',
97+
'background: #222; color: #ebefd0',
98+
'background: #fff; color: #222'
99+
)
100+
console.log('')
101+
console.log(
102+
'%c [vodbase] ' +
103+
'%c : The base URL in which the VOD files for the live streams are located. By default it will look on the `host` for the VOD files. Using this query param you can specify a specific remote base location where the VOD files can be found - such as a CDN or NFS. Default: `undefined`',
104+
'background: #222; color: #ebefd0',
105+
'background: #fff; color: #222'
106+
)
107+
console.log('')
108+
console.log(
109+
'%c [embed] ' +
110+
'%c : Flag to enable the ability for users to access the embed options to host their own TrueTime MultiView web application. Default: `false`',
111+
'background: #222; color: #ebefd0',
112+
'background: #fff; color: #222'
113+
)
114+
console.log('')
115+
console.log(
116+
'%c [debug] ' +
117+
'%c : Flag to enable debug logging in the browser Dev Console. Default: `false`',
118+
'background: #222; color: #ebefd0',
119+
'background: #fff; color: #222'
120+
)
121+
console.log('')
53122
console.log('------- /USAGE --------')
54123
})()
55124
</script>
@@ -80,6 +149,25 @@
80149
<button id="flip-button">Flip</button>
81150
</p>
82151
</div>
152+
<!-- Intro Modal -->
153+
<div id="intro" class="intro-container hidden">
154+
<div class="intro-container_info">
155+
<p>
156+
The Red5 Pro TrueTime MultiView&#8482; is a web-based application that
157+
allows for viewing multiple live streams while providing the ability
158+
to switch between a "main feed" which has <em>optional</em> live seek
159+
integration. Additionally, it provides embedding options to easily add
160+
a TrueTime MultiView to your own website!
161+
</p>
162+
<p>
163+
More information about query parameters and configuration can be seen
164+
by opening the Dev Console of your browser.
165+
</p>
166+
<p class="intro-container_buttons">
167+
<button id="intro-submit">Got it!</button>
168+
</p>
169+
</div>
170+
</div>
83171
<!-- Embed Mode Dialog -->
84172
<dialog id="embed-dialog">
85173
<div class="embed-dialog_container">

‎script/main.js

+11
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ const {
4242
abrHigh,
4343
streamManager,
4444
debugMode,
45+
intro,
4546
streams: streamsQueryList,
4647
} = query()
4748

@@ -383,5 +384,15 @@ const shutdown = () => {
383384
window.addEventListener('pagehide', shutdown)
384385
window.addEventListener('beforeunload', shutdown)
385386

387+
// Intro specifics.
388+
const introContainer = document.querySelector('#intro')
389+
const introSubmit = document.querySelector('#intro-submit')
390+
if (intro) {
391+
introContainer.classList.remove('hidden')
392+
introSubmit.addEventListener('click', () => {
393+
introContainer.classList.add('hidden')
394+
})
395+
}
396+
386397
// Start the application.
387398
start()

‎script/url-util.js

+4
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ const paramExclude = [
4545
'abrhigh',
4646
'vod',
4747
'vodbase',
48+
'intro',
4849
]
4950

5051
/**
@@ -85,6 +86,7 @@ export const query = () => {
8586
const demoOpt = searchParams.get('demo')
8687
const debugOpt = searchParams.get('debug')
8788
const embedOpt = searchParams.get('embed')
89+
const introOpt = searchParams.get('intro')
8890
let scriptURL = searchParams.get('url')
8991
? decodeURIComponent(searchParams.get('url'))
9092
: undefined
@@ -105,6 +107,7 @@ export const query = () => {
105107
let demoMode = demoOpt ? demoOpt.toLowerCase() === 'true' : false
106108
let debugMode = debugOpt ? debugOpt.toLowerCase() === 'true' : false
107109
let embedMode = embedOpt ? embedOpt.toLowerCase() === 'true' : false
110+
let intro = introOpt ? introOpt.toLowerCase() === 'true' : false
108111
searchParams.forEach((value, key) => {
109112
if (paramExclude.indexOf(key) === -1) {
110113
streams.push({
@@ -127,5 +130,6 @@ export const query = () => {
127130
demoMode,
128131
debugMode,
129132
embedMode,
133+
intro,
130134
}
131135
}

0 commit comments

Comments
 (0)