mirror of
https://github.com/timendum/Youtube-dl-WebUI.git
synced 2025-09-11 08:54:18 +08:00
Migrate to tailwind
This commit is contained in:
timendum
parent
11ef3bb61a
commit
62cd673fe2
11 changed files with 278 additions and 216 deletions
|
|
@ -28,7 +28,7 @@ class Downloader
|
|||
$this->outfilename = $this->config["outfilename"];
|
||||
}
|
||||
|
||||
$this->urls = preg_split("/[\s,]+/", trim($post));
|
||||
$this->urls = preg_split("/[\s,\n]+/", trim($post));
|
||||
|
||||
if(!$this->check_requirements())
|
||||
{
|
||||
|
|
@ -110,7 +110,7 @@ class Downloader
|
|||
public static function background_jobs()
|
||||
{
|
||||
$config = require dirname(__DIR__).'/config/config.php';
|
||||
return shell_exec("ps aux | grep -v grep | grep -v \"".$config["bin"]." -U\" | grep \"".$config["bin"]." \" | wc -l");
|
||||
return trim(shell_exec("ps aux | grep -v grep | grep -v \"".$config["bin"]." -U\" | grep \"".$config["bin"]." \" | wc -l"));
|
||||
}
|
||||
|
||||
public static function max_background_jobs()
|
||||
|
|
@ -218,7 +218,7 @@ class Downloader
|
|||
|
||||
private function is_python_installed()
|
||||
{
|
||||
exec("which python", $out, $r);
|
||||
exec("which python3", $out, $r);
|
||||
return $r;
|
||||
}
|
||||
|
||||
|
|
@ -315,7 +315,7 @@ class Downloader
|
|||
|
||||
if ($this->is_python_installed() == 0)
|
||||
{
|
||||
$cmd .= " | python -m json.tool";
|
||||
$cmd .= " | python3 -m json.tool";
|
||||
}
|
||||
|
||||
$soutput = shell_exec($cmd);
|
||||
|
|
|
|||
49
css/input.css
Normal file
49
css/input.css
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
.nav-menu>li>a {
|
||||
@apply flex gap-1 items-baseline;
|
||||
}
|
||||
|
||||
.nav-menu>li>a>spana {
|
||||
@apply inline-block;
|
||||
@apply align-middle;
|
||||
}
|
||||
|
||||
.nav-menu>li>a>span svg {
|
||||
@apply hidden;
|
||||
}
|
||||
|
||||
@media screen(md) {
|
||||
.nav-menu>li>a>span svg {
|
||||
@apply inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.infotext p {
|
||||
@apply py-1;
|
||||
|
||||
}
|
||||
|
||||
.filelist tbody td {
|
||||
@apply p-1;
|
||||
}
|
||||
@media screen(lg) {
|
||||
.filelist tbody td {
|
||||
@apply p-2;
|
||||
}
|
||||
}
|
||||
.filelist .btn-delete {
|
||||
@apply text-white bg-red-600 hover:bg-red-800 focus:ring-2 focus:ring-red-200 font-medium rounded-lg text-sm px-2 py-0.5 focus:ring-red-800;
|
||||
}
|
||||
@media screen(lg) {
|
||||
.filelist .btn-delete {
|
||||
@apply px-3 py-1.5;
|
||||
}
|
||||
}
|
||||
.dropdown:focus-within .dropdown-menu {
|
||||
display:block;
|
||||
}
|
||||
}
|
||||
1
css/output.css
Normal file
1
css/output.css
Normal file
File diff suppressed because one or more lines are too long
104
index.php
104
index.php
|
|
@ -51,79 +51,65 @@
|
|||
|
||||
require 'views/header.php';
|
||||
?>
|
||||
<div class="container my-4">
|
||||
<h1>Download</h1>
|
||||
<?php
|
||||
<div class="my-4 lg:my-8 mx-4 md:mx-8 lg:mx-16 xl:mx-32">
|
||||
<h1 class="text-2xl lg:text-4xl font-semibold">Download</h1>
|
||||
<?php
|
||||
|
||||
if(isset($_SESSION['errors']) && $_SESSION['errors'] > 0)
|
||||
{
|
||||
foreach ($_SESSION['errors'] as $e)
|
||||
{
|
||||
echo "<div class=\"alert alert-warning\" role=\"alert\">$e</div>";
|
||||
echo "<div class=\"p-4 my-4 rounded bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700\" role=\"alert\">$e</div>";
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
?>
|
||||
<form id="download-form" action="index.php" method="post">
|
||||
<div class="row my-3">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="urls-addon">URLs:</div>
|
||||
<input class="form-control" id="url" name="urls" placeholder="Link(s) separated by a space" type="text" aria-describedby="urls-addon" required/>
|
||||
<div class="flex flex-row my-3 rounded-md border-2 border-gray-200">
|
||||
<label class="p-1 lg:px-3 lg:py-2 rounded-l-sm font-semibold bg-gray-200" for="url">URLs:</label>
|
||||
<input class="px-1 lg:px-4 lg:py-2 flex-auto" id="url" name="urls" placeholder="Link(s) separated by a space" type="text" aria-describedby="urls-addon" required/>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 md:gap-3 xl:gap-5 flex-wrap">
|
||||
<div class="my-1">
|
||||
<button type="submit" class="text-white bg-blue-600 hover:bg-blue-800 focus:ring-2 focus:ring-blue-200 font-medium rounded-lg text-sm px-2 lg:px-3 py-0.5 lg:py-1.5 focus:ring-blue-800 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:from-gray-400 disabled:shadow-gray-800">Download</button>
|
||||
</div>
|
||||
<div class="my-1">
|
||||
<div class="lg:px-3 lg:py-1">
|
||||
<input type="checkbox" id="audioCheck" name="audio"/>
|
||||
<label class="form-check-label" for="audioCheck">Audio Only</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="rounded-md border border-gray-200 flex flex-auto">
|
||||
<label for="outfilename" class="p-1 lg:p-2 rounded-l-sm lg:font-semibold bg-gray-200">Filename:</label>
|
||||
<input class="p-1 lg:p-2 flex-auto" id="outfilename" name="outfilename" placeholder="Output filename template" type="text">
|
||||
</div>
|
||||
<div class="rounded-md border border-gray-200 flex flex-auto">
|
||||
<label for="vformat" class="p-1 lg:p-2 rounded-l-sm lg:font-semibold bg-gray-200">Format:</label>
|
||||
<input class="p-1 lg:p-2 flex-auto" id="vformat" name="vformat" placeholder="Video format code" type="text" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3 align-items-center">
|
||||
<div class="col-auto my-1">
|
||||
<button type="submit" class="btn btn-primary">Download</button>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<div class="input-group">
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="checkbox" id="audioCheck" name="audio"/>
|
||||
<label class="form-check-label" for="audioCheck">Audio Only</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="outfilename-addon">Filename:</span>
|
||||
<input class="form-control" id="outfilename" name="outfilename" placeholder="Output filename template" type="text" aria-describedby="outfilename-addon">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-auto my-1">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text" id="vformat-addon">Format:</span>
|
||||
<input class="form-control" id="vformat" name="vformat" placeholder="Video format code" type="text" aria-describedby="vformat-addon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="col-lg-6 mb-2">
|
||||
<div class="card">
|
||||
<div class="card-header">Info</div>
|
||||
<div class="card-body">
|
||||
<p>Free space : <?php echo $file->free_space(); ?></b></p>
|
||||
<p>Used space : <?php echo $file->used_space(); ?></b></p>
|
||||
<p>Download folder : <?php echo $file->get_downloads_folder(); ?></p>
|
||||
<p>Youtube-dl version : <?php echo Downloader::get_youtubedl_version(); ?></p>
|
||||
</div>
|
||||
<div class="flex gap-3 lg:gap-5 flex-wrap py-2">
|
||||
<div class="flex-auto rounded-md border border-gray-200 flex-col border-collapse">
|
||||
<div class="rounded-t-sm font-medium text-gray-800 bg-gray-100 p-1 lg:py-2 lg:px-3">Info</div>
|
||||
<div class="p-1 lg:py-2 lg:px-3 infotext">
|
||||
<p>Free space: <b><?php echo $file->free_space(); ?></b></p>
|
||||
<p>Used space: <b><?php echo $file->used_space(); ?></b></p>
|
||||
<p>Download folder: <code><?php echo $file->get_downloads_folder(); ?></code></p>
|
||||
<p>Youtube-dl version: <?php echo Downloader::get_youtubedl_version(); ?></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-lg-6 mb-2">
|
||||
<div class="card">
|
||||
<div class="card-header">Help</div>
|
||||
<div class="card-body">
|
||||
<p><b>How does it work ?</b></p>
|
||||
<p>Simply paste your video link in the field and click "Download"</p>
|
||||
<p><b>With which sites does it work?</b></p>
|
||||
<p><a href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md">Here's</a> a list of the supported sites</p>
|
||||
<p><b>How can I download the video on my computer?</b></p>
|
||||
<p>Go to <a href="./list.php">List of files</a> -> choose one -> right click on the link -> "Save target as ..." </p>
|
||||
<p><b>What's Filename or Format field?</b></p>
|
||||
<p>They are optional, see the official documentation about <a href="https://github.com/yt-dlp/yt-dlp/blob/master/README.md#format-selection">Format selection</a> or <a href="https://github.com/yt-dlp/yt-dlp/blob/master/README.md#output-template">Output template</a> </p>
|
||||
</div>
|
||||
<div class="flex-auto rounded-md border border-gray-200 flex-col">
|
||||
<div class="rounded-t-sm font-medium text-gray-800 bg-gray-100 p-1 lg:py-2 lg:px-3">Help</div>
|
||||
<div class="p-1 lg:py-2 lg:px-3 infotext">
|
||||
<p><b>How does it work ?</b></p>
|
||||
<p>Simply paste your video link in the field and click "Download"</p>
|
||||
<p><b>With which sites does it work?</b></p>
|
||||
<p><a href="https://github.com/yt-dlp/yt-dlp/blob/master/supportedsites.md" class="text-blue-600 hover:text-blue-800 active:text-blue-900 visited:text-purple-600 no-underline hover:underline">Here's</a> a list of the supported sites</p>
|
||||
<p><b>How can I download the video on my computer?</b></p>
|
||||
<p>Go to <a href="./list.php" class="text-blue-600 hover:text-blue-800 active:text-blue-900 visited:text-purple-600 no-underline hover:underline">List of files</a> -> choose one -> right click on the link -> "Save target as ..." </p>
|
||||
<p><b>What's Filename or Format field?</b></p>
|
||||
<p>They are optional, see the official documentation about <a href="https://github.com/yt-dlp/yt-dlp/blob/master/README.md#format-selection" class="text-blue-600 hover:text-blue-800 active:text-blue-900 visited:text-purple-600 no-underline hover:underline">Format selection</a> or <a href="https://github.com/yt-dlp/yt-dlp/blob/master/README.md#output-template" class="text-blue-600 hover:text-blue-800 active:text-blue-900 visited:text-purple-600 no-underline hover:underline">Output template</a> </p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
33
info.php
33
info.php
|
|
@ -24,43 +24,40 @@
|
|||
}
|
||||
}
|
||||
?>
|
||||
<div class="container my-4">
|
||||
<h1>JSON Info</h1>
|
||||
<?php
|
||||
<div class="my-4 lg:my-8 mx-4 md:mx-8 lg:mx-16 xl:mx-32">
|
||||
<h1 class="text-2xl lg:text-4xl font-semibold">JSON Info</h1>
|
||||
<?php
|
||||
|
||||
if(isset($_SESSION['errors']) && $_SESSION['errors'] > 0)
|
||||
{
|
||||
foreach ($_SESSION['errors'] as $e)
|
||||
{
|
||||
echo "<div class=\"alert alert-warning\" role=\"alert\">$e</div>";
|
||||
echo "<div class=\"p-4 my-4 rounded bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700\" role=\"alert\">$e</div>";
|
||||
}
|
||||
}
|
||||
|
||||
?>
|
||||
<form id="info-form" action="info.php" method="post">
|
||||
<div class="row my-3">
|
||||
<div class="input-group">
|
||||
<div class="input-group-text" id="urls-addon">URLs:</div>
|
||||
<input class="form-control" id="url" name="urls" placeholder="Link(s) separated by a space" type="text" aria-describedby="urls-addon" required/>
|
||||
</div>
|
||||
<div class="flex flex-row my-3 rounded-md border-2 border-gray-200">
|
||||
<label class="p-1 lg:px-3 lg:py-2 rounded-l-sm font-semibold bg-gray-200" for="url">URLs:</label>
|
||||
<input class="px-1 lg:px-4 lg:py-2 flex-auto" id="url" name="urls" placeholder="Link(s) separated by a space" type="text" aria-describedby="urls-addon" required/>
|
||||
</div>
|
||||
<div class="row mt-3 align-items-center">
|
||||
<div class="col-auto">
|
||||
<button type="submit" class="btn btn-primary">Query</button>
|
||||
<div class="flex flex-row gap-2 md:gap-3 xl:gap-5 flex-wrap">
|
||||
<div class="my-1">
|
||||
<button type="submit" class="text-white bg-blue-600 hover:bg-blue-800 focus:ring-2 focus:ring-blue-200 font-medium rounded-lg text-sm px-2 lg:px-3 py-0.5 lg:py-1.5 focus:ring-blue-800 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:from-gray-400 disabled:shadow-gray-800">Query</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</form>
|
||||
<br>
|
||||
<div class="row">
|
||||
<div class="my-2">
|
||||
<?php
|
||||
if ($json)
|
||||
{
|
||||
?>
|
||||
<div class="panel panel-info">
|
||||
<div class="panel-heading"><h3 class="panel-title">Info</h3></div>
|
||||
<div class="panel-body">
|
||||
<textarea rows="50" class="form-control"><?php echo $json ?></textarea>
|
||||
<div class="rounded-md border border-gray-200">
|
||||
<div class="rounded-t-sm font-medium text-gray-800 bg-gray-100 p-1 lg:py-2 lg:px-3">Info</div>
|
||||
<div>
|
||||
<textarea rows="50" class="w-full p-1"><?php echo $json ?></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<?php
|
||||
|
|
|
|||
66
list.php
66
list.php
|
|
@ -24,88 +24,84 @@
|
|||
|
||||
require 'views/header.php';
|
||||
?>
|
||||
<div class="container my-4">
|
||||
<?php
|
||||
<div class="my-4 lg:my-8 mx-4 md:mx-8 lg:mx-16 xl:mx-32">
|
||||
<?php
|
||||
if(!empty($files))
|
||||
{
|
||||
?>
|
||||
<h2>List of available files:</h2>
|
||||
<table class="table table-striped table-hover ">
|
||||
<thead>
|
||||
<h1 class="text-l lg:text-xl font-semibold">List of available files:</h1>
|
||||
<table class="min-w-full divide-y divide-gray-200 table-auto filelist my-2">
|
||||
<thead class="border-b border-gray-300 text-left">
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Filename</th>
|
||||
<th>Size</th>
|
||||
<th><span class="pull-right">Delete link</span></th>
|
||||
<th>Delete link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
<tbody class="bg-white divide-y divide-gray-200 border-b border-gray-300">
|
||||
<?php
|
||||
foreach($files as $f)
|
||||
{
|
||||
echo "<tr>";
|
||||
echo "\t\t\t\t\t<tr class=\"odd:bg-gray-100 hover:bg-gray-300\">";
|
||||
if ($file->get_relative_downloads_folder())
|
||||
{
|
||||
echo "<td><a href=\"".rawurlencode($file->get_relative_downloads_folder()).'/'.rawurlencode($f["name"])."\" download>".$f["name"]."</a></td>";
|
||||
echo "<td class=\"max-w-md lg:max-w-screen-md xl:max-w-screen-lg text-ellipsis overflow-hidden\"><a class=\"lg:line-clamp-1 text-blue-600 hover:text-blue-800 active:text-blue-900 visited:text-purple-600 underline hover:decoration-transparent\" href=\"".rawurlencode($file->get_relative_downloads_folder()).'/'.rawurlencode($f["name"])."\" download title=\"".htmlspecialchars($f["name"])."\">".htmlspecialchars($f["name"])."</a></td>";
|
||||
}
|
||||
else
|
||||
{
|
||||
echo "<td>".$f["name"]."</td>";
|
||||
echo "<td>".htmlspecialchars($f["name"])."</td>";
|
||||
}
|
||||
echo "<td>".$f["size"]."</td>";
|
||||
echo "<td><a href=\"./list.php?delete=".sha1($f["name"])."\" class=\"btn btn-danger btn-sm pull-right\">Delete</a></td>";
|
||||
echo "</tr>";
|
||||
echo "<td><a href=\"./list.php?delete=".sha1($f["name"])."\" class=\"btn-delete\">Delete</a></td>";
|
||||
echo "</tr>\n";
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
<?php
|
||||
<?php
|
||||
}
|
||||
else
|
||||
{
|
||||
echo "<br><div class=\"alert alert-warning\" role=\"alert\">No files!</div>";
|
||||
echo "<div class=\"p-4 my-4 rounded bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700\" role=\"alert\">No files!</div>";
|
||||
}
|
||||
?>
|
||||
<br/>
|
||||
<?php
|
||||
<?php
|
||||
if(!empty($parts))
|
||||
{
|
||||
?>
|
||||
<h2>List of part files:</h2>
|
||||
<table class="table table-striped table-hover ">
|
||||
<thead>
|
||||
<h2 class="text-l lg:text-xl font-semibold my-2">List of part files:</h1>
|
||||
<table class="min-w-full divide-y divide-gray-200 table-auto filelist my-2">
|
||||
<thead class="border-b border-gray-300 text-left">
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>Filename</th>
|
||||
<th>Size</th>
|
||||
<th><span class="pull-right">Delete link</span></th>
|
||||
<th>Delete link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
<tbody class="bg-white divide-y divide-gray-200 border-b border-gray-300">
|
||||
<?php
|
||||
foreach($parts as $f)
|
||||
{
|
||||
echo "<tr>";
|
||||
echo "\t\t\t\t\t<tr class=\"odd:bg-gray-100 hover:bg-gray-300\">";
|
||||
if ($file->get_relative_downloads_folder())
|
||||
{
|
||||
echo "<td><a href=\"".rawurlencode($file->get_relative_downloads_folder()).'/'.rawurlencode($f["name"])."\" download>".$f["name"]."</a></td>";
|
||||
echo "<td class=\"max-w-md lg:max-w-screen-md xl:max-w-screen-lg text-ellipsis overflow-hidden\"><a class=\"lg:line-clamp-1 text-blue-600 hover:text-blue-800 active:text-blue-900 visited:text-purple-600 underline hover:decoration-transparent\" href=\"".rawurlencode($file->get_relative_downloads_folder()).'/'.rawurlencode($f["name"])."\" download title=\"".htmlspecialchars($f["name"])."\">".htmlspecialchars($f["name"])."</a></td>";
|
||||
}
|
||||
else
|
||||
{
|
||||
echo "<td>".$f["name"]."</td>";
|
||||
echo "<td>".htmlspecialchars($f["name"])."</td>";
|
||||
}
|
||||
echo "<td>".$f["size"]."</td>";
|
||||
echo "<td><a href=\"./list.php?delete=".sha1($f["name"])."\" class=\"btn btn-danger btn-sm pull-right\">Delete</a></td>";
|
||||
echo "</tr>";
|
||||
echo "<td><a href=\"./list.php?delete=".sha1($f["name"])."\" class=\"btn-delete\">Delete</a></td>";
|
||||
echo "</tr>\n";
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
<br/>
|
||||
<br/>
|
||||
<?php
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<br/>
|
||||
</div><!-- End container -->
|
||||
</div>
|
||||
<?php
|
||||
require 'views/footer.php';
|
||||
?>
|
||||
|
|
|
|||
45
login.php
45
login.php
|
|
@ -20,33 +20,32 @@
|
|||
?>
|
||||
|
||||
<?php require 'views/header.php'; ?>
|
||||
<div class="container my-4">
|
||||
<?php
|
||||
if($loginError !== "")
|
||||
{
|
||||
?>
|
||||
<div class="alert alert-danger" role="alert"><?php echo $loginError; ?></div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<form class="form-horizontal" action="login.php" method="POST" data-bitwarden-watching="1">
|
||||
<div class="row my-3 justify-content-md-center">
|
||||
<div class="col col-md-4">
|
||||
<h2>Login</h2>
|
||||
<div class="my-4 lg:my-8 mx-4 md:mx-8 lg:mx-16 xl:mx-32">
|
||||
<?php
|
||||
if($loginError !== "") {
|
||||
?>
|
||||
|
||||
<div class="p-4 my-4 rounded bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700" role="alert"><?php echo $loginError; ?></div>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<form action="login.php" method="POST">
|
||||
<div class="flex flex-row gap-2 md:gap-3 xl:gap-5 flex-wrap">
|
||||
<div class="my-1">
|
||||
<h1 class="text-l lg:text-xl font-semibold">Login</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-3 justify-content-md-center">
|
||||
<div class="col col-lg-4 ">
|
||||
<div class="input-group">
|
||||
<input class="form-control" id="password" name="password" placeholder="Password" type="password">
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 md:gap-3 xl:gap-5 flex-wrap">
|
||||
<div class="my-1">
|
||||
<div class="rounded-md border border-gray-200 flex flex-auto">
|
||||
<label for="password" class="p-1 lg:p-2 rounded-l-sm lg:font-semibold bg-gray-200">Password:</label>
|
||||
<input class="p-1 lg:p-2 flex-auto" id="password" name="password" placeholder="*****" type="text">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row my-3 justify-content-md-center">
|
||||
<div class="col col-lg-4">
|
||||
<div class="input-group">
|
||||
<button type="submit" class="btn btn-primary">Sign in</button>
|
||||
</div>
|
||||
<div class="flex flex-row gap-2 md:gap-3 xl:gap-5 flex-wrap">
|
||||
<div class="my-1">
|
||||
<button type="submit" class="text-white bg-blue-600 hover:bg-blue-800 focus:ring-2 focus:ring-blue-200 font-medium rounded-lg text-sm px-2 lg:px-3 py-0.5 lg:py-1.5 focus:ring-blue-800 disabled:cursor-not-allowed disabled:bg-gray-400 disabled:from-gray-400 disabled:shadow-gray-800">Sign in</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
27
logs.php
27
logs.php
|
|
@ -22,14 +22,14 @@
|
|||
|
||||
require 'views/header.php';
|
||||
?>
|
||||
<div class="container my-4">
|
||||
<?php
|
||||
<div class="my-4 lg:my-8 mx-4 md:mx-8 lg:mx-16 xl:mx-32">
|
||||
<?php
|
||||
if(!empty($files))
|
||||
{
|
||||
?>
|
||||
<h1>List of logs:</h1>
|
||||
<table class="table table-striped table-hover ">
|
||||
<thead>
|
||||
<h1 class="text-l lg:text-xl font-semibold">List logs:</h1>
|
||||
<table class="min-w-full divide-y divide-gray-200 table-auto filelist my-2">
|
||||
<thead class="border-b border-gray-300 text-left">
|
||||
<tr>
|
||||
<th>Timestamp</th>
|
||||
<th>Ended?</th>
|
||||
|
|
@ -38,15 +38,15 @@
|
|||
<th>Delete link</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<?php
|
||||
<tbody class="bg-white divide-y divide-gray-200 border-b border-gray-300">
|
||||
<?php
|
||||
|
||||
foreach($files as $f)
|
||||
{
|
||||
echo "<tr>";
|
||||
echo "\t\t\t\t\t<tr class=\"odd:bg-gray-100 hover:bg-gray-300\">";
|
||||
if ($file->get_relative_log_folder())
|
||||
{
|
||||
echo "<td><div><a href=\"".rawurlencode($file->get_relative_log_folder()).'/'.rawurlencode($f["name"])."\" target=\"_blank\">".$f["name"]."</a></div><div>".$f["lastline"]."</div></td>";
|
||||
echo "<td class=\"max-w-md lg:max-w-screen-md xl:max-w-screen-lg text-ellipsis overflow-hidden\"><a class=\"lg:line-clamp-1 text-blue-600 hover:text-blue-800 active:text-blue-900 visited:text-purple-600 underline hover:decoration-transparent\" href=\"".rawurlencode($file->get_relative_log_folder()).'/'.rawurlencode($f["name"])."\" download title=\"".htmlspecialchars($f["name"])."\">".htmlspecialchars($f["name"])."</a></td>";
|
||||
}
|
||||
else
|
||||
{
|
||||
|
|
@ -55,22 +55,19 @@
|
|||
echo "<td>".($f["ended"] ? '✓' : '')."</td>";
|
||||
echo "<td>".($f["100"] ? '✓' : '')."</td>";
|
||||
echo "<td>".$f["size"]."</td>";
|
||||
echo "<td><a href=\"./logs.php?delete=".sha1($f["name"])."\" class=\"btn btn-danger btn-sm\">Delete</a></td>";
|
||||
echo "</tr>";
|
||||
echo "<td><a href=\"./logs.php?delete=".sha1($f["name"])."\" class=\"btn-delete\">Delete</a></td>";
|
||||
echo "</tr>\n";
|
||||
}
|
||||
?>
|
||||
</tbody>
|
||||
</table>
|
||||
<br/>
|
||||
<br/>
|
||||
<?php
|
||||
}
|
||||
else
|
||||
{
|
||||
echo "<br><div class=\"alert alert-warning\" role=\"alert\">No logs!</div>";
|
||||
echo "<div class=\"p-4 my-4 rounded bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700\" role=\"alert\">No logs!</div>";
|
||||
}
|
||||
?>
|
||||
<br/>
|
||||
</div>
|
||||
<?php
|
||||
require 'views/footer.php';
|
||||
|
|
|
|||
9
tailwind.config.js
Normal file
9
tailwind.config.js
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ["./*.php", "./views/*.php"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
|
||||
|
|
@ -1,12 +1,26 @@
|
|||
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.5/dist/umd/popper.min.js" crossorigin="anonymous"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
const urlF = document.getElementById('url');
|
||||
if (urlF) {urlF.focus();}
|
||||
});
|
||||
</script>
|
||||
<script type="text/javascript">
|
||||
function replaceWithTextArea(input){
|
||||
const text = document.createElement('textarea');
|
||||
text.setAttribute('name', input.getAttribute('name'));
|
||||
text.setAttribute('id', input.getAttribute('id'));
|
||||
text.setAttribute('class', input.getAttribute('class'));
|
||||
text.value = input.value;
|
||||
input.parentNode.replaceChild(text, input);
|
||||
return text;
|
||||
}
|
||||
document.addEventListener("DOMContentLoaded", function() {
|
||||
let ifield = document.getElementById('url');
|
||||
if (ifield) {ifield.addEventListener("input", e => {
|
||||
if (e.target.value.indexOf(" ") > 0) {
|
||||
const text = replaceWithTextArea(e.target);
|
||||
text.value = text.value.replaceAll(" ","\n");
|
||||
text.focus();
|
||||
}
|
||||
})}
|
||||
ifield = ifield || document.getElementById('password');
|
||||
if (ifield) {ifield.focus();}
|
||||
|
||||
});
|
||||
</script>
|
||||
|
||||
</body></html>
|
||||
|
|
|
|||
118
views/header.php
118
views/header.php
|
|
@ -3,33 +3,30 @@
|
|||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Youtube-dl WebUI</title>
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" media="screen">
|
||||
<link rel="stylesheet" href="./css/custom.css">
|
||||
<link rel="stylesheet" href="./css/output.css">
|
||||
<link rel="Shortcut Icon" href="./favicon_144.png" type="image/x-icon">
|
||||
</head>
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg navbar-light bg-light px-2">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="./">Youtube-dl WebUI</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||||
<ul class="navbar-nav mr-auto">
|
||||
<?php
|
||||
<nav class="bg-gray-100 px-2 lg:px-4 py-1 lg:py-3">
|
||||
<div class="flex justify-between">
|
||||
<!-- Left elements -->
|
||||
<ul class="flex gap-1 md:gap-2 lg:gap-3 xl:gap-5 nav-menu">
|
||||
<li class="hidden md:inline-block xl:text-xl font-bold">Youtube-dl WebUI</li>
|
||||
<?php
|
||||
if($session->is_logged_in() && isset($file))
|
||||
{
|
||||
?>
|
||||
<li class="nav-item mx-1"><a class="nav-link" href="./">
|
||||
<span class="align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cloud-download-fill" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.5a.5.5 0 0 1 1 0V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0zm-.354 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V11h-1v3.293l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/></svg></span> Download
|
||||
<li><a href="./">
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 0a5.53 5.53 0 0 0-3.594 1.342c-.766.66-1.321 1.52-1.464 2.383C1.266 4.095 0 5.555 0 7.318 0 9.366 1.708 11 3.781 11H7.5V5.5a.5.5 0 0 1 1 0V11h4.188C14.502 11 16 9.57 16 7.773c0-1.636-1.242-2.969-2.834-3.194C12.923 1.999 10.69 0 8 0zm-.354 15.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 14.293V11h-1v3.293l-2.146-2.147a.5.5 0 0 0-.708.708l3 3z"/></svg></span>
|
||||
<span>Download</span>
|
||||
</a></li>
|
||||
<li class="nav-item mx-1"><a class="nav-link" href="./info.php">
|
||||
<span class="align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16"> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg></span>
|
||||
JSON Info
|
||||
<li><a href="./info.php">
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"> <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16zm.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2z"/></svg></span>
|
||||
<span>JSON Info</span>
|
||||
</a></li>
|
||||
<li class="nav-item mx-1"><a class="nav-link" href="./list.php">
|
||||
<span class="align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-list" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg></span>
|
||||
<?php
|
||||
<li><a href="./list.php">
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M2.5 12a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm0-4a.5.5 0 0 1 .5-.5h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5z"/></svg></span>
|
||||
<span><?php
|
||||
// List of files
|
||||
$filesCount = count($file->listFiles());
|
||||
if ($filesCount < 1) {
|
||||
|
|
@ -38,67 +35,84 @@
|
|||
echo ' <b>List of files</b> ('.($filesCount).')';
|
||||
}
|
||||
unset($filesCount);
|
||||
?>
|
||||
?></span>
|
||||
</a></li>
|
||||
<?php
|
||||
<?php
|
||||
// Logs
|
||||
if ($file->is_log_enabled()) {
|
||||
?>
|
||||
<li class="nav-item mx-1"><a class="nav-link" href="./logs.php">
|
||||
<span class="align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journals" viewBox="0 0 16 16"><path d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2z"/><path d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 2.5v.5H.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0z"/></svg></span>
|
||||
<?php
|
||||
<li><a href="./logs.php">
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-journals" viewBox="0 0 16 16"><path d="M5 0h8a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2 2 2 0 0 1-2 2H3a2 2 0 0 1-2-2h1a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1H1a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v9a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H5a1 1 0 0 0-1 1H3a2 2 0 0 1 2-2z"/><path d="M1 6v-.5a.5.5 0 0 1 1 0V6h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V9h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 2.5v.5H.5a.5.5 0 0 0 0 1h2a.5.5 0 0 0 0-1H2v-.5a.5.5 0 0 0-1 0z"/></svg></span>
|
||||
<span><?php
|
||||
$filesCount = $file->countLogs();
|
||||
if ($filesCount < 1) {
|
||||
echo ' Logs';
|
||||
echo 'Logs';
|
||||
} else {
|
||||
echo ' <b>Logs</b> ('.($filesCount).')';
|
||||
echo '<b>Logs</b> ('.($filesCount).')';
|
||||
}
|
||||
unset($filesCount);
|
||||
?>
|
||||
?></span>
|
||||
</a></li>
|
||||
<?php
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
<li class="nav-item mx-1 dropdown">
|
||||
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
|
||||
<?php if(Downloader::background_jobs() > 0) echo "<b>"; ?>Background downloads : <?php echo Downloader::background_jobs()." / ".Downloader::max_background_jobs(); if(Downloader::background_jobs() > 0) echo "</b>"; ?> <span class="caret"></span></a>
|
||||
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
|
||||
<?php
|
||||
<li>
|
||||
<div class="relative inline-block text-left dropdown">
|
||||
<button class="inline-flex" type="button" aria-haspopup="true" aria-expanded="true">
|
||||
<span>
|
||||
<?php if(Downloader::background_jobs() > 0) echo "<b>"; ?>Jobs: <?php echo Downloader::background_jobs()." / ".Downloader::max_background_jobs(); if(Downloader::background_jobs() > 0) echo "</b>"; ?>
|
||||
</span>
|
||||
</button>
|
||||
<div class="hidden dropdown-menu">
|
||||
<div class="absolute right-0 w-56 mt-2 origin-top-right bg-white border border-gray-200 divide-y divide-gray-100 rounded-md shadow-lg outline-none" role="menu">
|
||||
<?php
|
||||
if(Downloader::get_current_background_jobs() != null)
|
||||
{
|
||||
?>
|
||||
<div>
|
||||
<?php
|
||||
foreach(Downloader::get_current_background_jobs() as $key)
|
||||
{
|
||||
echo " <li><span class=\"dropdown-item\" title=\"".htmlspecialchars($key['cmd'])."\">Elapsed time : ".$key['time']."</span></li>";
|
||||
echo "\t\t\t\t\t\t\t\t\t\t\t<div class=\"text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left\" role=\"menuitem\" title=\"".htmlspecialchars($key['cmd'])."\">Elapsed time: ".$key['time']."</div>";
|
||||
}
|
||||
?>
|
||||
|
||||
echo " <li><hr class=\"dropdown-divider\"></li>";
|
||||
echo " <li><a class=\"dropdown-item\" href=\"./index.php?kill=all\">Kill all downloads</a></li>";
|
||||
</div>
|
||||
<div class="py-1">
|
||||
<a class="text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left" role="menuitem" href="./index.php?kill=all">Kill all downloads</a>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
else
|
||||
{
|
||||
echo " <li><a class=\"dropdown-item disabled\">No jobs !</a></li>";
|
||||
else {
|
||||
?>
|
||||
<div class="py-1">
|
||||
<div class="text-gray-700 flex justify-between w-full px-4 py-2 text-sm leading-5 text-left" role="menuitem" href="./index.php?kill=all">No downloads</div>
|
||||
</div>
|
||||
<?php
|
||||
}
|
||||
|
||||
?>
|
||||
</ul>
|
||||
</li>
|
||||
?>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
<ul class="navbar-nav mr-auto justify-content-end">
|
||||
<?php
|
||||
<!-- Right elements -->
|
||||
<ul class="flex gap-2 md:gap-3 xl:gap-5 nav-menu">
|
||||
<?php
|
||||
if($session->is_logged_in())
|
||||
{
|
||||
?>
|
||||
<li class="nav-item"><a class="nav-link" href="./logout.php">
|
||||
<span class="align-text-bottom"><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/><path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/></svg></span>
|
||||
Logout
|
||||
</a></li>
|
||||
<?php
|
||||
?>
|
||||
<li><a href="./logout.php">
|
||||
<span><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-right" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M10 12.5a.5.5 0 0 1-.5.5h-8a.5.5 0 0 1-.5-.5v-9a.5.5 0 0 1 .5-.5h8a.5.5 0 0 1 .5.5v2a.5.5 0 0 0 1 0v-2A1.5 1.5 0 0 0 9.5 2h-8A1.5 1.5 0 0 0 0 3.5v9A1.5 1.5 0 0 0 1.5 14h8a1.5 1.5 0 0 0 1.5-1.5v-2a.5.5 0 0 0-1 0v2z"/><path fill-rule="evenodd" d="M15.854 8.354a.5.5 0 0 0 0-.708l-3-3a.5.5 0 0 0-.708.708L14.293 7.5H5.5a.5.5 0 0 0 0 1h8.793l-2.147 2.146a.5.5 0 0 0 .708.708l3-3z"/></svg></span>
|
||||
<span>Logout</span>
|
||||
</a></li>
|
||||
<?php
|
||||
}
|
||||
?>
|
||||
?>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue