Spaces:
Running
Running
Update app.py
Browse files
app.py
CHANGED
@@ -81,53 +81,39 @@ HTML_CONTENT = """
|
|
81 |
font-size: 1rem;
|
82 |
font-weight: 600;
|
83 |
color: #ffffff;
|
84 |
-
background-color:
|
85 |
border: none;
|
86 |
border-radius: 5px;
|
87 |
cursor: pointer;
|
88 |
overflow: hidden;
|
89 |
z-index: 1;
|
90 |
-
transition: color 0.3s ease;
|
91 |
}
|
92 |
|
93 |
.btn:hover {
|
94 |
-
color: #
|
|
|
95 |
}
|
96 |
|
97 |
-
.btn::before {
|
98 |
content: '';
|
99 |
position: absolute;
|
100 |
-
inset:
|
101 |
-
|
102 |
-
|
103 |
-
|
104 |
-
-
|
105 |
-
|
106 |
-
linear-gradient(#fff 0 0);
|
107 |
-
-webkit-mask-composite: destination-out;
|
108 |
-
mask-composite: exclude;
|
109 |
-
animation: borderAnimation 5s infinite;
|
110 |
-
}
|
111 |
-
|
112 |
-
@keyframes borderAnimation {
|
113 |
-
0% {
|
114 |
-
background-position: 0% 50%;
|
115 |
-
}
|
116 |
-
50% {
|
117 |
-
background-position: 100% 50%;
|
118 |
-
}
|
119 |
-
100% {
|
120 |
-
background-position: 0% 50%;
|
121 |
-
}
|
122 |
}
|
123 |
|
124 |
-
|
125 |
-
transform: scale(0.
|
|
|
|
|
126 |
}
|
127 |
|
128 |
-
.btn:
|
129 |
-
|
130 |
-
cursor: not-allowed;
|
131 |
}
|
132 |
|
133 |
/* Drop Zone */
|
@@ -175,13 +161,8 @@ HTML_CONTENT = """
|
|
175 |
.progress {
|
176 |
width: 0%;
|
177 |
height: 100%;
|
178 |
-
background:
|
179 |
-
|
180 |
-
}
|
181 |
-
|
182 |
-
@keyframes progressAnimation {
|
183 |
-
0% { background-position: 0% 50%; }
|
184 |
-
100% { background-position: 100% 50%; }
|
185 |
}
|
186 |
|
187 |
/* Loading Spinner */
|
@@ -219,48 +200,7 @@ HTML_CONTENT = """
|
|
219 |
text-decoration: underline;
|
220 |
}
|
221 |
|
222 |
-
|
223 |
-
position: relative;
|
224 |
-
padding: 10px 20px;
|
225 |
-
margin: 0.5rem;
|
226 |
-
font-size: 0.9rem;
|
227 |
-
font-weight: 600;
|
228 |
-
color: #ffffff;
|
229 |
-
background-color: transparent;
|
230 |
-
border: none;
|
231 |
-
border-radius: 5px;
|
232 |
-
cursor: pointer;
|
233 |
-
overflow: hidden;
|
234 |
-
z-index: 1;
|
235 |
-
transition: color 0.3s ease;
|
236 |
-
}
|
237 |
-
|
238 |
-
.copy-btn::before,
|
239 |
-
.embed-btn::before {
|
240 |
-
content: '';
|
241 |
-
position: absolute;
|
242 |
-
inset: 0;
|
243 |
-
border-radius: 5px;
|
244 |
-
padding: 3px;
|
245 |
-
background: linear-gradient(45deg, #0000ff, #ffffff, #000000);
|
246 |
-
-webkit-mask:
|
247 |
-
linear-gradient(#fff 0 0) content-box,
|
248 |
-
linear-gradient(#fff 0 0);
|
249 |
-
-webkit-mask-composite: destination-out;
|
250 |
-
mask-composite: exclude;
|
251 |
-
animation: borderAnimation 5s infinite;
|
252 |
-
}
|
253 |
-
|
254 |
-
.copy-btn:hover,
|
255 |
-
.embed-btn:hover {
|
256 |
-
color: #e0e0e0;
|
257 |
-
}
|
258 |
-
|
259 |
-
.copy-btn:active,
|
260 |
-
.embed-btn:active {
|
261 |
-
transform: scale(0.98);
|
262 |
-
}
|
263 |
-
|
264 |
.file-types {
|
265 |
margin-top: 2rem;
|
266 |
font-size: 0.8rem;
|
@@ -331,44 +271,6 @@ HTML_CONTENT = """
|
|
331 |
margin-right: 10px;
|
332 |
}
|
333 |
|
334 |
-
.copy-embed-btn {
|
335 |
-
position: relative;
|
336 |
-
padding: 10px 20px;
|
337 |
-
font-size: 0.9rem;
|
338 |
-
font-weight: 600;
|
339 |
-
color: #ffffff;
|
340 |
-
background-color: transparent;
|
341 |
-
border: none;
|
342 |
-
border-radius: 5px;
|
343 |
-
cursor: pointer;
|
344 |
-
overflow: hidden;
|
345 |
-
z-index: 1;
|
346 |
-
transition: color 0.3s ease;
|
347 |
-
}
|
348 |
-
|
349 |
-
.copy-embed-btn::before {
|
350 |
-
content: '';
|
351 |
-
position: absolute;
|
352 |
-
inset: 0;
|
353 |
-
border-radius: 5px;
|
354 |
-
padding: 3px;
|
355 |
-
background: linear-gradient(45deg, #0000ff, #ffffff, #000000);
|
356 |
-
-webkit-mask:
|
357 |
-
linear-gradient(#fff 0 0) content-box,
|
358 |
-
linear-gradient(#fff 0 0);
|
359 |
-
-webkit-mask-composite: destination-out;
|
360 |
-
mask-composite: exclude;
|
361 |
-
animation: borderAnimation 5s infinite;
|
362 |
-
}
|
363 |
-
|
364 |
-
.copy-embed-btn:hover {
|
365 |
-
color: #e0e0e0;
|
366 |
-
}
|
367 |
-
|
368 |
-
.copy-embed-btn:active {
|
369 |
-
transform: scale(0.98);
|
370 |
-
}
|
371 |
-
|
372 |
/* Media Queries */
|
373 |
@media (max-width: 480px) {
|
374 |
.container {
|
@@ -388,6 +290,7 @@ HTML_CONTENT = """
|
|
388 |
margin-right: 0;
|
389 |
}
|
390 |
}
|
|
|
391 |
</style>
|
392 |
</head>
|
393 |
<body>
|
@@ -417,7 +320,7 @@ HTML_CONTENT = """
|
|
417 |
<p>Copy the following link to embed the video:</p>
|
418 |
<div class="embed-container">
|
419 |
<input type="text" id="embedLink" readonly>
|
420 |
-
<button onclick="copyEmbedLink()" class="copy-embed-btn">Copy</button>
|
421 |
</div>
|
422 |
</div>
|
423 |
</div>
|
@@ -567,7 +470,7 @@ HTML_CONTENT = """
|
|
567 |
|
568 |
const copyBtn = document.createElement('button');
|
569 |
copyBtn.textContent = 'Copy Link';
|
570 |
-
copyBtn.className = 'copy-btn';
|
571 |
copyBtn.onclick = () => {
|
572 |
navigator.clipboard.writeText(window.location.origin + url).then(() => {
|
573 |
alert('Link copied to clipboard!');
|
@@ -580,7 +483,7 @@ HTML_CONTENT = """
|
|
580 |
if (fileName.toLowerCase().endsWith('.mp4')) {
|
581 |
const embedBtn = document.createElement('button');
|
582 |
embedBtn.textContent = 'Embed Video for Discord';
|
583 |
-
embedBtn.className = 'embed-btn';
|
584 |
embedBtn.onclick = () => {
|
585 |
showEmbedModal(url);
|
586 |
};
|
@@ -631,7 +534,7 @@ async def handle_upload(file: UploadFile = File(...)):
|
|
631 |
|
632 |
original_url = upload_result['serving_url']
|
633 |
mirrored_url = f"/rbxg/{original_url.split('/pbxt/')[1]}"
|
634 |
-
|
635 |
return JSONResponse(content={"url": mirrored_url})
|
636 |
|
637 |
@app.get("/rbxg/{path:path}")
|
@@ -680,7 +583,7 @@ async def embed_video(url: str, thumbnail: str):
|
|
680 |
</head>
|
681 |
<body>
|
682 |
<img id="thumbnail" src="{thumbnail}" onclick="playVideo()">
|
683 |
-
<video id="video" controls>
|
684 |
<source src="{url}" type="video/mp4">
|
685 |
Your browser does not support the video tag.
|
686 |
</video>
|
|
|
81 |
font-size: 1rem;
|
82 |
font-weight: 600;
|
83 |
color: #ffffff;
|
84 |
+
background-color: #2a2a2a;
|
85 |
border: none;
|
86 |
border-radius: 5px;
|
87 |
cursor: pointer;
|
88 |
overflow: hidden;
|
89 |
z-index: 1;
|
90 |
+
transition: color 0.3s ease, box-shadow 0.3s ease;
|
91 |
}
|
92 |
|
93 |
.btn:hover {
|
94 |
+
color: #ffffff;
|
95 |
+
box-shadow: 0 0 15px rgba(255,255,255,0.5);
|
96 |
}
|
97 |
|
98 |
+
.btn:hover::before {
|
99 |
content: '';
|
100 |
position: absolute;
|
101 |
+
inset: -10px;
|
102 |
+
background: radial-gradient(circle at center, rgba(255,255,255,0.2), transparent);
|
103 |
+
filter: blur(20px);
|
104 |
+
animation: glowAnimation 2s infinite;
|
105 |
+
z-index: -1;
|
106 |
+
pointer-events: none;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
107 |
}
|
108 |
|
109 |
+
@keyframes glowAnimation {
|
110 |
+
0% { transform: scale(0.8); }
|
111 |
+
50% { transform: scale(1.2); }
|
112 |
+
100% { transform: scale(0.8); }
|
113 |
}
|
114 |
|
115 |
+
.btn:active {
|
116 |
+
transform: scale(0.98);
|
|
|
117 |
}
|
118 |
|
119 |
/* Drop Zone */
|
|
|
161 |
.progress {
|
162 |
width: 0%;
|
163 |
height: 100%;
|
164 |
+
background-color: #ffffff;
|
165 |
+
transition: width 0.3s ease;
|
|
|
|
|
|
|
|
|
|
|
166 |
}
|
167 |
|
168 |
/* Loading Spinner */
|
|
|
200 |
text-decoration: underline;
|
201 |
}
|
202 |
|
203 |
+
/* File Types */
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
204 |
.file-types {
|
205 |
margin-top: 2rem;
|
206 |
font-size: 0.8rem;
|
|
|
271 |
margin-right: 10px;
|
272 |
}
|
273 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
274 |
/* Media Queries */
|
275 |
@media (max-width: 480px) {
|
276 |
.container {
|
|
|
290 |
margin-right: 0;
|
291 |
}
|
292 |
}
|
293 |
+
|
294 |
</style>
|
295 |
</head>
|
296 |
<body>
|
|
|
320 |
<p>Copy the following link to embed the video:</p>
|
321 |
<div class="embed-container">
|
322 |
<input type="text" id="embedLink" readonly>
|
323 |
+
<button onclick="copyEmbedLink()" class="btn copy-embed-btn">Copy</button>
|
324 |
</div>
|
325 |
</div>
|
326 |
</div>
|
|
|
470 |
|
471 |
const copyBtn = document.createElement('button');
|
472 |
copyBtn.textContent = 'Copy Link';
|
473 |
+
copyBtn.className = 'btn copy-btn';
|
474 |
copyBtn.onclick = () => {
|
475 |
navigator.clipboard.writeText(window.location.origin + url).then(() => {
|
476 |
alert('Link copied to clipboard!');
|
|
|
483 |
if (fileName.toLowerCase().endsWith('.mp4')) {
|
484 |
const embedBtn = document.createElement('button');
|
485 |
embedBtn.textContent = 'Embed Video for Discord';
|
486 |
+
embedBtn.className = 'btn embed-btn';
|
487 |
embedBtn.onclick = () => {
|
488 |
showEmbedModal(url);
|
489 |
};
|
|
|
534 |
|
535 |
original_url = upload_result['serving_url']
|
536 |
mirrored_url = f"/rbxg/{original_url.split('/pbxt/')[1]}"
|
537 |
+
|
538 |
return JSONResponse(content={"url": mirrored_url})
|
539 |
|
540 |
@app.get("/rbxg/{path:path}")
|
|
|
583 |
</head>
|
584 |
<body>
|
585 |
<img id="thumbnail" src="{thumbnail}" onclick="playVideo()">
|
586 |
+
<video id="video" controls autoplay>
|
587 |
<source src="{url}" type="video/mp4">
|
588 |
Your browser does not support the video tag.
|
589 |
</video>
|