refactor: move metadata editor to sub-directory
This commit is contained in:
parent
be91526c90
commit
371fb9042d
GPG Key ID:
8D83DE470F8544E7
@ -2,4 +2,6 @@ __pycache__/
|
|||||||
*.pyc
|
*.pyc
|
||||||
.git
|
.git
|
||||||
.env
|
.env
|
||||||
metadata
|
/to_convert/
|
||||||
|
/converted/
|
||||||
|
/metadata/
|
||||||
4
.gitignore
vendored
4
.gitignore
vendored
@ -1 +1,3 @@
|
|||||||
metadata
|
/to_convert/
|
||||||
|
/converted/
|
||||||
|
/metadata/
|
||||||
@ -3,51 +3,28 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Metadata Editor</title>
|
<title>Melies</title>
|
||||||
<link rel="stylesheet" href="/static/css/base.css">
|
<link rel="stylesheet" href="/static/css/base.css">
|
||||||
<link rel="stylesheet" href="/static/css/index.css">
|
<link rel="stylesheet" href="/static/css/index.css">
|
||||||
|
<link rel="shortcut icon" href="/static/images/icon3.svg" type="image/svg+xml">
|
||||||
<script src="/static/js/index.js"></script>
|
<script src="/static/js/index.js"></script>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<header>
|
<header>
|
||||||
<h1>Metadata Editor</h1>
|
<img src="/static/images/icon3.svg">
|
||||||
|
<h1>Melies</h1>
|
||||||
</header>
|
</header>
|
||||||
<main>
|
<main>
|
||||||
<a id="film-template" class="template file film">
|
<nav id="pages">
|
||||||
<img src="/static/images/film.svg">
|
<a class="page" href="/conversion/">
|
||||||
<div class="title"></div>
|
<img src="/static/images/conversion.svg">
|
||||||
|
<div class="name">Conversion</div>
|
||||||
</a>
|
</a>
|
||||||
<a id="series-template" class="template file series">
|
<a class="page" href="/metadata/">
|
||||||
<img src="/static/images/series.svg">
|
<img src="/static/images/metadata.svg">
|
||||||
<div class="title"></div>
|
<div class="name">Metadata</div>
|
||||||
<div class="episodes"><span class="num"></span> episode(s)</div>
|
|
||||||
</a>
|
</a>
|
||||||
<div class="toolbar">
|
</nav>
|
||||||
<div class="tool">
|
|
||||||
<label for="sort-by">Sort by</label>
|
|
||||||
<select id="sort-by">
|
|
||||||
<option value="title">Title</option>
|
|
||||||
<option value="ts">Last modified</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
<div class="tool">
|
|
||||||
<label for="sort-desc">Order</label>
|
|
||||||
<label class="toggle">
|
|
||||||
<input type="checkbox" id="sort-desc">
|
|
||||||
<div class="off">ASC</div>
|
|
||||||
<div class="on">DESC</div>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div class="tool">
|
|
||||||
<label for="filter">Filter</label>
|
|
||||||
<select id="filter">
|
|
||||||
<option value="all">All</option>
|
|
||||||
<option value="film">Films</option>
|
|
||||||
<option value="series">Series</option>
|
|
||||||
</select>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div id="files"></div>
|
|
||||||
</main>
|
</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
@ -3,7 +3,7 @@
|
|||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
<title>Edit</title>
|
<title>Melies - Metadata Editor</title>
|
||||||
<link rel="stylesheet" href="/static/css/base.css">
|
<link rel="stylesheet" href="/static/css/base.css">
|
||||||
<link rel="stylesheet" href="/static/css/edit.css">
|
<link rel="stylesheet" href="/static/css/edit.css">
|
||||||
<script src="/static/js/edit.mjs" type="module"></script>
|
<script src="/static/js/edit.mjs" type="module"></script>
|
||||||
@ -14,7 +14,7 @@
|
|||||||
<img class="clicked" src="/static/images/improve_clicked.svg">
|
<img class="clicked" src="/static/images/improve_clicked.svg">
|
||||||
</button>
|
</button>
|
||||||
<header id="toolbar">
|
<header id="toolbar">
|
||||||
<a href="/">Home</a>
|
<a href="/metadata/">Back</a>
|
||||||
<button id="check-integrity">Check integrity</button>
|
<button id="check-integrity">Check integrity</button>
|
||||||
<button id="improve-all">Improve all names</button>
|
<button id="improve-all">Improve all names</button>
|
||||||
<button id="save">Save</button>
|
<button id="save">Save</button>
|
||||||
54
src/public/metadata/index.html
Normal file
54
src/public/metadata/index.html
Normal file
@ -0,0 +1,54 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<title>Melies - Metadata Editor</title>
|
||||||
|
<link rel="stylesheet" href="/static/css/base.css">
|
||||||
|
<link rel="stylesheet" href="/static/css/metadata.css">
|
||||||
|
<link rel="shortcut icon" href="/static/images/icon3.svg" type="image/svg+xml">
|
||||||
|
<script src="/static/js/metadata.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<header>
|
||||||
|
<h1>Metadata Editor</h1>
|
||||||
|
</header>
|
||||||
|
<main>
|
||||||
|
<a id="film-template" class="template file film">
|
||||||
|
<img src="/static/images/film.svg">
|
||||||
|
<div class="title"></div>
|
||||||
|
</a>
|
||||||
|
<a id="series-template" class="template file series">
|
||||||
|
<img src="/static/images/series.svg">
|
||||||
|
<div class="title"></div>
|
||||||
|
<div class="episodes"><span class="num"></span> episode(s)</div>
|
||||||
|
</a>
|
||||||
|
<div class="toolbar">
|
||||||
|
<div class="tool">
|
||||||
|
<label for="sort-by">Sort by</label>
|
||||||
|
<select id="sort-by">
|
||||||
|
<option value="title">Title</option>
|
||||||
|
<option value="ts">Last modified</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
<div class="tool">
|
||||||
|
<label for="sort-desc">Order</label>
|
||||||
|
<label class="toggle">
|
||||||
|
<input type="checkbox" id="sort-desc">
|
||||||
|
<div class="off">ASC</div>
|
||||||
|
<div class="on">DESC</div>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div class="tool">
|
||||||
|
<label for="filter">Filter</label>
|
||||||
|
<select id="filter">
|
||||||
|
<option value="all">All</option>
|
||||||
|
<option value="film">Films</option>
|
||||||
|
<option value="series">Series</option>
|
||||||
|
</select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div id="files"></div>
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
@ -1,12 +1,23 @@
|
|||||||
#files {
|
header {
|
||||||
|
align-items: center;
|
||||||
|
img {
|
||||||
|
width: 4em;
|
||||||
|
height: 4em;
|
||||||
|
object-fit: contain;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#pages {
|
||||||
display: grid;
|
display: grid;
|
||||||
|
max-width: calc(max(50%, 20em));
|
||||||
|
margin: 0 auto;
|
||||||
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
|
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
|
||||||
grid-auto-rows: 15em;
|
grid-auto-rows: 15em;
|
||||||
gap: 0.8em;
|
gap: 0.8em;
|
||||||
place-items: center;
|
place-items: center;
|
||||||
padding: 0.8em 0;
|
padding: 0.8em 0;
|
||||||
|
|
||||||
.file {
|
.page {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -20,10 +31,6 @@
|
|||||||
padding: 0.4em;
|
padding: 0.4em;
|
||||||
border-radius: 1.2em;
|
border-radius: 1.2em;
|
||||||
|
|
||||||
&.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background-color: #f8f8f8;
|
background-color: #f8f8f8;
|
||||||
}
|
}
|
||||||
@ -33,64 +40,11 @@
|
|||||||
height: 10em;
|
height: 10em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.title {
|
.name {
|
||||||
overflow-wrap: anywhere;
|
overflow-wrap: anywhere;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
font-size: 150%;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.toolbar {
|
|
||||||
display: flex;
|
|
||||||
gap: 1.2em;
|
|
||||||
border-bottom: solid black 1px;
|
|
||||||
padding: 0.4em 0;
|
|
||||||
|
|
||||||
.tool {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 0.2em;
|
|
||||||
|
|
||||||
label[for] {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
input, select {
|
|
||||||
font-family: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle {
|
|
||||||
height: 2em;
|
|
||||||
border-radius: 1em;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
user-select: none;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
input {
|
|
||||||
display: none;
|
|
||||||
|
|
||||||
&:not(:checked) ~ .off, &:checked ~ .on {
|
|
||||||
background-color: #6ee74a;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
div {
|
|
||||||
padding: 0 0.4em;
|
|
||||||
display: grid;
|
|
||||||
place-items: center;
|
|
||||||
|
|
||||||
&.off {
|
|
||||||
border-radius: 1em 0 0 1em;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.on {
|
|
||||||
border-radius: 0 1em 1em 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
96
src/public/static/css/metadata.css
Normal file
96
src/public/static/css/metadata.css
Normal file
@ -0,0 +1,96 @@
|
|||||||
|
#files {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fit, minmax(15em, 1fr));
|
||||||
|
grid-auto-rows: 15em;
|
||||||
|
gap: 0.8em;
|
||||||
|
place-items: center;
|
||||||
|
padding: 0.8em 0;
|
||||||
|
|
||||||
|
.file {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
color: black;
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
padding: 0.4em;
|
||||||
|
border-radius: 1.2em;
|
||||||
|
|
||||||
|
&.hidden {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 10em;
|
||||||
|
height: 10em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
overflow-wrap: anywhere;
|
||||||
|
text-align: center;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbar {
|
||||||
|
display: flex;
|
||||||
|
gap: 1.2em;
|
||||||
|
border-bottom: solid black 1px;
|
||||||
|
padding: 0.4em 0;
|
||||||
|
|
||||||
|
.tool {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 0.2em;
|
||||||
|
|
||||||
|
label[for] {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
input, select {
|
||||||
|
font-family: inherit;
|
||||||
|
font-size: inherit;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toggle {
|
||||||
|
height: 2em;
|
||||||
|
border-radius: 1em;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
input {
|
||||||
|
display: none;
|
||||||
|
|
||||||
|
&:not(:checked) ~ .off, &:checked ~ .on {
|
||||||
|
background-color: #6ee74a;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
div {
|
||||||
|
padding: 0 0.4em;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
|
||||||
|
&.off {
|
||||||
|
border-radius: 1em 0 0 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.on {
|
||||||
|
border-radius: 0 1em 1em 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
107
src/public/static/images/conversion.svg
Normal file
107
src/public/static/images/conversion.svg
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="128"
|
||||||
|
height="128"
|
||||||
|
viewBox="0 0 128 128"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||||
|
sodipodi:docname="conversion.svg"
|
||||||
|
inkscape:export-filename="icon3.png"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="true"
|
||||||
|
inkscape:zoom="8"
|
||||||
|
inkscape:cx="52.5625"
|
||||||
|
inkscape:cy="60.0625"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1016"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="27"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1">
|
||||||
|
<inkscape:grid
|
||||||
|
id="grid1"
|
||||||
|
units="px"
|
||||||
|
originx="0"
|
||||||
|
originy="0"
|
||||||
|
spacingx="1"
|
||||||
|
spacingy="1"
|
||||||
|
empcolor="#0099e5"
|
||||||
|
empopacity="0.30196078"
|
||||||
|
color="#0099e5"
|
||||||
|
opacity="0.14901961"
|
||||||
|
empspacing="16"
|
||||||
|
enabled="true"
|
||||||
|
visible="true" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<defs
|
||||||
|
id="defs1">
|
||||||
|
<inkscape:path-effect
|
||||||
|
effect="fillet_chamfer"
|
||||||
|
id="path-effect18"
|
||||||
|
is_visible="true"
|
||||||
|
lpeversion="1"
|
||||||
|
nodesatellites_param="F,0,0,1,0,2.2320508,0,1 @ F,0,1,1,0,2.2320508,0,1 @ F,0,1,1,0,2.2320508,0,1"
|
||||||
|
radius="0"
|
||||||
|
unit="px"
|
||||||
|
method="auto"
|
||||||
|
mode="F"
|
||||||
|
chamfer_steps="1"
|
||||||
|
flexible="false"
|
||||||
|
use_knot_distance="true"
|
||||||
|
apply_no_radius="true"
|
||||||
|
apply_with_radius="true"
|
||||||
|
only_selected="false"
|
||||||
|
hide_knots="false" />
|
||||||
|
</defs>
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g13"
|
||||||
|
transform="matrix(1.21875,0,0,1.21875,-13.728742,-14)">
|
||||||
|
<path
|
||||||
|
id="path14"
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:1.64103;stroke-linecap:round;stroke-linejoin:round"
|
||||||
|
d="m 30.956917,64 c 0,-18.126268 14.694243,-32.820511 32.820511,-32.820511 M 96.597939,64 c 0,18.126268 -14.694243,32.820511 -32.820511,32.820511"
|
||||||
|
sodipodi:nodetypes="cccc" />
|
||||||
|
<path
|
||||||
|
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.64103;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 57.213327,24.615384 6.564102,6.564103 -6.564102,6.564102"
|
||||||
|
id="path15" />
|
||||||
|
<path
|
||||||
|
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:1.64103;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 70.341532,103.38461 63.777429,96.820512 70.341532,90.25641"
|
||||||
|
id="path16" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
id="path17"
|
||||||
|
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="M 40 39 L 40 89 L 48 89 L 48 85 L 80 85 L 80 89 L 88 89 L 88 39 L 80 39 L 80 44 L 48 44 L 48 39 L 40 39 z M 42 44.5 L 46 44.5 L 46 47.5 L 42 47.5 L 42 44.5 z M 82 44.5 L 86 44.5 L 86 47.5 L 82 47.5 L 82 44.5 z M 48 48 L 80 48 L 80 80 L 48 80 L 48 48 z M 42 50.5 L 46 50.5 L 46 53.5 L 42 53.5 L 42 50.5 z M 82 50.5 L 86 50.5 L 86 53.5 L 82 53.5 L 82 50.5 z M 42 56.5 L 46 56.5 L 46 59.5 L 42 59.5 L 42 56.5 z M 82 56.5 L 86 56.5 L 86 59.5 L 82 59.5 L 82 56.5 z M 42 62.5 L 46 62.5 L 46 65.5 L 42 65.5 L 42 62.5 z M 82 62.5 L 86 62.5 L 86 65.5 L 82 65.5 L 82 62.5 z M 42 68.5 L 46 68.5 L 46 71.5 L 42 71.5 L 42 68.5 z M 82 68.5 L 86 68.5 L 86 71.5 L 82 71.5 L 82 68.5 z M 42 74.5 L 46 74.5 L 46 77.5 L 42 77.5 L 42 74.5 z M 82 74.5 L 86 74.5 L 86 77.5 L 82 77.5 L 82 74.5 z M 42 80.5 L 46 80.5 L 46 83.5 L 42 83.5 L 42 80.5 z M 82 80.5 L 86 80.5 L 86 83.5 L 82 83.5 L 82 80.5 z " />
|
||||||
|
<path
|
||||||
|
id="path18"
|
||||||
|
style="stroke-width:2;stroke-linecap:round;stroke-linejoin:round"
|
||||||
|
inkscape:transform-center-x="-2.25"
|
||||||
|
d="m 71.066987,65.116025 -9.633974,5.562179 A 1.2886751,1.2886751 29.999999 0 1 59.5,69.562178 V 58.437822 a 1.2886751,1.2886751 150 0 1 1.933013,-1.116026 l 9.633974,5.562179 a 1.2886752,1.2886752 90 0 1 0,2.23205 z"
|
||||||
|
inkscape:path-effect="#path-effect18"
|
||||||
|
inkscape:original-d="M 73,64 59.5,71.794229 V 56.205771 Z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 4.6 KiB |
129
src/public/static/images/icon3.svg
Normal file
129
src/public/static/images/icon3.svg
Normal file
@ -0,0 +1,129 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="128"
|
||||||
|
height="128"
|
||||||
|
viewBox="0 0 128 128"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||||
|
sodipodi:docname="icon3.svg"
|
||||||
|
inkscape:export-filename="icon3.png"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="false"
|
||||||
|
inkscape:zoom="4"
|
||||||
|
inkscape:cx="100.625"
|
||||||
|
inkscape:cy="71.125"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1016"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="27"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g13">
|
||||||
|
<inkscape:grid
|
||||||
|
id="grid1"
|
||||||
|
units="px"
|
||||||
|
originx="0"
|
||||||
|
originy="0"
|
||||||
|
spacingx="1"
|
||||||
|
spacingy="1"
|
||||||
|
empcolor="#0099e5"
|
||||||
|
empopacity="0.30196078"
|
||||||
|
color="#0099e5"
|
||||||
|
opacity="0.14901961"
|
||||||
|
empspacing="16"
|
||||||
|
enabled="true"
|
||||||
|
visible="false" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g13"
|
||||||
|
transform="matrix(1.21875,0,0,1.21875,-13.728742,-14)">
|
||||||
|
<circle
|
||||||
|
style="fill:#d7d7d7;fill-opacity:1;stroke:none;stroke-width:1.99937;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
|
||||||
|
id="path8"
|
||||||
|
cx="64"
|
||||||
|
cy="64"
|
||||||
|
r="48" />
|
||||||
|
<g
|
||||||
|
id="g6"
|
||||||
|
transform="matrix(0.94549245,0.64625754,-0.64625754,0.94549245,16.322685,-59.513608)"
|
||||||
|
inkscape:transform-center-x="21.678799"
|
||||||
|
inkscape:transform-center-y="-15.571769">
|
||||||
|
<path
|
||||||
|
style="fill:#cb5739;fill-opacity:1;stroke:#434343;stroke-width:1.99937;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
|
||||||
|
d="m 48,56 v 16 h 32 l 8,-8 -8,-8 z"
|
||||||
|
id="path2" />
|
||||||
|
<g
|
||||||
|
id="g5"
|
||||||
|
transform="translate(2.5)"
|
||||||
|
style="stroke:#434343;stroke-opacity:1">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#434343;stroke-width:1.99937;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
|
||||||
|
d="m 57,60 -4,4 4,4"
|
||||||
|
id="path3" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#434343;stroke-width:1.99937;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
|
||||||
|
d="m 61,68 5,-8"
|
||||||
|
id="path4" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#434343;stroke-width:1.99937;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1"
|
||||||
|
d="m 70,60 4,4 -4,4"
|
||||||
|
id="path5" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="g14"
|
||||||
|
inkscape:transform-center-x="-7.5111916"
|
||||||
|
inkscape:transform-center-y="2.6415215"
|
||||||
|
transform="matrix(1.1647434,0,0,1.1647434,-10.506912,-10.543579)">
|
||||||
|
<path
|
||||||
|
style="fill:#434343;fill-opacity:1;stroke:#434343;stroke-width:1.40891602;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-dasharray:none"
|
||||||
|
d="m 75.224968,50.967861 c 0,-0.542977 2.520211,-2.301228 4.451793,-2.109964 1.931582,0.191264 2.893913,2.267985 4.451792,3.230807 1.55788,0.962823 4.451793,1.235924 4.451793,1.847019 0,0.611095 -2.828267,0.995112 -3.929854,0.735062 -1.101587,-0.26005 -2.00587,-0.735062 -2.00587,-0.735062 0,0 -0.992464,4.709936 -2.967861,4.451792 -1.975397,-0.258143 -1.877599,-5.084776 -1.483931,-7.419654 -0.959231,0.180342 -2.967862,0.542978 -2.967862,0 z"
|
||||||
|
id="path9"
|
||||||
|
sodipodi:nodetypes="zzzzzczcz" />
|
||||||
|
<path
|
||||||
|
style="fill:#434343;fill-opacity:1;stroke:#434343;stroke-width:1.40891602;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-dasharray:none"
|
||||||
|
d="M 48.202298,89.998339 C 46.622528,88.418569 54.521379,83.679258 64,83.679258 c 9.478621,0 17.377472,4.739311 15.797702,6.319081 -1.579771,1.57977 -4.048161,-3.15954 -15.797702,-3.15954 -11.749541,0 -14.217931,4.73931 -15.797702,3.15954 z"
|
||||||
|
id="path10"
|
||||||
|
sodipodi:nodetypes="zzzzz" />
|
||||||
|
<path
|
||||||
|
style="fill:#434343;fill-opacity:1;stroke:#434343;stroke-width:1.40892;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none;stroke-opacity:1"
|
||||||
|
d="m 64,90.410017 c 1.57977,0 4.73931,0 4.73931,1.57977 0,1.579771 -3.15954,1.579771 -4.73931,1.579771 -1.57977,0 -4.73931,0 -4.73931,-1.579771 0,-1.57977 3.15954,-1.57977 4.73931,-1.57977 z"
|
||||||
|
id="path11"
|
||||||
|
sodipodi:nodetypes="zzzzz" />
|
||||||
|
<path
|
||||||
|
style="fill:#434343;fill-opacity:1;stroke:#434343;stroke-width:1.40891602;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-dasharray:none"
|
||||||
|
d="m 70.683501,47.557279 c 0.05473,-1.03795 1.098384,-1.720698 2.191237,-3.200114 1.092852,-1.479415 3.628351,-4.908029 6.407696,-5.223061 2.779343,-0.315033 13.286146,0.908682 13.91289,1.810272 0.847011,1.218452 -12.113125,-2.037935 -15.945302,1.886694 -3.832177,3.924627 -6.621251,5.76416 -6.566521,4.726209 z"
|
||||||
|
id="path12"
|
||||||
|
sodipodi:nodetypes="zzzszz" />
|
||||||
|
<path
|
||||||
|
style="fill:#434343;fill-opacity:1;stroke:#434343;stroke-width:1.40891602;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-dasharray:none"
|
||||||
|
d="m 45,80 c 1,0 7,-9 9,-9 2,0 7,3 10,3 3,0 8,-3 10,-3 2,0 8,9 9,9 1,0 -6,-11 -7,-12 -1,-1 -11,4 -12,4 -1,0 -11,-5 -12,-4 -1,1 -8,12 -7,12 z"
|
||||||
|
id="path13"
|
||||||
|
sodipodi:nodetypes="zzzzzzzzz" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 5.9 KiB |
92
src/public/static/images/metadata.svg
Normal file
92
src/public/static/images/metadata.svg
Normal file
@ -0,0 +1,92 @@
|
|||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="128"
|
||||||
|
height="128"
|
||||||
|
viewBox="0 0 128 128"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.4 (e7c3feb100, 2024-10-09)"
|
||||||
|
sodipodi:docname="metadata.svg"
|
||||||
|
inkscape:export-filename="icon3.png"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
showgrid="true"
|
||||||
|
inkscape:zoom="5.6568543"
|
||||||
|
inkscape:cx="56.303377"
|
||||||
|
inkscape:cy="65.672542"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:window-height="1016"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="27"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="g13">
|
||||||
|
<inkscape:grid
|
||||||
|
id="grid1"
|
||||||
|
units="px"
|
||||||
|
originx="0"
|
||||||
|
originy="0"
|
||||||
|
spacingx="1"
|
||||||
|
spacingy="1"
|
||||||
|
empcolor="#0099e5"
|
||||||
|
empopacity="0.30196078"
|
||||||
|
color="#0099e5"
|
||||||
|
opacity="0.14901961"
|
||||||
|
empspacing="16"
|
||||||
|
enabled="true"
|
||||||
|
visible="true" />
|
||||||
|
</sodipodi:namedview>
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1">
|
||||||
|
<g
|
||||||
|
id="g13"
|
||||||
|
transform="matrix(1.21875,0,0,1.21875,-13.728742,-14)">
|
||||||
|
<g
|
||||||
|
id="g6"
|
||||||
|
transform="matrix(1.7902099,0,0,1.7902099,-54.376425,-50.573434)"
|
||||||
|
inkscape:transform-center-x="-4.3636355"
|
||||||
|
style="stroke:#000000;stroke-opacity:1;fill:none;fill-opacity:1;stroke-width:0.91666661;stroke-dasharray:none">
|
||||||
|
<path
|
||||||
|
style="fill:none;fill-opacity:1;stroke:#000000;stroke-width:0.91666661;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;stroke-dasharray:none"
|
||||||
|
d="m 48,56 v 16 h 32 l 8,-8 -8,-8 z"
|
||||||
|
id="path2" />
|
||||||
|
<g
|
||||||
|
id="g5"
|
||||||
|
transform="translate(2.5)"
|
||||||
|
style="stroke:#000000;stroke-opacity:1;fill:none;fill-opacity:1;stroke-width:0.91666661;stroke-dasharray:none">
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:0.91666661;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;fill-opacity:1;stroke-dasharray:none"
|
||||||
|
d="m 57,60 -4,4 4,4"
|
||||||
|
id="path3" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:0.91666661;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;fill-opacity:1;stroke-dasharray:none"
|
||||||
|
d="m 61,68 5,-8"
|
||||||
|
id="path4" />
|
||||||
|
<path
|
||||||
|
style="fill:none;stroke:#000000;stroke-width:0.91666661;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:1;fill-opacity:1;stroke-dasharray:none"
|
||||||
|
d="m 70,60 4,4 -4,4"
|
||||||
|
id="path5" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.1 KiB |
@ -1,107 +0,0 @@
|
|||||||
let fileNodes = []
|
|
||||||
|
|
||||||
function makeFilm(meta) {
|
|
||||||
const file = document.getElementById("film-template").cloneNode(true)
|
|
||||||
file.querySelector(".title").innerText = meta.title
|
|
||||||
return file
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeSeries(meta) {
|
|
||||||
const file = document.getElementById("series-template").cloneNode(true)
|
|
||||||
file.querySelector(".title").innerText = meta.title
|
|
||||||
file.querySelector(".episodes .num").innerText = meta.episodes
|
|
||||||
return file
|
|
||||||
}
|
|
||||||
|
|
||||||
function makeFile(meta) {
|
|
||||||
let file
|
|
||||||
switch (meta.type) {
|
|
||||||
case "film":
|
|
||||||
file = makeFilm(meta)
|
|
||||||
break
|
|
||||||
case "series":
|
|
||||||
file = makeSeries(meta)
|
|
||||||
break
|
|
||||||
default:
|
|
||||||
throw new Error(`Invalid file type '${meta.type}'`)
|
|
||||||
}
|
|
||||||
|
|
||||||
file.title = meta.filename
|
|
||||||
file.id = null
|
|
||||||
file.classList.remove("template")
|
|
||||||
const url = new URL("/edit/", window.location.origin)
|
|
||||||
url.searchParams.set("f", meta.filename)
|
|
||||||
file.href = url.href
|
|
||||||
return file
|
|
||||||
}
|
|
||||||
|
|
||||||
/**
|
|
||||||
*
|
|
||||||
* @param {object[]} files
|
|
||||||
*/
|
|
||||||
function addFiles(files) {
|
|
||||||
const list = document.getElementById("files")
|
|
||||||
list.innerHTML = ""
|
|
||||||
const filenames = files.map(meta => meta.filename)
|
|
||||||
// Copy array because sort changes it in place
|
|
||||||
Array.from(filenames).sort().forEach(filename => {
|
|
||||||
const i = filenames.indexOf(filename)
|
|
||||||
const meta = files[i]
|
|
||||||
const file = makeFile(meta)
|
|
||||||
list.appendChild(file)
|
|
||||||
fileNodes.push([meta, file])
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
function sortFiles() {
|
|
||||||
const sortBy = document.getElementById("sort-by").value
|
|
||||||
const sortDesc = document.getElementById("sort-desc").checked
|
|
||||||
const filter = document.getElementById("filter").value
|
|
||||||
|
|
||||||
fileNodes.forEach(([meta, node]) => {
|
|
||||||
if (node.classList.contains(filter) || filter === "all") {
|
|
||||||
node.classList.remove("hidden")
|
|
||||||
} else {
|
|
||||||
node.classList.add("hidden")
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
let changed = false
|
|
||||||
do {
|
|
||||||
changed = false
|
|
||||||
for (let i = 0; i < fileNodes.length - 1; i++) {
|
|
||||||
/** @type {[object, HTMLElement]} */
|
|
||||||
const pair1 = fileNodes[i]
|
|
||||||
/** @type {[object, HTMLElement]} */
|
|
||||||
const pair2 = fileNodes[i + 1]
|
|
||||||
const [meta1, node1] = pair1
|
|
||||||
const [meta2, node2] = pair2
|
|
||||||
|
|
||||||
let swap = false
|
|
||||||
if (sortDesc) {
|
|
||||||
swap = !(meta1[sortBy] >= meta2[sortBy])
|
|
||||||
} else {
|
|
||||||
swap = !(meta2[sortBy] >= meta1[sortBy])
|
|
||||||
}
|
|
||||||
if (swap) {
|
|
||||||
fileNodes[i] = pair2
|
|
||||||
fileNodes[i + 1] = pair1
|
|
||||||
node2.parentElement.insertBefore(node2, node1)
|
|
||||||
changed = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} while (changed)
|
|
||||||
}
|
|
||||||
|
|
||||||
window.addEventListener("load", () => {
|
|
||||||
fetch("/api/files").then(res => {
|
|
||||||
return res.json()
|
|
||||||
}).then(files => {
|
|
||||||
addFiles(files)
|
|
||||||
sortFiles()
|
|
||||||
})
|
|
||||||
|
|
||||||
document.getElementById("sort-by").addEventListener("change", () => sortFiles())
|
|
||||||
document.getElementById("sort-desc").addEventListener("click", () => sortFiles())
|
|
||||||
document.getElementById("filter").addEventListener("change", () => sortFiles())
|
|
||||||
})
|
|
||||||
107
src/public/static/js/metadata.js
Normal file
107
src/public/static/js/metadata.js
Normal file
@ -0,0 +1,107 @@
|
|||||||
|
let fileNodes = []
|
||||||
|
|
||||||
|
function makeFilm(meta) {
|
||||||
|
const file = document.getElementById("film-template").cloneNode(true)
|
||||||
|
file.querySelector(".title").innerText = meta.title
|
||||||
|
return file
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeSeries(meta) {
|
||||||
|
const file = document.getElementById("series-template").cloneNode(true)
|
||||||
|
file.querySelector(".title").innerText = meta.title
|
||||||
|
file.querySelector(".episodes .num").innerText = meta.episodes
|
||||||
|
return file
|
||||||
|
}
|
||||||
|
|
||||||
|
function makeFile(meta) {
|
||||||
|
let file
|
||||||
|
switch (meta.type) {
|
||||||
|
case "film":
|
||||||
|
file = makeFilm(meta)
|
||||||
|
break
|
||||||
|
case "series":
|
||||||
|
file = makeSeries(meta)
|
||||||
|
break
|
||||||
|
default:
|
||||||
|
throw new Error(`Invalid file type '${meta.type}'`)
|
||||||
|
}
|
||||||
|
|
||||||
|
file.title = meta.filename
|
||||||
|
file.id = null
|
||||||
|
file.classList.remove("template")
|
||||||
|
const url = new URL("/metadata/edit/", window.location.origin)
|
||||||
|
url.searchParams.set("f", meta.filename)
|
||||||
|
file.href = url.href
|
||||||
|
return file
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param {object[]} files
|
||||||
|
*/
|
||||||
|
function addFiles(files) {
|
||||||
|
const list = document.getElementById("files")
|
||||||
|
list.innerHTML = ""
|
||||||
|
const filenames = files.map(meta => meta.filename)
|
||||||
|
// Copy array because sort changes it in place
|
||||||
|
Array.from(filenames).sort().forEach(filename => {
|
||||||
|
const i = filenames.indexOf(filename)
|
||||||
|
const meta = files[i]
|
||||||
|
const file = makeFile(meta)
|
||||||
|
list.appendChild(file)
|
||||||
|
fileNodes.push([meta, file])
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function sortFiles() {
|
||||||
|
const sortBy = document.getElementById("sort-by").value
|
||||||
|
const sortDesc = document.getElementById("sort-desc").checked
|
||||||
|
const filter = document.getElementById("filter").value
|
||||||
|
|
||||||
|
fileNodes.forEach(([meta, node]) => {
|
||||||
|
if (node.classList.contains(filter) || filter === "all") {
|
||||||
|
node.classList.remove("hidden")
|
||||||
|
} else {
|
||||||
|
node.classList.add("hidden")
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
let changed = false
|
||||||
|
do {
|
||||||
|
changed = false
|
||||||
|
for (let i = 0; i < fileNodes.length - 1; i++) {
|
||||||
|
/** @type {[object, HTMLElement]} */
|
||||||
|
const pair1 = fileNodes[i]
|
||||||
|
/** @type {[object, HTMLElement]} */
|
||||||
|
const pair2 = fileNodes[i + 1]
|
||||||
|
const [meta1, node1] = pair1
|
||||||
|
const [meta2, node2] = pair2
|
||||||
|
|
||||||
|
let swap = false
|
||||||
|
if (sortDesc) {
|
||||||
|
swap = !(meta1[sortBy] >= meta2[sortBy])
|
||||||
|
} else {
|
||||||
|
swap = !(meta2[sortBy] >= meta1[sortBy])
|
||||||
|
}
|
||||||
|
if (swap) {
|
||||||
|
fileNodes[i] = pair2
|
||||||
|
fileNodes[i + 1] = pair1
|
||||||
|
node2.parentElement.insertBefore(node2, node1)
|
||||||
|
changed = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} while (changed)
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("load", () => {
|
||||||
|
fetch("/api/files").then(res => {
|
||||||
|
return res.json()
|
||||||
|
}).then(files => {
|
||||||
|
addFiles(files)
|
||||||
|
sortFiles()
|
||||||
|
})
|
||||||
|
|
||||||
|
document.getElementById("sort-by").addEventListener("change", () => sortFiles())
|
||||||
|
document.getElementById("sort-desc").addEventListener("click", () => sortFiles())
|
||||||
|
document.getElementById("filter").addEventListener("change", () => sortFiles())
|
||||||
|
})
|
||||||
Loading…
x
Reference in New Issue
Block a user