waveringana/embedder
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 1

finally fix race conditions for file progress

Browse source 
uses sse to deliver updates
This commit is contained in:
WaveringAna 2025-01-19 22:24:23 -05:00
parent 19613e1bb3
commit 6be6d3b15f
9 changed files with 492 additions and 483 deletions
Download patch file Download diff file Expand all files Collapse all files

147
app/views/partials/_fileList.ejs
View file

@ -1,73 +1,86 @@
<%
function extension(string) {
return string.slice((string.lastIndexOf(".") - 2 >>> 0) + 2);
}
const getMediaType = (filename) => {
const ext = filename.slice(((filename.lastIndexOf(".") - 2) >>> 0) + 2).toLowerCase();
const videoExts = ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm'];
const imageExts = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.tiff', '.webp'];
if (videoExts.includes(ext)) return 'video';
if (imageExts.includes(ext)) return 'image';
return 'other';
};
const videoExtensions = ['.mp4', '.mov', '.avi', '.flv', '.mkv', '.wmv', '.webm'];
const imageExtensions = ['.jpg', '.jpeg', '.png', '.gif', '.bmp', '.svg', '.tiff', '.webp'];
function sanitizeId(filename) {
return filename.replace(/[^a-z0-9]/gi, '_');
}
%>
<script>
newMediaList = JSON.parse('<%- JSON.stringify(files) %>');
console.log("executed")
refreshMediaList(newMediaList);
</script>
<!-- _fileList.ejs -->
<% files.forEach(function(file) { %>
<li id="<%= file.path %>" class="show">
<div class="view">
<% if (videoExtensions.includes(extension(file.path))) { %>
<!-- Show spinner initially -->
<div id="spinner-<%= file.path %>" class="spinner">Optimizing Video for Sharing...</div>
<!-- Hidden video container to be displayed later -->
<div class="video">
<video id="video-<%= file.path %>" class="image" autoplay loop muted playsinline style="display: none;">
<source src="/uploads/720p-<%= file.path %>">
</video>
<div class="overlay">
<% if(user.username == "admin" && file.username != "admin") { %>
<small class="username"><%= file.username %></small>
<br>
<% } %>
<a href="/gifv/<%=file.path %>" onclick="copyA(event)">Copy as GIFv</a>
</div>
</div>
<% } else if (extension(file.path) == ".gif") { %>
<div class="video">
<img class="image" src="/uploads/720p-<%=file.path %>" width="100%" onclick="copyURI(event);" loading="lazy">
<div class="overlay">
<% if(user.username == "admin" && file.username != "admin") { %>
<small class="username"><%= file.username %></small>
<br>
<% } %>
<a href="/gifv/<%=file.path %>" onclick="copyA(event)">Copy as GIFv</a>
</div>
</div>
<% } else if (imageExtensions.includes(extension(file.path))) { %>
<div class="video">
<img class="image" src="/uploads/<%=file.path %>" width="100%" onclick="copyURI(event)" loading="lazy">
<% if(user.username == "admin" && file.username != "admin") { %>
<div class="overlay">
<small class="username"><%= file.username %></small>
</div>
<% } %>
</div>
<% } else {%>
<!-- non-media file -->
<div class="nonmedia" onclick="copyPath('/uploads/<%=file.path%>')">
<p><%=extension(file.path)%> file</p>
<% if(user.username == "admin" && file.username != "admin") { %>
<div class="overlay">
<small class="username"><%= file.username %></small>
</div>
<% } %>
</div>
<% } %>
<label><%= file.path %></label>
<button class="destroy" hx-get="<%=file.url%>/delete" hx-trigger="click" hx-target="#embedder-list" hx-swap="innerHTML"></button>
<button type="button" class="fullsize" onclick="openFullSize('/uploads/<%=file.path%>')"></button>
</div>
</li>
<li id="<%= file.path %>" class="show">
<div class="view">
<% const mediaType = getMediaType(file.path); %>
<% if (mediaType === 'video') { %>
<div class="video">
<% const sanitizedId = file.path.replace(/[^a-z0-9]/gi, '_'); %>
<div id="spinner-<%= sanitizedId %>" class="spinner" style="display: <%= file.isProcessed ? 'none' : 'block' %>;">
<div class="spinner-content">
Optimizing Video for Sharing...
</div>
</div>
<div id="media-container-<%= sanitizedId %>" class="video-container" style="display: <%= file.isProcessed ? 'block' : 'none' %>;">
<video class="image" autoplay loop muted playsinline>
<source src="/uploads/720p-<%= file.path %>">
</video>
</div>
<div class="overlay">
<% if(user.username === "admin" && file.username !== "admin") { %>
<small class="username"><%= file.username %></small>
<br>
<% } %>
<a href="/gifv/<%= file.path %>" onclick="copyA(event)">Copy as GIFv</a>
</div>
</div>
<% } else if (mediaType === 'image') { %>
<!-- Image container -->
<div class="video">
<img class="image"
src="/uploads/<%= file.path %>"
onclick="copyURI(event)"
loading="lazy">
<% if(user.username === "admin" && file.username !== "admin") { %>
<div class="overlay">
<small class="username"><%= file.username %></small>
</div>
<% } %>
</div>
<% } else { %>
<!-- Non-media file -->
<div class="nonmedia" onclick="copyPath('/uploads/<%= file.path %>')">
<p><%= file.path.split('.').pop().toUpperCase() %> file</p>
<% if(user.username === "admin" && file.username !== "admin") { %>
<div class="overlay">
<small class="username"><%= file.username %></small>
</div>
<% } %>
</div>
<% } %>
<label><%= file.path %></label>
<button class="destroy"
hx-get="<%= file.url %>/delete"
hx-trigger="click"
hx-target="#embedder-list"
hx-swap="innerHTML">
</button>
<button type="button"
class="fullsize"
onclick="openFullSize('/uploads/<%= file.path %>')">
</button>
</div>
</li>
<% }); %>