-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
110 lines (103 loc) · 4.74 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<head>
<title>Cloudflare TV</title>
<style>
body{margin:40px auto;max-width:800px;line-height:1.6;font-size:20px;color:#444;padding:0 10px}
h1,h2,h3{line-height:1.3}
table{border-collapse: collapse;width: 100%;}
table,th,td{border: 1px solid black;}
th,td{padding: 8px;text-align: left;}
</style>
<script src="https://unpkg.com/[email protected]/lunr.min.js"></script>
</head>
<body>
<p>Cloudflare TV</p>
<!-- Downloaded lunr.js from https://unpkg.com/[email protected]/lunr.min.js -->
<form class="form-inline justify-content-center" id="site_search">
<div class="form-row align-items-center" style="padding-bottom:20px;">
<div class="col-auto">
<label class="sr-only" for="q">Search</label>
<div class="input-group">
<!-- <input autocomplete="off" autofocus="autofocus" class="form-control" id="q" name="q" placeholder="Search terms" type="text" oninput onpaste="doSearch()"/> -->
<input autocomplete="off" autofocus="autofocus" class="form-control" id="q" name="q" placeholder="Search terms" type="text"/>
<div class="input-group-append">
<button type="submit" class="btn" style="background-color:#1d8286;color:white;font-weight:bold;">Search</button>
</div>
</div>
</div>
</div>
</form>
<div class="row clearfix">
<div class="logo-container" id="search_results" style="overflow-x:auto;"></div>
</div>
<footer>
<p><a href="https://github.com/rrampage">About</p>
<p><a href="https://github.com/rrampage/cftv-search">Repo</a></p>
</footer>
<script>
const CF_EVENT = "https://cloudflare.tv/event/EVENTID";
const CF_THUMB = "https://videodelivery.net/VIDEOID/thumbnails/thumbnail.jpg?time=35s&width=160";
window.data = [false];
lunr.tokenizer.seperator = /[\s\-_\.]+/
var xobj = new XMLHttpRequest();
xobj.overrideMimeType("application/json");
xobj.open('GET', 'cftv.json');
xobj.onload = () => {
window.data = JSON.parse(xobj.responseText);
window.idx = lunr(function () {
this.field('id');
this.field('videoId');
this.field('title', { boost: 10 });
this.field('tags', { boost: 2 });
this.field('description');
window.data.forEach((doc, i) => {
doc['eventId'] = doc['id'];
doc['id'] = i;
this.add(doc);
}, this);
});
}
xobj.send(null);
var doSearch = function(query) {
if (!query || query.length < 3) {
return;
}
console.log("searching for " + query);
var results = window.idx.search(query);
displaySearchResults(query, results);
return false;
};
var submitSearch = (e) => {
e.preventDefault();
doSearch(document.getElementById("q").value);
return false;
}
function displaySearchResults(query, results) {
var search_results = document.getElementById("search_results");
search_results.innerHTML = "";
if (results.length) {
// Add table of search results
var tableStr = "<table><tr><th>Title</th><th>Thumbnail</th><th>Description</th><th>Duplicates</th></tr>";
results.forEach( (r) => {
let item = window.data[r.ref];
if (item.eventId) {
tableStr += buildResultNode(item);
}
});
tableStr += "</table>";
search_results.insertAdjacentHTML( 'beforeend', tableStr );
}
}
function buildResultNode(item) {
return `<tr>
<td><b><a href="${CF_EVENT.replace("EVENTID", item.eventId)}">${item.title}</a></b><br><br><u>Aired on:</u><br> ${item.start}</td>
<td><img src="${CF_THUMB.replace("VIDEOID", item.videoId)}" alt="${item.title}"/></td>
<td>${item.description.replace(/__(.+?)__/g, "<b>$1</b>").replace(/\*(.+?)\*/g, "<i>$1</i>")}</td>
<td>${item.later ? "<ol>" + item.later.map((i) => `<li><a href="${CF_EVENT.replace("EVENTID", i)}">Link</li>`).join(" ") + "</ol>": ""}</td>
</tr>`;
}
var form = document.getElementById("site_search");
form.addEventListener("submit", submitSearch, true);
var qbox = document.getElementById("q");
qbox.addEventListener("input", submitSearch, true);
</script>
</body>