Merge main into ph
This commit is contained in:
@@ -10,6 +10,7 @@
|
||||
import Rabbit from "./routes/Rabbit.svelte";
|
||||
import Movies from "./routes/Movies.svelte";
|
||||
import TvShows from "./routes/TvShows.svelte";
|
||||
import Anime from "./routes/Anime.svelte";
|
||||
import Music from "./routes/Music.svelte";
|
||||
import Profile from "./routes/Profile.svelte";
|
||||
import Settings from "./routes/Settings.svelte";
|
||||
@@ -17,6 +18,7 @@
|
||||
import { API, getAccessToken } from "./utils/api.js";
|
||||
import { refreshMovieCount } from "./stores/movieStore.js";
|
||||
import { refreshTvShowCount } from "./stores/tvStore.js";
|
||||
import { refreshAnimeCount } from "./stores/animeStore.js";
|
||||
import { refreshMusicCount } from "./stores/musicStore.js";
|
||||
import { refreshRabbitCount } from "./stores/rabbitStore.js";
|
||||
import { fetchTrashItems } from "./stores/trashStore.js";
|
||||
@@ -36,6 +38,7 @@
|
||||
await Promise.all([
|
||||
refreshMovieCount(),
|
||||
refreshTvShowCount(),
|
||||
refreshAnimeCount(),
|
||||
refreshMusicCount(),
|
||||
refreshRabbitCount(),
|
||||
fetchTrashItems()
|
||||
@@ -88,6 +91,7 @@
|
||||
if (token) {
|
||||
refreshMovieCount();
|
||||
refreshTvShowCount();
|
||||
refreshAnimeCount();
|
||||
refreshMusicCount();
|
||||
refreshRabbitCount();
|
||||
fetchTrashItems();
|
||||
@@ -154,6 +158,7 @@
|
||||
<Route path="/files" component={Files} />
|
||||
<Route path="/movies" component={Movies} />
|
||||
<Route path="/tv" component={TvShows} />
|
||||
<Route path="/anime" component={Anime} />
|
||||
<Route path="/music" component={Music} />
|
||||
<Route path="/rabbit" component={Rabbit} />
|
||||
<Route path="/profile" component={Profile} />
|
||||
|
||||
611
client/src/components/MatchModal.svelte
Normal file
611
client/src/components/MatchModal.svelte
Normal file
@@ -0,0 +1,611 @@
|
||||
<script>
|
||||
export let show = false;
|
||||
export let headerTitle = "Eşlemeyi Düzelt";
|
||||
export let fileLabel = "Dosya";
|
||||
export let fileName = "";
|
||||
export let sizeText = "";
|
||||
export let titleLabel = "Film Adı";
|
||||
export let yearLabel = "Yıl";
|
||||
export let titlePlaceholder = "";
|
||||
export let yearPlaceholder = "YYYY";
|
||||
export let showYearInput = true;
|
||||
export let titleValue = "";
|
||||
export let yearValue = "";
|
||||
export let searching = false;
|
||||
export let results = [];
|
||||
export let showEmpty = false;
|
||||
export let emptyText = "Aramanla eşleşen öğe bulunamadı";
|
||||
export let applyingId = null;
|
||||
export let onClose = () => {};
|
||||
export let onTitleInput = () => {};
|
||||
export let onYearInput = () => {};
|
||||
export let onSelect = () => {};
|
||||
</script>
|
||||
|
||||
{#if show}
|
||||
<div class="match-overlay" on:click={onClose}>
|
||||
<div class="match-overlay-content" on:click|stopPropagation>
|
||||
<button class="match-close" on:click={onClose} aria-label="Kapat">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
|
||||
<div class="match-header">
|
||||
<h3 class="match-title">
|
||||
<i class="fa-solid fa-wand-magic-sparkles"></i>
|
||||
{headerTitle}
|
||||
</h3>
|
||||
<div class="match-subtitle">
|
||||
{#if fileName}
|
||||
<span class="match-location" title={fileName}>
|
||||
<i class="fa-solid fa-file"></i>
|
||||
<span class="location-text">{fileLabel}: {fileName}</span>
|
||||
</span>
|
||||
{/if}
|
||||
{#if fileName && sizeText}
|
||||
<span class="match-separator">|</span>
|
||||
{/if}
|
||||
{#if sizeText}
|
||||
<span class="match-size">
|
||||
<i class="fa-solid fa-database"></i>
|
||||
{sizeText}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="match-body">
|
||||
<div class="match-inputs">
|
||||
<div class="input-group title-input">
|
||||
<label for="match-title">{titleLabel}</label>
|
||||
<input
|
||||
id="match-title"
|
||||
type="text"
|
||||
bind:value={titleValue}
|
||||
on:input={onTitleInput}
|
||||
placeholder={titlePlaceholder}
|
||||
/>
|
||||
</div>
|
||||
{#if showYearInput}
|
||||
<div class="input-group year-input">
|
||||
<label for="match-year">{yearLabel}</label>
|
||||
<input
|
||||
id="match-year"
|
||||
type="text"
|
||||
bind:value={yearValue}
|
||||
on:input={onYearInput}
|
||||
placeholder={yearPlaceholder}
|
||||
maxlength="4"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<div class="match-divider"></div>
|
||||
|
||||
{#if searching}
|
||||
<div class="search-loading">
|
||||
<i class="fa-solid fa-spinner fa-spin"></i>
|
||||
Aranıyor...
|
||||
</div>
|
||||
{:else if results.length > 0}
|
||||
<div class="search-results">
|
||||
{#each results as result}
|
||||
<div
|
||||
class="result-item"
|
||||
class:applying={applyingId === result.id}
|
||||
on:click={() => onSelect(result)}
|
||||
>
|
||||
<div class="result-poster">
|
||||
{#if result.poster}
|
||||
<img src={result.poster} alt={result.title} loading="lazy" />
|
||||
{:else}
|
||||
<div class="result-poster-placeholder">
|
||||
<i class="fa-regular fa-image"></i>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="result-info">
|
||||
<div class="result-title">{result.title}</div>
|
||||
<div class="result-meta">
|
||||
{#if result.year}
|
||||
<span class="result-year">
|
||||
<i class="fa-solid fa-calendar-days"></i>
|
||||
{result.year}
|
||||
</span>
|
||||
{/if}
|
||||
{#if result.runtime}
|
||||
<span class="result-separator">•</span>
|
||||
<span class="result-runtime">
|
||||
<i class="fa-solid fa-clock"></i>
|
||||
{result.runtime} dk
|
||||
</span>
|
||||
{/if}
|
||||
{#if result.status}
|
||||
<span class="result-separator">•</span>
|
||||
<span class="result-status">
|
||||
<i class="fa-solid fa-signal"></i>
|
||||
{result.status}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if result.genres && result.genres.length > 0}
|
||||
<div class="result-genres">
|
||||
{result.genres.slice(0, 3).join(", ")}
|
||||
</div>
|
||||
{/if}
|
||||
{#if result.cast && result.cast.length > 0}
|
||||
<div class="result-cast">
|
||||
<i class="fa-solid fa-user"></i>
|
||||
{result.cast.join(", ")}
|
||||
</div>
|
||||
{/if}
|
||||
{#if result.overview}
|
||||
<div class="result-overview">{result.overview}</div>
|
||||
{/if}
|
||||
</div>
|
||||
{#if $$slots.resultActions}
|
||||
<div class="result-actions" on:click|stopPropagation>
|
||||
<slot name="resultActions" {result} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else if showEmpty}
|
||||
<div class="search-empty">{emptyText}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<style>
|
||||
.match-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 5000;
|
||||
background: rgba(10, 10, 10, 0.28);
|
||||
backdrop-filter: blur(4px);
|
||||
padding: 56px 32px;
|
||||
}
|
||||
|
||||
.match-overlay-content {
|
||||
position: relative;
|
||||
width: min(60vw, 1100px);
|
||||
max-height: 60vh;
|
||||
border-radius: 18px;
|
||||
background: rgba(12, 12, 12, 0.92);
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.match-close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 20px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #fafafa;
|
||||
border: none;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.match-close:hover {
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.match-header {
|
||||
padding: 32px 48px 24px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.match-title {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: #fafafa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.match-title i {
|
||||
color: #f5b333;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.match-subtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
color: #c7c7c7;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.match-location {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.match-location .location-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.match-size {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.match-location i,
|
||||
.match-size i {
|
||||
color: #8d8d8d;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.match-separator {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.match-body {
|
||||
padding: 28px 48px 36px;
|
||||
color: #f5f5f5;
|
||||
overflow-y: auto;
|
||||
max-height: calc(60vh - 120px);
|
||||
}
|
||||
|
||||
.match-body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.match-body::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.match-body::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 4px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.match-body::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.match-inputs {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.input-group.title-input {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.input-group.year-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #c7c7c7;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #f5f5f5;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.input-group input:focus {
|
||||
border-color: rgba(245, 179, 51, 0.5);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.input-group input::placeholder {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.match-divider {
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
.search-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 40px 20px;
|
||||
color: #c7c7c7;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.search-loading i {
|
||||
font-size: 20px;
|
||||
color: #f5b333;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.result-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(245, 179, 51, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.result-item.applying {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.result-item.applying::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid rgba(245, 179, 51, 0.3);
|
||||
border-top: 2px solid #f5b333;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
.result-poster {
|
||||
width: 80px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.result-poster img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.result-poster-placeholder {
|
||||
color: #7a7a7a;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.result-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.result-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: #c7c7c7;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.result-separator {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.result-year,
|
||||
.result-runtime,
|
||||
.result-status {
|
||||
color: #c7c7c7;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.result-year i,
|
||||
.result-runtime i,
|
||||
.result-status i {
|
||||
font-size: 13px;
|
||||
color: #8d8d8d;
|
||||
}
|
||||
|
||||
.result-genres {
|
||||
font-size: 12px;
|
||||
color: #8d8d8d;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.result-cast {
|
||||
font-size: 12px;
|
||||
color: #9f9f9f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.result-cast i {
|
||||
color: #ffc107;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.result-overview {
|
||||
font-size: 13px;
|
||||
color: #9f9f9f;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.result-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
margin-left: auto;
|
||||
width: 160px;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.result-actions label {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-rows: auto auto;
|
||||
row-gap: 6px;
|
||||
font-size: 12px;
|
||||
color: #c7c7c7;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.4px;
|
||||
width: 100%;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.result-actions select {
|
||||
display: block;
|
||||
margin: 0;
|
||||
align-self: flex-start;
|
||||
padding: 8px 10px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #f5f5f5;
|
||||
font-size: 13px;
|
||||
outline: none;
|
||||
width: 44.5px;
|
||||
min-width: 44.5px;
|
||||
max-width: 44.5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
:global(.match-modal-select) {
|
||||
width: 44.5px;
|
||||
min-width: 44.5px;
|
||||
max-width: 44.5px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.match-overlay {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.match-overlay-content {
|
||||
width: 96vw;
|
||||
}
|
||||
|
||||
.match-header {
|
||||
padding: 28px 32px 20px;
|
||||
}
|
||||
|
||||
.match-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.match-body {
|
||||
padding: 24px 32px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
.result-item {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.result-actions {
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.match-header {
|
||||
padding: 24px 24px 18px;
|
||||
}
|
||||
|
||||
.match-body {
|
||||
padding: 20px 24px 28px;
|
||||
}
|
||||
|
||||
.match-inputs {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.input-group.title-input,
|
||||
.input-group.year-input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -3,6 +3,7 @@ import { Link } from "svelte-routing";
|
||||
import { createEventDispatcher, onDestroy, onMount } from "svelte";
|
||||
import { movieCount } from "../stores/movieStore.js";
|
||||
import { tvShowCount } from "../stores/tvStore.js";
|
||||
import { animeCount } from "../stores/animeStore.js";
|
||||
import { musicCount } from "../stores/musicStore.js";
|
||||
import { rabbitCount } from "../stores/rabbitStore.js";
|
||||
import { trashCount } from "../stores/trashStore.js";
|
||||
@@ -12,6 +13,7 @@ import { apiFetch, getAccessToken } from "../utils/api.js";
|
||||
const dispatch = createEventDispatcher();
|
||||
let hasMovies = false;
|
||||
let hasShows = false;
|
||||
let hasAnime = false;
|
||||
let hasTrash = false;
|
||||
let hasMusic = false;
|
||||
let hasRabbit = false;
|
||||
@@ -20,7 +22,7 @@ let hasRabbit = false;
|
||||
const diskSpaceStore = writable({ totalGB: '0', usedGB: '0', usedPercent: 0 });
|
||||
let diskSpace;
|
||||
let hasMedia = false;
|
||||
$: hasMedia = hasMovies || hasShows || hasMusic || hasRabbit;
|
||||
$: hasMedia = hasMovies || hasShows || hasAnime || hasMusic || hasRabbit;
|
||||
|
||||
// Store subscription'ı temizlemek için
|
||||
let unsubscribeDiskSpace;
|
||||
@@ -43,6 +45,10 @@ $: hasMedia = hasMovies || hasShows || hasMusic || hasRabbit;
|
||||
const unsubscribeTv = tvShowCount.subscribe((count) => {
|
||||
hasShows = (count ?? 0) > 0;
|
||||
});
|
||||
|
||||
const unsubscribeAnime = animeCount.subscribe((count) => {
|
||||
hasAnime = (count ?? 0) > 0;
|
||||
});
|
||||
|
||||
const unsubscribeTrash = trashCount.subscribe((count) => {
|
||||
hasTrash = (count ?? 0) > 0;
|
||||
@@ -58,6 +64,7 @@ const unsubscribeRabbit = rabbitCount.subscribe((count) => {
|
||||
onDestroy(() => {
|
||||
unsubscribeMovie();
|
||||
unsubscribeTv();
|
||||
unsubscribeAnime();
|
||||
unsubscribeTrash();
|
||||
unsubscribeMusic();
|
||||
unsubscribeRabbit();
|
||||
@@ -216,6 +223,20 @@ const unsubscribeRabbit = rabbitCount.subscribe((count) => {
|
||||
</Link>
|
||||
{/if}
|
||||
|
||||
{#if hasAnime}
|
||||
<Link
|
||||
to="/anime"
|
||||
class="item"
|
||||
getProps={({ isCurrent }) => ({
|
||||
class: isCurrent ? "item active" : "item",
|
||||
})}
|
||||
on:click={handleLinkClick}
|
||||
>
|
||||
<i class="fa-solid fa-ghost icon"></i>
|
||||
Anime
|
||||
</Link>
|
||||
{/if}
|
||||
|
||||
{#if hasMusic}
|
||||
<Link
|
||||
to="/music"
|
||||
|
||||
1870
client/src/routes/Anime.svelte
Normal file
1870
client/src/routes/Anime.svelte
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,9 +1,11 @@
|
||||
<script>
|
||||
import { onMount, tick } from "svelte";
|
||||
import MatchModal from "../components/MatchModal.svelte";
|
||||
import { API, apiFetch, moveEntry, renameFolder, copyEntry } from "../utils/api.js";
|
||||
import { cleanFileName, extractTitleAndYear } from "../utils/filename.js";
|
||||
import { refreshMovieCount } from "../stores/movieStore.js";
|
||||
import { refreshTvShowCount } from "../stores/tvStore.js";
|
||||
import { fetchTrashItems } from "../stores/trashStore.js";
|
||||
import {
|
||||
activeSearchTerm,
|
||||
setSearchScope,
|
||||
@@ -95,6 +97,20 @@
|
||||
};
|
||||
}
|
||||
|
||||
function displayFileName(entry) {
|
||||
if (!entry?.name) return "";
|
||||
if (entry.isDirectory) {
|
||||
const dirLabel = entry.displayName || entry.name;
|
||||
return cleanFileName(dirLabel);
|
||||
}
|
||||
const baseName = entry.name.split("/").pop() || "";
|
||||
const withoutExt = baseName.replace(/\.[^.]+$/, "");
|
||||
if (/S\d{1,2}xE\d{1,2}/i.test(withoutExt)) {
|
||||
return withoutExt;
|
||||
}
|
||||
return cleanFileName(entry.name);
|
||||
}
|
||||
|
||||
function buildDirectoryEntries(fileList) {
|
||||
const directories = new Map();
|
||||
|
||||
@@ -1181,7 +1197,7 @@
|
||||
}
|
||||
|
||||
await loadFiles();
|
||||
await Promise.all([refreshMovieCount(), refreshTvShowCount()]);
|
||||
await Promise.all([refreshMovieCount(), refreshTvShowCount(), fetchTrashItems()]);
|
||||
|
||||
if (errors.length > 0) {
|
||||
alert("Silme hatası: " + errors[0]);
|
||||
@@ -1430,7 +1446,7 @@
|
||||
}
|
||||
|
||||
await loadFiles();
|
||||
await Promise.all([refreshMovieCount(), refreshTvShowCount()]);
|
||||
await Promise.all([refreshMovieCount(), refreshTvShowCount(), fetchTrashItems()]);
|
||||
selectedItems = new Set(
|
||||
[...selectedItems].filter((name) => name !== item.name),
|
||||
);
|
||||
@@ -1735,6 +1751,7 @@
|
||||
if (msg.type === "fileUpdate") {
|
||||
console.log("📸 Yeni thumbnail bildirimi:", msg.path);
|
||||
await loadFiles();
|
||||
fetchTrashItems().catch(() => null);
|
||||
}
|
||||
if (msg.type === "manualMatch") {
|
||||
console.log("🔗 Manuel eşleştirme bildirimi:", msg);
|
||||
@@ -2155,9 +2172,9 @@
|
||||
{:else}
|
||||
<div
|
||||
class="folder-name"
|
||||
title={cleanFileName(entry.displayName)}
|
||||
title={displayFileName(entry)}
|
||||
>
|
||||
{cleanFileName(entry.displayName)}
|
||||
{displayFileName(entry)}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -2175,8 +2192,8 @@
|
||||
</div>
|
||||
{/if}
|
||||
<div class="info">
|
||||
<div class="name" title={cleanFileName(entry.name)}>
|
||||
{cleanFileName(entry.name)}
|
||||
<div class="name" title={displayFileName(entry)}>
|
||||
{displayFileName(entry)}
|
||||
</div>
|
||||
<div class="size">
|
||||
{#if entry.progressText}
|
||||
@@ -2687,127 +2704,27 @@
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
{#if showMatchModal && matchingFile}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="match-overlay" on:click={closeMatchModal}>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="match-overlay-content" on:click|stopPropagation>
|
||||
<button class="match-close" on:click={closeMatchModal} aria-label="Kapat">
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
|
||||
<div class="match-header">
|
||||
<h3 class="match-title">
|
||||
<i class="fa-solid fa-wand-magic-sparkles"></i>
|
||||
Eşlemeyi Düzelt
|
||||
</h3>
|
||||
<div class="match-subtitle">
|
||||
<span class="match-location" title={matchingFile.name}>
|
||||
<i class="fa-solid fa-file"></i>
|
||||
<span class="location-text">Dosya: {matchingFile.name.split('/').pop()}</span>
|
||||
</span>
|
||||
<span class="match-separator">|</span>
|
||||
<span class="match-size">
|
||||
<i class="fa-solid fa-database"></i>
|
||||
{formatSize(matchingFile.size)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="match-body">
|
||||
<div class="match-inputs">
|
||||
<div class="input-group title-input">
|
||||
<label for="match-title">{matchType === "series" ? "Dizi Adı" : "Film Adı"}</label>
|
||||
<input
|
||||
id="match-title"
|
||||
type="text"
|
||||
bind:value={matchTitle}
|
||||
on:input={handleSearchInput}
|
||||
placeholder={matchType === "series" ? "Dizi adını girin" : "Film adını girin"}
|
||||
/>
|
||||
</div>
|
||||
<div class="input-group year-input">
|
||||
<label for="match-year">Yıl</label>
|
||||
<input
|
||||
id="match-year"
|
||||
type="text"
|
||||
bind:value={matchYear}
|
||||
on:input={handleSearchInput}
|
||||
placeholder="YYYY"
|
||||
maxlength="4"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="match-divider"></div>
|
||||
|
||||
{#if searching}
|
||||
<div class="search-loading">
|
||||
<i class="fa-solid fa-spinner fa-spin"></i>
|
||||
Aranıyor...
|
||||
</div>
|
||||
{:else if searchResults.length > 0}
|
||||
<div class="search-results">
|
||||
{#each searchResults as result}
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div class="result-item" class:applying={applyingResultId === result.id} on:click={() => selectMatchResult(result)}>
|
||||
<div class="result-poster">
|
||||
{#if result.poster}
|
||||
<img src={result.poster} alt={result.title} loading="lazy" />
|
||||
{:else}
|
||||
<div class="result-poster-placeholder">
|
||||
<i class="fa-regular fa-image"></i>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="result-info">
|
||||
<div class="result-title">{result.title}</div>
|
||||
<div class="result-meta">
|
||||
{#if result.year}
|
||||
<span class="result-year">
|
||||
<i class="fa-solid fa-calendar-days"></i>
|
||||
{result.year}
|
||||
</span>
|
||||
{/if}
|
||||
{#if result.runtime}
|
||||
<span class="result-separator">•</span>
|
||||
<span class="result-runtime">
|
||||
<i class="fa-solid fa-clock"></i>
|
||||
{result.runtime} dk
|
||||
</span>
|
||||
{/if}
|
||||
{#if result.status}
|
||||
<span class="result-separator">•</span>
|
||||
<span class="result-status">
|
||||
<i class="fa-solid fa-signal"></i>
|
||||
{result.status}
|
||||
</span>
|
||||
{/if}
|
||||
</div>
|
||||
{#if result.genres && result.genres.length > 0}
|
||||
<div class="result-genres">{result.genres.slice(0, 3).join(", ")}</div>
|
||||
{/if}
|
||||
{#if result.cast && result.cast.length > 0}
|
||||
<div class="result-cast">
|
||||
<i class="fa-solid fa-user"></i>
|
||||
{result.cast.join(", ")}
|
||||
</div>
|
||||
{/if}
|
||||
{#if result.overview}
|
||||
<div class="result-overview">{result.overview}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
<MatchModal
|
||||
show={showMatchModal && !!matchingFile}
|
||||
headerTitle="Eşlemeyi Düzelt"
|
||||
fileLabel="Dosya"
|
||||
fileName={matchingFile ? matchingFile.name.split("/").pop() : ""}
|
||||
sizeText={matchingFile ? formatSize(matchingFile.size) : ""}
|
||||
titleLabel={matchType === "series" ? "Dizi Adı" : "Film Adı"}
|
||||
yearLabel="Yıl"
|
||||
titlePlaceholder={matchType === "series" ? "Dizi adını girin" : "Film adını girin"}
|
||||
showYearInput={true}
|
||||
bind:titleValue={matchTitle}
|
||||
bind:yearValue={matchYear}
|
||||
searching={searching}
|
||||
results={searchResults}
|
||||
showEmpty={false}
|
||||
applyingId={applyingResultId}
|
||||
onClose={closeMatchModal}
|
||||
onTitleInput={handleSearchInput}
|
||||
onYearInput={handleSearchInput}
|
||||
onSelect={selectMatchResult}
|
||||
/>
|
||||
|
||||
<style>
|
||||
:root {
|
||||
@@ -4032,396 +3949,4 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Eşleştirme Modal Stilleri */
|
||||
.match-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 5000;
|
||||
background: rgba(10, 10, 10, 0.28);
|
||||
backdrop-filter: blur(4px);
|
||||
padding: 56px 32px;
|
||||
}
|
||||
|
||||
.match-overlay-content {
|
||||
position: relative;
|
||||
width: min(60vw, 1100px);
|
||||
max-height: 60vh;
|
||||
border-radius: 18px;
|
||||
background: rgba(12, 12, 12, 0.92);
|
||||
box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.match-close {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 20px;
|
||||
background: rgba(0, 0, 0, 0.55);
|
||||
color: #fafafa;
|
||||
border: none;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
font-size: 20px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background 0.2s ease;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.match-close:hover {
|
||||
background: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.match-header {
|
||||
padding: 32px 48px 24px;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.match-title {
|
||||
margin: 0 0 12px 0;
|
||||
font-size: 26px;
|
||||
font-weight: 600;
|
||||
color: #fafafa;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.match-title i {
|
||||
color: #f5b333;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.match-subtitle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 14px;
|
||||
color: #c7c7c7;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.match-location {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
max-width: 60%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.match-location .location-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.match-size {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.match-location i,
|
||||
.match-size i {
|
||||
color: #8d8d8d;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.match-separator {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.match-body {
|
||||
padding: 28px 48px 36px;
|
||||
color: #f5f5f5;
|
||||
overflow-y: auto;
|
||||
max-height: calc(60vh - 120px);
|
||||
}
|
||||
|
||||
.match-body::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
.match-body::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.match-body::-webkit-scrollbar-thumb {
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
border-radius: 4px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.match-body::-webkit-scrollbar-thumb:hover {
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
}
|
||||
|
||||
.match-inputs {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.input-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.input-group.title-input {
|
||||
flex: 3;
|
||||
}
|
||||
|
||||
.input-group.year-input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.input-group label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: #c7c7c7;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
|
||||
.input-group input {
|
||||
padding: 12px 16px;
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15);
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
color: #f5f5f5;
|
||||
font-size: 15px;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.input-group input:focus {
|
||||
border-color: rgba(245, 179, 51, 0.5);
|
||||
background: rgba(255, 255, 255, 0.12);
|
||||
}
|
||||
|
||||
.input-group input::placeholder {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.match-divider {
|
||||
height: 1px;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
margin: 0 0 24px 0;
|
||||
}
|
||||
|
||||
.search-loading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 12px;
|
||||
padding: 40px 20px;
|
||||
color: #c7c7c7;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.search-loading i {
|
||||
font-size: 20px;
|
||||
color: #f5b333;
|
||||
}
|
||||
|
||||
.search-results {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.result-item {
|
||||
display: flex;
|
||||
gap: 16px;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.result-item:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
border-color: rgba(245, 179, 51, 0.3);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.result-item.applying {
|
||||
opacity: 0.6;
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.result-item.applying::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border: 2px solid rgba(245, 179, 51, 0.3);
|
||||
border-top: 2px solid #f5b333;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: translate(-50%, -50%) rotate(0deg); }
|
||||
100% { transform: translate(-50%, -50%) rotate(360deg); }
|
||||
}
|
||||
|
||||
.result-poster {
|
||||
width: 80px;
|
||||
height: 120px;
|
||||
flex-shrink: 0;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: rgba(255, 255, 255, 0.08);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.result-poster img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.result-poster-placeholder {
|
||||
color: #7a7a7a;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.result-info {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.result-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #fafafa;
|
||||
}
|
||||
|
||||
.result-meta {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
color: #c7c7c7;
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.result-separator {
|
||||
color: #7a7a7a;
|
||||
}
|
||||
|
||||
.result-year,
|
||||
.result-runtime,
|
||||
.result-status {
|
||||
color: #c7c7c7;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.result-year i,
|
||||
.result-runtime i,
|
||||
.result-status i {
|
||||
font-size: 13px;
|
||||
color: #8d8d8d;
|
||||
}
|
||||
|
||||
.result-genres {
|
||||
font-size: 12px;
|
||||
color: #8d8d8d;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.3px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.result-cast {
|
||||
font-size: 12px;
|
||||
color: #9f9f9f;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.result-cast i {
|
||||
color: #ffc107;
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.result-overview {
|
||||
font-size: 13px;
|
||||
color: #9f9f9f;
|
||||
line-height: 1.5;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.match-overlay {
|
||||
padding: 32px 16px;
|
||||
}
|
||||
|
||||
.match-overlay-content {
|
||||
width: 96vw;
|
||||
}
|
||||
|
||||
.match-header {
|
||||
padding: 28px 32px 20px;
|
||||
}
|
||||
|
||||
.match-title {
|
||||
font-size: 22px;
|
||||
}
|
||||
|
||||
.match-body {
|
||||
padding: 24px 32px 32px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.match-header {
|
||||
padding: 24px 24px 18px;
|
||||
}
|
||||
|
||||
.match-body {
|
||||
padding: 20px 24px 28px;
|
||||
}
|
||||
|
||||
.match-inputs {
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.input-group.title-input,
|
||||
.input-group.year-input {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script>
|
||||
import { onMount } from "svelte";
|
||||
import MatchModal from "../components/MatchModal.svelte";
|
||||
import { API, apiFetch, getAccessToken, withToken } from "../utils/api.js"; // ✅ apiFetch eklendi
|
||||
|
||||
let torrents = [];
|
||||
@@ -16,6 +17,19 @@
|
||||
let subtitleLang = "en";
|
||||
let subtitleLabel = "Custom Subtitles";
|
||||
|
||||
let showMailruMatchModal = false;
|
||||
let mailruMatchQuery = "";
|
||||
let mailruMatchYear = "";
|
||||
let mailruMatchResults = [];
|
||||
let mailruSearching = false;
|
||||
let mailruSearchTimer;
|
||||
let mailruApplyingId = null;
|
||||
let activeMailruJob = null;
|
||||
let activeMailruMenu = null;
|
||||
const mailruSelections = new Map();
|
||||
const mailruSeasonOptions = Array.from({ length: 20 }, (_, i) => i + 1);
|
||||
const mailruEpisodeOptions = Array.from({ length: 200 }, (_, i) => i + 1);
|
||||
|
||||
// Player kontrolleri
|
||||
let videoEl;
|
||||
let isPlaying = false;
|
||||
@@ -115,8 +129,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
function normalizeMailRuUrl(value) {
|
||||
if (!value || typeof value !== "string") return null;
|
||||
try {
|
||||
const url = new URL(value.trim());
|
||||
if (url.protocol !== "https:") return null;
|
||||
const host = url.hostname.toLowerCase();
|
||||
if (!host.endsWith("mail.ru")) return null;
|
||||
return url.toString();
|
||||
} catch {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleUrlInput() {
|
||||
const input = prompt("Magnet, YouTube veya Pornhub URL girin:");
|
||||
const input = prompt("Magnet, YouTube, Mail.ru veya Pornhub URL girin:");
|
||||
if (!input) return;
|
||||
if (isMagnetLink(input)) {
|
||||
await apiFetch("/api/transfer", {
|
||||
@@ -157,8 +184,29 @@
|
||||
await list();
|
||||
return;
|
||||
}
|
||||
const normalizedMailRu = normalizeMailRuUrl(input);
|
||||
if (normalizedMailRu) {
|
||||
const resp = await apiFetch("/api/mailru/download", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ url: normalizedMailRu })
|
||||
});
|
||||
if (!resp.ok) {
|
||||
const data = await resp.json().catch(() => null);
|
||||
alert(data?.error || "Mail.ru indirmesi başlatılamadı");
|
||||
return;
|
||||
}
|
||||
const data = await resp.json().catch(() => null);
|
||||
await list();
|
||||
const jobId = data?.jobId;
|
||||
const job = jobId ? torrents.find((t) => t.infoHash === jobId) : null;
|
||||
if (job) {
|
||||
openMailruMatchModal(job);
|
||||
}
|
||||
return;
|
||||
}
|
||||
alert(
|
||||
"Yalnızca magnet linkleri, YouTube (https://www.youtube.com/watch?v=...) veya Pornhub (https://www.pornhub.com/view_video.php?viewkey=...) URL'leri destekleniyor."
|
||||
"Yalnızca magnet linkleri, https://www.youtube.com/watch?v=... formatındaki YouTube URL'leri, mail.ru linkleri veya Pornhub (https://www.pornhub.com/view_video.php?viewkey=...) URL'leri destekleniyor."
|
||||
);
|
||||
}
|
||||
|
||||
@@ -233,6 +281,101 @@
|
||||
totalDownloadSpeed = torrents.reduce((sum, t) => sum + (t.downloadSpeed || 0), 0);
|
||||
}
|
||||
|
||||
function toggleMailruMenu(infoHash) {
|
||||
activeMailruMenu = activeMailruMenu === infoHash ? null : infoHash;
|
||||
}
|
||||
|
||||
function openMailruMatchModal(job) {
|
||||
if (!job) return;
|
||||
activeMailruJob = job;
|
||||
mailruMatchQuery = "";
|
||||
mailruMatchYear = "";
|
||||
mailruMatchResults = [];
|
||||
mailruSearching = false;
|
||||
mailruSelections.clear();
|
||||
showMailruMatchModal = true;
|
||||
}
|
||||
|
||||
function closeMailruMatchModal() {
|
||||
showMailruMatchModal = false;
|
||||
activeMailruJob = null;
|
||||
mailruMatchQuery = "";
|
||||
mailruMatchYear = "";
|
||||
mailruMatchResults = [];
|
||||
mailruSearching = false;
|
||||
mailruSelections.clear();
|
||||
}
|
||||
|
||||
async function searchMailruSeries() {
|
||||
const query = mailruMatchQuery.trim();
|
||||
if (!query) return;
|
||||
mailruSearching = true;
|
||||
mailruMatchResults = [];
|
||||
try {
|
||||
const params = new URLSearchParams({
|
||||
query,
|
||||
type: "series",
|
||||
scope: "anime"
|
||||
});
|
||||
if (mailruMatchYear.trim()) {
|
||||
params.set("year", mailruMatchYear.trim());
|
||||
}
|
||||
const resp = await apiFetch(`/api/search/metadata?${params.toString()}`);
|
||||
if (resp.ok) {
|
||||
const data = await resp.json();
|
||||
mailruMatchResults = data.results || [];
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn("Mail.ru eşleştirme araması başarısız:", err);
|
||||
} finally {
|
||||
mailruSearching = false;
|
||||
}
|
||||
}
|
||||
|
||||
function handleMailruMatchInput() {
|
||||
clearTimeout(mailruSearchTimer);
|
||||
mailruSearchTimer = setTimeout(() => {
|
||||
searchMailruSeries();
|
||||
}, 500);
|
||||
}
|
||||
|
||||
function getMailruSelection(resultId) {
|
||||
return mailruSelections.get(resultId) || { season: 1, episode: 1 };
|
||||
}
|
||||
|
||||
function setMailruSelection(resultId, field, value) {
|
||||
const prev = getMailruSelection(resultId);
|
||||
const nextValue = Number(value) || 1;
|
||||
mailruSelections.set(resultId, { ...prev, [field]: nextValue });
|
||||
}
|
||||
|
||||
async function applyMailruMatch(result) {
|
||||
if (!activeMailruJob || !result) return;
|
||||
if (mailruApplyingId) return;
|
||||
mailruApplyingId = result.id;
|
||||
const selection = getMailruSelection(result.id);
|
||||
const jobId = activeMailruJob.infoHash;
|
||||
// Modalı hemen kapat, indirmeyi arka planda başlat
|
||||
closeMailruMatchModal();
|
||||
const resp = await apiFetch("/api/mailru/match", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
jobId,
|
||||
metadata: result,
|
||||
season: selection.season,
|
||||
episode: selection.episode
|
||||
})
|
||||
});
|
||||
if (!resp.ok) {
|
||||
const data = await resp.json().catch(() => null);
|
||||
alert(data?.error || "Eşleştirme başarısız oldu.");
|
||||
mailruApplyingId = null;
|
||||
return;
|
||||
}
|
||||
mailruApplyingId = null;
|
||||
}
|
||||
|
||||
async function toggleSingleTorrent(hash) {
|
||||
const torrent = torrents.find(t => t.infoHash === hash);
|
||||
if (!torrent) return;
|
||||
@@ -498,9 +641,14 @@
|
||||
slider.value = volume;
|
||||
slider.style.setProperty("--fill", slider.value * 100);
|
||||
}
|
||||
const handleDocClick = () => {
|
||||
activeMailruMenu = null;
|
||||
};
|
||||
document.addEventListener("click", handleDocClick);
|
||||
window.addEventListener("keydown", onEsc);
|
||||
return () => {
|
||||
window.removeEventListener("keydown", onEsc);
|
||||
document.removeEventListener("click", handleDocClick);
|
||||
if (ws) ws.close();
|
||||
if (pollTimer) clearInterval(pollTimer);
|
||||
};
|
||||
@@ -580,7 +728,13 @@
|
||||
on:drop={handleDrop}
|
||||
>
|
||||
{#each torrents as t (t.infoHash)}
|
||||
<div class="torrent" on:click={() => openModal(t)}>
|
||||
<div
|
||||
class="torrent"
|
||||
on:click={() => {
|
||||
if (t.type === "mailru" && t.status === "awaiting_match") return;
|
||||
openModal(t);
|
||||
}}
|
||||
>
|
||||
{#if t.thumbnail}
|
||||
<img
|
||||
src={withToken(`${API}${t.thumbnail}`)}
|
||||
@@ -592,7 +746,7 @@
|
||||
<div class="thumb placeholder loading">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
{:else if (t.type === "youtube" && (!t.progress || t.progress <= 0))}
|
||||
{:else if ((t.type === "youtube" || t.type === "mailru") && (!t.progress || t.progress <= 0))}
|
||||
<div class="thumb placeholder loading">
|
||||
<div class="spinner"></div>
|
||||
</div>
|
||||
@@ -604,11 +758,11 @@
|
||||
|
||||
<div class="torrent-info">
|
||||
<div class="torrent-header">
|
||||
<div class="torrent-title">
|
||||
<div class="torrent-name">{t.name}</div>
|
||||
{#if t.type === "youtube"}
|
||||
<div class="torrent-title">
|
||||
<div class="torrent-name">{t.name}</div>
|
||||
{#if t.type === "youtube" || t.type === "mailru"}
|
||||
<div class="torrent-subtitle">
|
||||
Source: YouTube
|
||||
Source: {t.type === "mailru" ? "Mail.ru" : "YouTube"}
|
||||
</div>
|
||||
<div class="torrent-subtitle">
|
||||
Added: {formatDate(t.added)}
|
||||
@@ -623,7 +777,7 @@
|
||||
{/if}
|
||||
</div>
|
||||
<div style="display:flex; gap:5px;">
|
||||
{#if t.type !== "youtube"}
|
||||
{#if t.type === "torrent" || !t.type}
|
||||
<button
|
||||
class="toggle-btn"
|
||||
on:click|stopPropagation={() => toggleSingleTorrent(t.infoHash)}
|
||||
@@ -636,6 +790,30 @@
|
||||
{/if}
|
||||
</button>
|
||||
{/if}
|
||||
{#if t.type === "mailru" && t.status === "awaiting_match"}
|
||||
<div class="more-menu" on:click|stopPropagation>
|
||||
<button
|
||||
class="more-btn"
|
||||
on:click|stopPropagation={() => toggleMailruMenu(t.infoHash)}
|
||||
title="Aksiyonlar"
|
||||
>
|
||||
...
|
||||
</button>
|
||||
{#if activeMailruMenu === t.infoHash}
|
||||
<div class="more-dropdown">
|
||||
<button
|
||||
class="more-item"
|
||||
on:click|stopPropagation={() => {
|
||||
openMailruMatchModal(t);
|
||||
activeMailruMenu = null;
|
||||
}}
|
||||
>
|
||||
Eşleştir
|
||||
</button>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<button
|
||||
class="remove-btn"
|
||||
on:click|stopPropagation={() => removeTorrent(t.infoHash)}
|
||||
@@ -644,7 +822,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{#if t.type !== "youtube"}
|
||||
{#if t.type === "torrent" || !t.type}
|
||||
<div class="torrent-hash">
|
||||
Hash: {t.infoHash} | Tracker: {t.tracker ?? "Unknown"} | Added:
|
||||
{t.added ? formatDate(t.added) : "Unknown"}
|
||||
@@ -678,11 +856,13 @@
|
||||
</div>
|
||||
|
||||
<div class="progress-text">
|
||||
{#if (t.progress || 0) < 1}
|
||||
{#if t.type === "mailru" && t.status === "awaiting_match"}
|
||||
Eşleştirme bekleniyor
|
||||
{:else if (t.progress || 0) < 1}
|
||||
{(t.progress * 100).toFixed(1)}% •
|
||||
{t.downloaded ? (t.downloaded / 1e6).toFixed(1) : 0} MB •
|
||||
{formatSpeed(t.downloadSpeed)} ↓
|
||||
{#if t.type !== "youtube"}
|
||||
{#if t.type === "torrent" || !t.type}
|
||||
• {t.numPeers ?? 0} peers
|
||||
{/if}
|
||||
{:else}
|
||||
@@ -707,6 +887,56 @@
|
||||
{/if}
|
||||
</section>
|
||||
|
||||
<MatchModal
|
||||
show={showMailruMatchModal}
|
||||
headerTitle="Eşlemeyi Düzelt"
|
||||
fileLabel="Dosya"
|
||||
fileName={activeMailruJob?.url || ""}
|
||||
sizeText=""
|
||||
titleLabel="Dizi Adı"
|
||||
yearLabel="Yıl"
|
||||
titlePlaceholder="Anime adını girin"
|
||||
showYearInput={true}
|
||||
bind:titleValue={mailruMatchQuery}
|
||||
bind:yearValue={mailruMatchYear}
|
||||
searching={mailruSearching}
|
||||
results={mailruMatchResults}
|
||||
showEmpty={!mailruSearching && mailruMatchResults.length === 0 && mailruMatchQuery.trim().length > 0}
|
||||
emptyText="Sonuç bulunamadı"
|
||||
applyingId={null}
|
||||
onClose={closeMailruMatchModal}
|
||||
onTitleInput={handleMailruMatchInput}
|
||||
onYearInput={handleMailruMatchInput}
|
||||
onSelect={applyMailruMatch}
|
||||
>
|
||||
<svelte:fragment slot="resultActions" let:result>
|
||||
<label>
|
||||
Season
|
||||
<select
|
||||
class="match-modal-select"
|
||||
value={getMailruSelection(result.id).season}
|
||||
on:change={(e) => setMailruSelection(result.id, "season", e.target.value)}
|
||||
>
|
||||
{#each mailruSeasonOptions as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
<label>
|
||||
Episode
|
||||
<select
|
||||
class="match-modal-select"
|
||||
value={getMailruSelection(result.id).episode}
|
||||
on:change={(e) => setMailruSelection(result.id, "episode", e.target.value)}
|
||||
>
|
||||
{#each mailruEpisodeOptions as option}
|
||||
<option value={option}>{option}</option>
|
||||
{/each}
|
||||
</select>
|
||||
</label>
|
||||
</svelte:fragment>
|
||||
</MatchModal>
|
||||
|
||||
{#if showModal && selectedVideo}
|
||||
<div class="modal-overlay" on:click={closeModal}>
|
||||
<!-- 🟢 Global Close Button (Files.svelte ile aynı) -->
|
||||
@@ -1274,4 +1504,45 @@
|
||||
font-size: 9px;
|
||||
}
|
||||
}
|
||||
|
||||
.more-menu {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
border: 1px solid #ddd;
|
||||
background: #f8f9fa;
|
||||
color: #333;
|
||||
border-radius: 6px;
|
||||
padding: 4px 8px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.more-dropdown {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 28px;
|
||||
background: #fff;
|
||||
border: 1px solid #e4e4e4;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
|
||||
z-index: 10;
|
||||
min-width: 120px;
|
||||
}
|
||||
|
||||
.more-item {
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
padding: 8px 10px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.more-item:hover {
|
||||
background: #f1f5f9;
|
||||
}
|
||||
</style>
|
||||
|
||||
43
client/src/stores/animeStore.js
Normal file
43
client/src/stores/animeStore.js
Normal file
@@ -0,0 +1,43 @@
|
||||
import { writable } from "svelte/store";
|
||||
import { apiFetch } from "../utils/api.js";
|
||||
|
||||
export const animeCount = writable(0);
|
||||
let requestSeq = 0;
|
||||
let lastValue = 0;
|
||||
let zeroTimer = null;
|
||||
|
||||
export async function refreshAnimeCount() {
|
||||
const ticket = ++requestSeq;
|
||||
try {
|
||||
const resp = await apiFetch("/api/anime");
|
||||
if (!resp.ok) throw new Error(`HTTP ${resp.status}`);
|
||||
const list = await resp.json();
|
||||
if (ticket !== requestSeq) return;
|
||||
const nextVal = Array.isArray(list) ? list.length : 0;
|
||||
if (nextVal > 0) {
|
||||
if (zeroTimer) {
|
||||
clearTimeout(zeroTimer);
|
||||
zeroTimer = null;
|
||||
}
|
||||
lastValue = nextVal;
|
||||
animeCount.set(nextVal);
|
||||
} else if (lastValue > 0) {
|
||||
if (zeroTimer) clearTimeout(zeroTimer);
|
||||
const zeroTicket = requestSeq;
|
||||
zeroTimer = setTimeout(() => {
|
||||
if (zeroTicket === requestSeq) {
|
||||
lastValue = 0;
|
||||
animeCount.set(0);
|
||||
}
|
||||
zeroTimer = null;
|
||||
}, 500);
|
||||
} else {
|
||||
lastValue = 0;
|
||||
animeCount.set(0);
|
||||
}
|
||||
} catch (err) {
|
||||
console.warn("⚠️ Anime sayacı güncellenemedi:", err?.message || err);
|
||||
// Hata durumunda mevcut değeri koru, titreşimi önle
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user