-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathpage_index.html
156 lines (135 loc) · 4.93 KB
/
page_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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tweet Archive</title>
<style>
body {
background-color: #000000;
color: #FFFFFF;
font-family: Helvetica;
font-weight: 250;
font-size: 15px;
}
.card {
border: 5px solid #1b1b1b;
border-radius: 5px;
padding: 10px;
margin-bottom: 20px;
max-width: 650px;
background-color: #0c0c0c;
}
.card img {
width: 300px;
height: auto;
margin: 10px;
}
.card video {
max-width: 100%;
height: auto;
}
.card p:not(:nth-child(2)) {
color: grey;
}
.card a {
color: #74a3a5;
text-decoration: none;
}
.card a:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div id="entries"></div>
<script>
function formatDate(dateString) {
const date = new Date(dateString);
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const year = date.getFullYear();
return `${month}/${day}/${year}`;
}
async function fetchJSONFiles() {
try {
const response = await fetch('listOfFiles.txt');
const fileList = await response.text();
const jsonFiles = fileList.trim().split('\n');
const jsonDataPromises = jsonFiles.map(async file => {
const jsonData = await fetch(`${file.trim()}.json`);
return jsonData.json();
});
const jsonEntries = await Promise.all(jsonDataPromises);
jsonEntries.sort((a, b) => new Date(b.otherPropertiesMap.created_at) - new Date(a.otherPropertiesMap.created_at));
for (const json of jsonEntries) {
const created_at = formatDate(json.otherPropertiesMap.created_at);
const full_url = json.otherPropertiesMap.full_url;
const tweet_text = json.otherPropertiesMap.tweet_text;
const owner_screen_name = json.otherPropertiesMap.owner_screen_name;
const owner_display_name = json.otherPropertiesMap.owner_display_name;
let entryHTML = `
<div class="card">
<p><a href="https://twitter.com/${owner_screen_name}">${owner_display_name} (@${owner_screen_name})</a> - ${created_at}</p>
<p>${tweet_text}</p>
`;
const mp4Exists = await fileExists(`${json.otherPropertiesMap.CustomFileName}_2.mp4`);
const jpg1Exists = await fileExists(`${json.otherPropertiesMap.CustomFileName}_1.jpg`);
if (mp4Exists) {
entryHTML += `<video width="320" height="240" controls autoplay>
<source src="${json.otherPropertiesMap.CustomFileName}_2.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>`;
}
else if (jpg1Exists) {
entryHTML += `<img src="${json.otherPropertiesMap.CustomFileName}_1.jpg" alt="Image" class="lazy-load" data-src="${json.otherPropertiesMap.CustomFileName}_1.jpg">`;
let additionalJpgIndex = 2;
let additionalJpgExists = true;
while (additionalJpgExists) {
additionalJpgExists = await fileExists(`${json.otherPropertiesMap.CustomFileName}_${additionalJpgIndex}.jpg`);
if (additionalJpgExists) {
entryHTML += `<img src="${json.otherPropertiesMap.CustomFileName}_${additionalJpgIndex}.jpg" alt="Image" class="lazy-load" data-src="${json.otherPropertiesMap.CustomFileName}_${additionalJpgIndex}.jpg">`;
additionalJpgIndex++;
}
}
}
entryHTML += `<p><a href="${full_url}">${full_url}</a></p>`;
entryHTML += `</div>`;
document.getElementById('entries').innerHTML += entryHTML;
}
lazyLoad();
window.addEventListener('scroll', lazyLoad);
} catch (error) {
console.error('Error fetching JSON files:', error);
}
}
async function fileExists(url) {
try {
const response = await fetch(url, { method: 'HEAD' });
return response.ok;
} catch (error) {
return false;
}
}
function lazyLoad() {
const images = document.querySelectorAll('.lazy-load');
images.forEach(image => {
if (elementInViewport(image)) {
image.setAttribute('src', image.getAttribute('data-src'));
image.classList.remove('lazy-load');
}
});
}
function elementInViewport(el) {
const rect = el.getBoundingClientRect();
return (
rect.top >= 0 &&
rect.left >= 0 &&
rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
rect.right <= (window.innerWidth || document.documentElement.clientWidth)
);
}
fetchJSONFiles();
</script>
</body>
</html>