view.ejs
1<!doctype html>
2<html lang="en">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title><%= image.Caption %></title>
7
8 <!-- Bootstrap CSS -->
9 <link
10 href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
11 rel="stylesheet"
12 integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
13 crossorigin="anonymous"
14 />
15
16 <!-- Open Graph Meta Tags -->
17 <meta property="og:title" content="<%= image.Caption %>" />
18 <meta property="og:url" content="<%= link %>" />
19 <meta
20 property="og:site_name"
21 content="Media Uploader by x.com/stellerDev"
22 />
23 <meta property="og:locale" content="en_US" />
24 <% if (image.ContentType.includes("image")) { %>
25 <meta property="og:image" content="<%= link %>" />
26 <meta property="og:image:width" content="1280" />
27 <meta property="og:image:height" content="720" />
28 <meta property="og:image:type" content="<%= image.ContentType %>" />
29 <meta property="twitter:image" content="<%= link %>" />
30 <meta property="twitter:image:width" content="1280" />
31 <meta property="twitter:image:height" content="720" />
32 <meta property="twitter:image:alt" content="<%= image.Caption %>" />
33 <meta property="twitter:card" content="summary_large_image" />
34 <meta property="twitter:site" content="@x.com/stellerDev" />
35 <meta property="twitter:creator" content="@x.com/stellerDev" />
36 <% } else { %>
37 <meta property="og:video" content="<%= link %>" />
38 <meta property="og:video:width" content="1280" />
39 <meta property="og:video:height" content="720" />
40 <meta property="og:video:type" content="<%= image.ContentType %>" />
41 <meta property="twitter:player" content="<%= link %>" />
42 <meta property="twitter:player:width" content="1280" />
43 <meta property="twitter:player:height" content="720" />
44 <meta property="twitter:player:stream" content="<%= link %>" />
45 <meta property="twitter:card" content="player" />
46 <meta property="twitter:site" content="@x.com/stellerDev" />
47 <meta property="twitter:creator" content="@x.com/stellerDev" />
48
49 <% } %>
50
51 <!-- Bootstrap JS and Popper.js (loaded after HTML parsing) -->
52 <script
53 src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
54 integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
55 crossorigin="anonymous"
56 defer
57 ></script>
58 <script
59 src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js"
60 integrity="sha384-0pUGZvbkm6XF6gxjEnlmuGrJXVbNuzT9qBBavbLwCsOGabYfZo0T0to5eqruptLy"
61 crossorigin="anonymous"
62 defer
63 ></script>
64 </head>
65 <body>
66 <%- include('_partials/header') %>
67 <div class="container mt-5">
68 <div class="card">
69 <div class="card-header">
70 <h3><%= image.Caption %></h3>
71 </div>
72 <div class="card-body text-center">
73 <% if (image.ContentType.includes("image")) { %>
74 <img
75 src="<%= link %>"
76 alt="<%= image.Caption %>"
77 class="img-fluid rounded mx-auto d-block"
78 aria-label="Uploaded Image"
79 />
80 <% } else { %>
81 <video
82 src="<%= link %>"
83 class="img-fluid rounded mx-auto d-block"
84 controls
85 aria-label="Uploaded Video"
86 ></video>
87 <% } %>
88
89 <p class="mt-3">Views: <%= image.Views.toLocaleString() %></p>
90 <p>
91 Uploaded by:
92 <a href="/admins/<%= uploadedBy.Username %>"
93 ><%= uploadedBy.Username %></a
94 >
95 </p>
96 <p>
97 Uploaded on: <%= new Date(image.UploadedAt).toLocaleDateString() %>
98 <%= new Date(image.UploadedAt).toLocaleTimeString() %>
99 </p>
100 </div>
101 <div class="card-footer text-end">
102 <a
103 href="<%= link %>"
104 class="btn btn-primary"
105 download="<%= image.FileName %>"
106 aria-label="Download Media"
107 >
108 Download
109 </a>
110 <% if (canDelete) { %>
111 <a
112 href="/delete/<%= image.Id %>"
113 class="btn btn-danger"
114 aria-label="Delete Media"
115 >
116 Delete
117 </a>
118 <% } %>
119 </div>
120 </div>
121 </div>
122 </body>
123</html>
124