calvin.erfmann/WhatsApp-Chat-Exporter
1
0
Fork 0
mirror of https://github.com/KnugiHK/WhatsApp-Chat-Exporter.git synced 2026-04-22 22:14:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Lazy loading of video for new theme

Browse Source
This commit is contained in:
KnugiHK
2025-02-09 14:09:22 +08:00
parent bfd172031c
commit f43e1f760d
1 changed files with 55 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

82
Whatsapp_Chat_Exporter/whatsapp_new.html
View File

@@ -51,8 +51,8 @@
padding: 20px 0 20px 0; padding: 20px 0 20px 0;
} }
footer { footer {
margin-top: 10px;
border-top: 2px solid #e3e6e7; border-top: 2px solid #e3e6e7;
font-size: 2em;
padding: 20px 0 20px 0; padding: 20px 0 20px 0;
} }
article { article {
@@ -243,8 +243,8 @@
<source src="{{ msg.data }}" /> <source src="{{ msg.data }}" />
</audio> </audio>
{% elif "video/" in msg.mime %} {% elif "video/" in msg.mime %}
<video controls="controls" autobuffer="autobuffer"> <video class="lazy" autobuffer {% if msg.message_type|int == 13 or msg.message_type|int == 11 %}autoplay muted loop playsinline{%else%}controls{% endif %}>
<source src="{{ msg.data }}" /> <source type="{{ msg.mime }}" data-src="{{ msg.data }}" />
</video> </video>
{% elif "/" in msg.mime %} {% elif "/" in msg.mime %}
The file cannot be displayed here, however it should be located at <a href="./{{ msg.data }}">here</a> The file cannot be displayed here, however it should be located at <a href="./{{ msg.data }}">here</a>
@@ -304,8 +304,8 @@
<source src="{{ msg.data }}" /> <source src="{{ msg.data }}" />
</audio> </audio>
{% elif "video/" in msg.mime %} {% elif "video/" in msg.mime %}
<video controls="controls" autobuffer="autobuffer"> <video class="lazy" autobuffer {% if msg.message_type|int == 13 or msg.message_type|int == 11 %}autoplay muted loop playsinline{%else%}controls{% endif %}>
<source src="{{ msg.data }}" /> <source type="{{ msg.mime }}" data-src="{{ msg.data }}" />
</video> </video>
{% elif "/" in msg.mime %} {% elif "/" in msg.mime %}
The file cannot be displayed here, however it should be located at <a href="./{{ msg.data }}">here</a> The file cannot be displayed here, however it should be located at <a href="./{{ msg.data }}">here</a>
@@ -336,33 +336,61 @@
</article> </article>
</body> </body>
<script> <script>
// Search functionality // Search functionality
const searchButton = document.getElementById('searchButton'); const searchButton = document.getElementById('searchButton');
const mainSearchInput = document.getElementById('mainSearchInput'); const mainSearchInput = document.getElementById('mainSearchInput');
const closeMainSearch = document.getElementById('closeMainSearch'); const closeMainSearch = document.getElementById('closeMainSearch');
const mainHeaderSearchInput = document.getElementById('mainHeaderSearchInput'); const mainHeaderSearchInput = document.getElementById('mainHeaderSearchInput');
// Function to show search input // Function to show search input
const showSearch = () => { const showSearch = () => {
mainSearchInput.classList.add('active'); mainSearchInput.classList.add('active');
mainHeaderSearchInput.focus(); mainHeaderSearchInput.focus();
}; };
// Function to hide search input // Function to hide search input
const hideSearch = () => { const hideSearch = () => {
mainSearchInput.classList.remove('active'); mainSearchInput.classList.remove('active');
mainHeaderSearchInput.value = ''; mainHeaderSearchInput.value = '';
}; };
// Event listeners // Event listeners
searchButton.addEventListener('click', showSearch); searchButton.addEventListener('click', showSearch);
closeMainSearch.addEventListener('click', hideSearch); closeMainSearch.addEventListener('click', hideSearch);
// Handle ESC key // Handle ESC key
document.addEventListener('keydown', (event) => { document.addEventListener('keydown', (event) => {
if (event.key === 'Escape' && mainSearchInput.classList.contains('active')) { if (event.key === 'Escape' && mainSearchInput.classList.contains('active')) {
hideSearch(); hideSearch();
}
});
</script>
<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
if ("IntersectionObserver" in window) {
var lazyVideoObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(video) {
if (video.isIntersecting) {
for (var source in video.target.children) {
var videoSource = video.target.children[source];
if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
videoSource.src = videoSource.dataset.src;
}
}
video.target.load();
video.target.classList.remove("lazy");
lazyVideoObserver.unobserve(video.target);
} }
}); });
});
lazyVideos.forEach(function(lazyVideo) {
lazyVideoObserver.observe(lazyVideo);
});
}
});
</script> </script>
</html> </html>