Neu: YouTube Playlist Analyzer
This commit is contained in:
Akamaru
@@ -217,6 +217,10 @@
|
||||
<h2 class="tool-title">YouTube Thumbnail Viewer</h2>
|
||||
<p class="tool-description">Zeige Thumbnails zu YouTube-Videos an und speicher sie</p>
|
||||
</a>
|
||||
<a href="https://tools.ponywave.de/yt_playlist" class="tool-bubble">
|
||||
<h2 class="tool-title">YouTube Playlist Analyzer</h2>
|
||||
<p class="tool-description">Analysiere YouTube-Playlists</p>
|
||||
</a>
|
||||
<a href="https://tools.ponywave.de/flash_dl" class="tool-bubble">
|
||||
<h2 class="tool-title">Flash Downloader</h2>
|
||||
<p class="tool-description">Downloade Flash-Dateien von Z0R und FUS RO GA</p>
|
||||
|
||||
55
sitemap.txt
55
sitemap.txt
@@ -1,31 +1,32 @@
|
||||
https://tools.ponywave.de/
|
||||
https://tools.ponywave.de/text_decoder
|
||||
https://tools.ponywave.de/sys_info
|
||||
https://tools.ponywave.de/zeitzonen
|
||||
https://tools.ponywave.de/dsgvo_helper
|
||||
https://tools.ponywave.de/text_cleaner
|
||||
https://tools.ponywave.de/text_sorter
|
||||
https://tools.ponywave.de/yt_thumb
|
||||
https://tools.ponywave.de/flash_dl
|
||||
https://tools.ponywave.de/kemonogen
|
||||
https://tools.ponywave.de/breakout
|
||||
https://tools.ponywave.de/emoji_jump
|
||||
https://tools.ponywave.de/2048
|
||||
https://tools.ponywave.de/solitaire
|
||||
https://tools.ponywave.de/ba_memory
|
||||
https://tools.ponywave.de/cell
|
||||
https://tools.ponywave.de/shape_shifter
|
||||
https://tools.ponywave.de/dogify
|
||||
https://tools.ponywave.de/bohne
|
||||
https://tools.ponywave.de/pinkie_timer
|
||||
https://tools.ponywave.de/depp_gpt
|
||||
https://tools.ponywave.de/emoji
|
||||
https://tools.ponywave.de/banana_run
|
||||
https://tools.ponywave.de/pokemon_quiz
|
||||
https://tools.ponywave.de/gronkh_games
|
||||
https://tools.ponywave.de/url_expander
|
||||
https://tools.ponywave.de/minesweeper
|
||||
https://tools.ponywave.de/anime_graph
|
||||
https://tools.ponywave.de/favorites_viewer
|
||||
https://tools.ponywave.de/chrome_extensions_checker
|
||||
https://tools.ponywave.de/ba_memory
|
||||
https://tools.ponywave.de/ba_steam
|
||||
https://tools.ponywave.de/banana_run
|
||||
https://tools.ponywave.de/bohne
|
||||
https://tools.ponywave.de/breakout
|
||||
https://tools.ponywave.de/cell
|
||||
https://tools.ponywave.de/chrome_extensions_checker
|
||||
https://tools.ponywave.de/depp_gpt
|
||||
https://tools.ponywave.de/dogify
|
||||
https://tools.ponywave.de/dsgvo_helper
|
||||
https://tools.ponywave.de/emoji
|
||||
https://tools.ponywave.de/emoji_jump
|
||||
https://tools.ponywave.de/favorites_viewer
|
||||
https://tools.ponywave.de/flash_dl
|
||||
https://tools.ponywave.de/gronkh_games
|
||||
https://tools.ponywave.de/kemonogen
|
||||
https://tools.ponywave.de/minesweeper
|
||||
https://tools.ponywave.de/pinkie_timer
|
||||
https://tools.ponywave.de/pokemon_quiz
|
||||
https://tools.ponywave.de/shape_shifter
|
||||
https://tools.ponywave.de/solitaire
|
||||
https://tools.ponywave.de/sys_info
|
||||
https://tools.ponywave.de/text_cleaner
|
||||
https://tools.ponywave.de/text_decoder
|
||||
https://tools.ponywave.de/text_sorter
|
||||
https://tools.ponywave.de/url_expander
|
||||
https://tools.ponywave.de/yt_playlist
|
||||
https://tools.ponywave.de/yt_thumb
|
||||
https://tools.ponywave.de/zeitzonen
|
||||
214
yt_playlist/fetch_playlist.php
Normal file
214
yt_playlist/fetch_playlist.php
Normal file
@@ -0,0 +1,214 @@
|
||||
<?php
|
||||
// Fehlerberichterstattung für Debugging
|
||||
error_reporting(E_ALL);
|
||||
ini_set('display_errors', 0); // Keine Ausgabe, nur JSON
|
||||
|
||||
header('Content-Type: application/json');
|
||||
header('Access-Control-Allow-Origin: *');
|
||||
header('Access-Control-Allow-Methods: POST');
|
||||
header('Access-Control-Allow-Headers: Content-Type');
|
||||
|
||||
// Fehlerbehandlung
|
||||
set_error_handler(function($errno, $errstr, $errfile, $errline) {
|
||||
throw new ErrorException($errstr, 0, $errno, $errfile, $errline);
|
||||
});
|
||||
|
||||
try {
|
||||
// Nur POST-Anfragen erlauben
|
||||
if ($_SERVER['REQUEST_METHOD'] !== 'POST') {
|
||||
http_response_code(405);
|
||||
echo json_encode(['error' => 'Nur POST-Anfragen erlaubt']);
|
||||
exit;
|
||||
}
|
||||
|
||||
// Lese JSON-Input
|
||||
$rawInput = file_get_contents('php://input');
|
||||
$input = json_decode($rawInput, true);
|
||||
|
||||
if (json_last_error() !== JSON_ERROR_NONE) {
|
||||
throw new Exception('Ungültiges JSON: ' . json_last_error_msg());
|
||||
}
|
||||
|
||||
if (!isset($input['playlistId']) || !isset($input['apiKey'])) {
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'playlistId und apiKey sind erforderlich']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$playlistId = $input['playlistId'];
|
||||
$apiKey = $input['apiKey'];
|
||||
|
||||
// Validierung
|
||||
if (empty($playlistId) || empty($apiKey)) {
|
||||
http_response_code(400);
|
||||
echo json_encode(['error' => 'playlistId und apiKey dürfen nicht leer sein']);
|
||||
exit;
|
||||
}
|
||||
|
||||
$videos = [];
|
||||
$pageToken = '';
|
||||
$maxResults = 50;
|
||||
$playlistTitle = '';
|
||||
|
||||
// Prüfe ob cURL verfügbar ist
|
||||
if (!function_exists('curl_init')) {
|
||||
throw new Exception('cURL ist nicht verfügbar. Bitte aktiviere die cURL-Extension in PHP.');
|
||||
}
|
||||
|
||||
// Hole Playlist-Informationen (Titel)
|
||||
$playlistInfoUrl = "https://www.googleapis.com/youtube/v3/playlists?part=snippet&id=" . urlencode($playlistId) . "&key=" . urlencode($apiKey);
|
||||
$playlistInfoResponse = curlRequest($playlistInfoUrl);
|
||||
|
||||
if ($playlistInfoResponse !== false) {
|
||||
$playlistInfoData = json_decode($playlistInfoResponse, true);
|
||||
if (isset($playlistInfoData['items'][0]['snippet']['title'])) {
|
||||
$playlistTitle = $playlistInfoData['items'][0]['snippet']['title'];
|
||||
}
|
||||
}
|
||||
|
||||
// Hole alle Videos der Playlist (paginiert)
|
||||
do {
|
||||
$url = "https://www.googleapis.com/youtube/v3/playlistItems?part=contentDetails&playlistId=" . urlencode($playlistId) . "&maxResults=" . $maxResults . "&pageToken=" . urlencode($pageToken) . "&key=" . urlencode($apiKey);
|
||||
|
||||
$response = curlRequest($url);
|
||||
|
||||
if ($response === false) {
|
||||
throw new Exception('API-Anfrage fehlgeschlagen (Netzwerkfehler)');
|
||||
}
|
||||
|
||||
$data = json_decode($response, true);
|
||||
|
||||
if (json_last_error() !== JSON_ERROR_NONE) {
|
||||
throw new Exception('Ungültige JSON-Antwort von YouTube API');
|
||||
}
|
||||
|
||||
if (isset($data['error'])) {
|
||||
$errorMsg = $data['error']['message'] ?? 'YouTube API Fehler';
|
||||
$errorCode = $data['error']['code'] ?? 'unbekannt';
|
||||
throw new Exception("YouTube API Fehler ($errorCode): $errorMsg");
|
||||
}
|
||||
|
||||
if (!isset($data['items'])) {
|
||||
throw new Exception('Ungültige API-Antwort: items fehlt');
|
||||
}
|
||||
|
||||
// Sammle Video-IDs
|
||||
$videoIds = array_map(function($item) {
|
||||
return $item['contentDetails']['videoId'];
|
||||
}, $data['items']);
|
||||
|
||||
if (empty($videoIds)) {
|
||||
break; // Keine Videos mehr
|
||||
}
|
||||
|
||||
// Hole Video-Details (inkl. Upload-Datum und Dauer)
|
||||
$videoDetailsUrl = "https://www.googleapis.com/youtube/v3/videos?part=snippet,contentDetails&id=" . implode(',', $videoIds) . "&key=" . urlencode($apiKey);
|
||||
$videoResponse = curlRequest($videoDetailsUrl);
|
||||
|
||||
if ($videoResponse === false) {
|
||||
throw new Exception('Video-Details konnten nicht geladen werden');
|
||||
}
|
||||
|
||||
$videoData = json_decode($videoResponse, true);
|
||||
|
||||
if (json_last_error() !== JSON_ERROR_NONE) {
|
||||
throw new Exception('Ungültige JSON-Antwort bei Video-Details');
|
||||
}
|
||||
|
||||
if (isset($videoData['error'])) {
|
||||
$errorMsg = $videoData['error']['message'] ?? 'YouTube API Fehler';
|
||||
throw new Exception("YouTube API Fehler bei Video-Details: $errorMsg");
|
||||
}
|
||||
|
||||
// Extrahiere Upload-Daten und Dauer
|
||||
if (isset($videoData['items'])) {
|
||||
foreach ($videoData['items'] as $video) {
|
||||
$videos[] = [
|
||||
'publishedAt' => $video['snippet']['publishedAt'] ?? null,
|
||||
'duration' => $video['contentDetails']['duration'] ?? null
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
$pageToken = $data['nextPageToken'] ?? '';
|
||||
} while ($pageToken);
|
||||
|
||||
// Berechne Gesamtdauer
|
||||
$totalMinutes = 0;
|
||||
foreach ($videos as $video) {
|
||||
if ($video['duration']) {
|
||||
$totalMinutes += parseDuration($video['duration']);
|
||||
}
|
||||
}
|
||||
|
||||
// Finde ältestes und neuestes Datum
|
||||
$dates = array_filter(array_map(function($video) {
|
||||
return $video['publishedAt'];
|
||||
}, $videos));
|
||||
|
||||
sort($dates);
|
||||
|
||||
$oldestDate = count($dates) > 0 ? substr($dates[0], 0, 10) : null;
|
||||
$newestDate = count($dates) > 0 ? substr($dates[count($dates) - 1], 0, 10) : null;
|
||||
|
||||
// Sende Ergebnis
|
||||
echo json_encode([
|
||||
'playlistTitle' => $playlistTitle,
|
||||
'videoCount' => count($videos),
|
||||
'totalMinutes' => $totalMinutes,
|
||||
'oldestDate' => $oldestDate,
|
||||
'newestDate' => $newestDate
|
||||
]);
|
||||
|
||||
} catch (Exception $e) {
|
||||
http_response_code(500);
|
||||
echo json_encode([
|
||||
'error' => $e->getMessage(),
|
||||
'file' => basename($e->getFile()),
|
||||
'line' => $e->getLine()
|
||||
]);
|
||||
}
|
||||
|
||||
/**
|
||||
* Macht HTTP-Anfrage mit cURL
|
||||
*/
|
||||
function curlRequest($url) {
|
||||
$ch = curl_init();
|
||||
|
||||
curl_setopt($ch, CURLOPT_URL, $url);
|
||||
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
|
||||
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
|
||||
curl_setopt($ch, CURLOPT_TIMEOUT, 30);
|
||||
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, true);
|
||||
curl_setopt($ch, CURLOPT_USERAGENT, 'YouTube Playlist Analyzer/1.0');
|
||||
|
||||
$response = curl_exec($ch);
|
||||
$error = curl_error($ch);
|
||||
$httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
|
||||
|
||||
curl_close($ch);
|
||||
|
||||
if ($response === false) {
|
||||
throw new Exception('cURL-Fehler: ' . $error);
|
||||
}
|
||||
|
||||
return $response;
|
||||
}
|
||||
|
||||
/**
|
||||
* Konvertiert ISO 8601 Duration in Minuten
|
||||
* Format: PT#H#M#S
|
||||
*/
|
||||
function parseDuration($duration) {
|
||||
preg_match('/PT(?:(\d+)H)?(?:(\d+)M)?(?:(\d+)S)?/', $duration, $matches);
|
||||
|
||||
$hours = isset($matches[1]) ? (int)$matches[1] : 0;
|
||||
$minutes = isset($matches[2]) ? (int)$matches[2] : 0;
|
||||
$seconds = isset($matches[3]) ? (int)$matches[3] : 0;
|
||||
|
||||
// Auf volle Minuten aufrunden
|
||||
$totalMinutes = $hours * 60 + $minutes + ceil($seconds / 60);
|
||||
|
||||
return $totalMinutes;
|
||||
}
|
||||
?>
|
||||
822
yt_playlist/index.html
Normal file
822
yt_playlist/index.html
Normal file
@@ -0,0 +1,822 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>YouTube Playlist Analyzer | PonyWave Tools</title>
|
||||
<meta property="og:title" content="YouTube Playlist Analyzer | PonyWave Tools">
|
||||
<meta property="og:description" content="Analysiere YouTube-Playlists">
|
||||
<meta property="og:type" content="website">
|
||||
<meta property="og:url" content="https://tools.ponywave.de/yt_playlist">
|
||||
<meta property="og:image" content="https://tools.ponywave.de/favicon.png">
|
||||
<link rel="icon" href="https://tools.ponywave.de/favicon.png">
|
||||
<script defer src="https://stats.ponywave.de/script" data-website-id="9ef713d2-adb9-4906-9df5-708d8a8b9131" data-tag="yt_playlist"></script>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Arial, sans-serif;
|
||||
background-color: #181818;
|
||||
color: #e0e0e0;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 800px;
|
||||
margin: 0 auto;
|
||||
width: 100%;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #ff0000;
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.input-section {
|
||||
background: #282828;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="password"],
|
||||
input[type="date"],
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background: #3a3a3a;
|
||||
border: 2px solid #4a4a4a;
|
||||
border-radius: 8px;
|
||||
color: #e0e0e0;
|
||||
font-size: 16px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
input:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: #ff0000;
|
||||
}
|
||||
|
||||
button {
|
||||
padding: 12px 25px;
|
||||
background-color: #ff0000;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.3s, transform 0.1s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #cc0000;
|
||||
}
|
||||
|
||||
button:active {
|
||||
transform: translateY(1px);
|
||||
}
|
||||
|
||||
button:disabled {
|
||||
background-color: #555;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.api-key-section {
|
||||
background: #232323;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.api-key-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.api-key-header:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.api-key-content {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.api-key-input-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.api-key-input-group input {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.api-key-input-group button {
|
||||
padding: 12px 20px;
|
||||
}
|
||||
|
||||
.results-section {
|
||||
background: #282828;
|
||||
padding: 25px;
|
||||
border-radius: 12px;
|
||||
margin-bottom: 20px;
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
|
||||
display: none;
|
||||
}
|
||||
|
||||
.results-section.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #232323;
|
||||
padding: 15px;
|
||||
border-radius: 8px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 8px 0;
|
||||
border-bottom: 1px solid #3a3a3a;
|
||||
}
|
||||
|
||||
.info-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.info-label {
|
||||
font-weight: 600;
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.info-value {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.date-inputs {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 15px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.checkbox-group {
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.checkbox-group input {
|
||||
width: auto;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
textarea {
|
||||
font-family: 'Courier New', monospace;
|
||||
min-height: 200px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.status {
|
||||
text-align: center;
|
||||
padding: 15px;
|
||||
background: #232323;
|
||||
border-radius: 8px;
|
||||
margin: 15px 0;
|
||||
}
|
||||
|
||||
.spinner {
|
||||
border: 3px solid #3a3a3a;
|
||||
border-top: 3px solid #ff0000;
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: spin 1s linear infinite;
|
||||
margin: 10px auto;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.toast {
|
||||
position: fixed;
|
||||
bottom: 30px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
background: #323232;
|
||||
color: white;
|
||||
padding: 15px 25px;
|
||||
border-radius: 8px;
|
||||
display: none;
|
||||
font-size: 14px;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
|
||||
z-index: 1000;
|
||||
}
|
||||
|
||||
.toast.visible {
|
||||
display: block;
|
||||
animation: fadeIn 0.3s;
|
||||
}
|
||||
|
||||
.toast.success {
|
||||
background: #4CAF50;
|
||||
}
|
||||
|
||||
.toast.error {
|
||||
background: #f44336;
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateX(-50%) translateY(20px); }
|
||||
to { opacity: 1; transform: translateX(-50%) translateY(0); }
|
||||
}
|
||||
|
||||
footer {
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
margin-top: 40px;
|
||||
border-top: 1px solid #3a3a3a;
|
||||
color: #888;
|
||||
}
|
||||
|
||||
footer a {
|
||||
color: #ff0000;
|
||||
text-decoration: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
footer a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.heart {
|
||||
color: #ff0000;
|
||||
animation: heartbeat 1.5s infinite;
|
||||
}
|
||||
|
||||
@keyframes heartbeat {
|
||||
0% { transform: scale(1); }
|
||||
50% { transform: scale(1.2); }
|
||||
100% { transform: scale(1); }
|
||||
}
|
||||
|
||||
.toggle-visibility {
|
||||
background: #3a3a3a;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toggle-visibility:hover {
|
||||
background: #4a4a4a;
|
||||
}
|
||||
|
||||
.settings-button {
|
||||
position: fixed;
|
||||
top: 20px;
|
||||
right: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background: #282828;
|
||||
border: 2px solid #3a3a3a;
|
||||
border-radius: 50%;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 24px;
|
||||
transition: all 0.3s;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.settings-button:hover {
|
||||
background: #3a3a3a;
|
||||
border-color: #ff0000;
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0,0,0,0.8);
|
||||
z-index: 9999;
|
||||
display: none;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.modal-overlay.visible {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: #282828;
|
||||
padding: 30px;
|
||||
border-radius: 12px;
|
||||
max-width: 600px;
|
||||
width: 100%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 8px 32px rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.modal h2 {
|
||||
margin-top: 0;
|
||||
color: #ff0000;
|
||||
font-size: 24px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
float: right;
|
||||
font-size: 28px;
|
||||
font-weight: bold;
|
||||
color: #888;
|
||||
cursor: pointer;
|
||||
line-height: 20px;
|
||||
margin-top: -5px;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.api-help {
|
||||
font-size: 13px;
|
||||
color: #888;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.api-help a {
|
||||
color: #ff0000;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.api-help a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.collapse-icon {
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.collapse-icon.open {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Settings Button -->
|
||||
<button class="settings-button" onclick="openSettingsModal()" title="Einstellungen">⚙️</button>
|
||||
|
||||
<!-- Settings Modal -->
|
||||
<div id="settings-modal" class="modal-overlay">
|
||||
<div class="modal">
|
||||
<span class="modal-close" onclick="closeSettingsModal()">×</span>
|
||||
<h2>⚙️ Einstellungen</h2>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="api-key-settings">YouTube API Key</label>
|
||||
<p style="font-size: 14px; color: #888; margin-bottom: 10px;">
|
||||
Erforderlich zum Abrufen der Playlist-Daten.
|
||||
</p>
|
||||
<div class="api-key-input-group">
|
||||
<input type="password" id="api-key-settings" placeholder="API-Key eingeben...">
|
||||
<button class="toggle-visibility" onclick="toggleApiKeyVisibility()">👁️</button>
|
||||
<button onclick="saveApiKey()">Speichern</button>
|
||||
</div>
|
||||
<div class="api-help">
|
||||
Wie erstelle ich einen API-Key? <a href="javascript:void(0)" onclick="showApiHelp()">Anleitung anzeigen</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<h1>YouTube Playlist Analyzer</h1>
|
||||
|
||||
<div class="input-section">
|
||||
<div class="form-group">
|
||||
<label for="playlist-url">Playlist URL</label>
|
||||
<input type="text"
|
||||
id="playlist-url"
|
||||
placeholder="https://www.youtube.com/playlist?list=PLGWGc5dfbzn8zLrOOQK1M0Vmwvjp7biSU"
|
||||
onkeypress="handleEnter(event)">
|
||||
</div>
|
||||
|
||||
<button onclick="analyzePlaylist()">Playlist analysieren</button>
|
||||
</div>
|
||||
|
||||
<div id="status" class="status" style="display: none;">
|
||||
<div class="spinner"></div>
|
||||
<p id="status-text">Lade Playlist-Daten...</p>
|
||||
</div>
|
||||
|
||||
<div id="results" class="results-section">
|
||||
<h2>Ergebnisse</h2>
|
||||
|
||||
<div class="info-box">
|
||||
<div class="info-row">
|
||||
<span class="info-label">Playlist:</span>
|
||||
<span class="info-value" id="playlist-title">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Videos:</span>
|
||||
<span class="info-value" id="video-count">-</span>
|
||||
</div>
|
||||
<div class="info-row">
|
||||
<span class="info-label">Gesamtlänge:</span>
|
||||
<span class="info-value" id="total-duration">-</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Zeitraum</label>
|
||||
<div class="date-inputs">
|
||||
<div>
|
||||
<label for="start-date" style="font-size: 14px;">Start-Datum</label>
|
||||
<input type="date" id="start-date" onchange="updateWikiFormat()">
|
||||
</div>
|
||||
<div>
|
||||
<label for="end-date" style="font-size: 14px;">End-Datum</label>
|
||||
<input type="date" id="end-date" onchange="updateWikiFormat()">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="series-finished" onchange="updateWikiFormat()">
|
||||
<label for="series-finished">Serie beendet</label>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="wiki-output">Wiki-Format</label>
|
||||
<textarea id="wiki-output" readonly></textarea>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button onclick="copyWikiFormat()">📋 Wiki-Format kopieren</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="toast" class="toast"></div>
|
||||
|
||||
<footer>
|
||||
<p>
|
||||
<a href="https://tools.ponywave.de/">Zurück zur Startseite</a> |
|
||||
© <span id="current-year"></span> Akamaru | Made with <span class="heart">❤️</span> by Claude
|
||||
</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
let playlistData = null;
|
||||
|
||||
// Jahr aktualisieren
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
document.getElementById('current-year').textContent = new Date().getFullYear();
|
||||
loadApiKey();
|
||||
});
|
||||
|
||||
function handleEnter(event) {
|
||||
if (event.key === 'Enter') {
|
||||
analyzePlaylist();
|
||||
}
|
||||
}
|
||||
|
||||
function openSettingsModal() {
|
||||
document.getElementById('settings-modal').classList.add('visible');
|
||||
loadApiKey();
|
||||
}
|
||||
|
||||
function closeSettingsModal() {
|
||||
document.getElementById('settings-modal').classList.remove('visible');
|
||||
}
|
||||
|
||||
function toggleApiKeyVisibility() {
|
||||
const input = document.getElementById('api-key-settings');
|
||||
input.type = input.type === 'password' ? 'text' : 'password';
|
||||
}
|
||||
|
||||
function loadApiKey() {
|
||||
const apiKey = localStorage.getItem('youtube_api_key') || '';
|
||||
const input = document.getElementById('api-key-settings');
|
||||
if (input) {
|
||||
input.value = apiKey;
|
||||
}
|
||||
}
|
||||
|
||||
function saveApiKey() {
|
||||
const apiKey = document.getElementById('api-key-settings').value.trim();
|
||||
if (apiKey) {
|
||||
localStorage.setItem('youtube_api_key', apiKey);
|
||||
showToast('API-Key gespeichert!', 'success');
|
||||
closeSettingsModal();
|
||||
} else {
|
||||
localStorage.removeItem('youtube_api_key');
|
||||
showToast('API-Key gelöscht!', 'success');
|
||||
}
|
||||
}
|
||||
|
||||
// ESC-Taste zum Schließen des Settings-Modals
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
closeSettingsModal();
|
||||
}
|
||||
});
|
||||
|
||||
async function analyzePlaylist() {
|
||||
const urlInput = document.getElementById('playlist-url').value.trim();
|
||||
const playlistId = extractPlaylistId(urlInput);
|
||||
|
||||
if (!playlistId) {
|
||||
showToast('Ungültige Playlist-URL!', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
// Zeige Status
|
||||
document.getElementById('status').style.display = 'block';
|
||||
document.getElementById('results').classList.remove('visible');
|
||||
document.getElementById('status-text').textContent = 'Lade Playlist-Daten...';
|
||||
|
||||
// Hole API-Key
|
||||
const apiKey = localStorage.getItem('youtube_api_key') || '';
|
||||
|
||||
if (!apiKey) {
|
||||
showToast('Bitte gib zuerst einen API-Key in den Einstellungen ein!', 'error');
|
||||
document.getElementById('status').style.display = 'none';
|
||||
// Öffne Settings-Modal
|
||||
openSettingsModal();
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// Rufe PHP-Script auf
|
||||
const response = await fetch('fetch_playlist.php', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
playlistId: playlistId,
|
||||
apiKey: apiKey
|
||||
})
|
||||
});
|
||||
|
||||
// Versuche JSON zu parsen, auch bei Fehlern
|
||||
let data;
|
||||
try {
|
||||
data = await response.json();
|
||||
} catch (e) {
|
||||
// Falls JSON-Parsing fehlschlägt, hole den Text
|
||||
const text = await response.text();
|
||||
console.error('Fehler beim JSON-Parsing. Response:', text);
|
||||
throw new Error('Server-Fehler: Ungültige Antwort (kein JSON). Siehe Console für Details.');
|
||||
}
|
||||
|
||||
// Zeige detaillierte Fehlermeldung
|
||||
if (!response.ok || data.error) {
|
||||
const errorDetails = data.error || 'Unbekannter Fehler';
|
||||
const debugInfo = data.file && data.line ? ` (${data.file}:${data.line})` : '';
|
||||
console.error('API-Fehler:', data);
|
||||
throw new Error(errorDetails + debugInfo);
|
||||
}
|
||||
|
||||
// Speichere Daten
|
||||
playlistData = data;
|
||||
|
||||
// Zeige Ergebnisse
|
||||
displayResults(data);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Fehler:', error);
|
||||
showToast('Fehler: ' + error.message, 'error');
|
||||
document.getElementById('status').style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
function displayResults(data) {
|
||||
// Verstecke Status
|
||||
document.getElementById('status').style.display = 'none';
|
||||
|
||||
// Zeige Ergebnisse
|
||||
document.getElementById('results').classList.add('visible');
|
||||
|
||||
// Setze Werte
|
||||
document.getElementById('playlist-title').textContent = data.playlistTitle || 'Unbekannt';
|
||||
document.getElementById('video-count').textContent = data.videoCount + ' Folgen';
|
||||
document.getElementById('total-duration').textContent = '~' + data.totalMinutes + ' Minuten';
|
||||
|
||||
// Setze Daten
|
||||
if (data.oldestDate && data.newestDate) {
|
||||
document.getElementById('start-date').value = data.oldestDate;
|
||||
document.getElementById('end-date').value = data.newestDate;
|
||||
} else {
|
||||
const today = new Date().toISOString().split('T')[0];
|
||||
document.getElementById('start-date').value = today;
|
||||
document.getElementById('end-date').value = today;
|
||||
}
|
||||
|
||||
// Generiere Wiki-Format
|
||||
updateWikiFormat();
|
||||
}
|
||||
|
||||
function updateWikiFormat() {
|
||||
if (!playlistData) return;
|
||||
|
||||
const startDate = document.getElementById('start-date').value;
|
||||
const endDate = document.getElementById('end-date').value;
|
||||
const isFinished = document.getElementById('series-finished').checked;
|
||||
const playlistUrl = document.getElementById('playlist-url').value.trim();
|
||||
|
||||
if (!startDate) return;
|
||||
|
||||
const startFormatted = formatDate(startDate);
|
||||
const endFormatted = endDate ? formatDate(endDate) : null;
|
||||
const finishedClass = isFinished ? ' lp-finished' : '';
|
||||
|
||||
let wikiLines = [];
|
||||
wikiLines.push(`|class="dates"| {{SortKey|${startDate}|${startFormatted}}}`);
|
||||
|
||||
if (isFinished && endFormatted) {
|
||||
wikiLines.push(`|class="dates${finishedClass}"| {{SortKey|${endDate}|${endFormatted}}}`);
|
||||
}
|
||||
|
||||
wikiLines.push(`|class="episodes"| {{nts|${playlistData.videoCount}}} Folgen`);
|
||||
wikiLines.push(`|class="length"| ~ {{nts|${playlistData.totalMinutes}}} Minuten`);
|
||||
wikiLines.push(`|class="link"| <div align="center">[[Datei:YouTubeIcon.png|link=${playlistUrl}]]</div>`);
|
||||
|
||||
document.getElementById('wiki-output').value = wikiLines.join('\n');
|
||||
}
|
||||
|
||||
function formatDate(isoDate) {
|
||||
// Konvertiere YYYY-MM-DD zu DD.MM.YYYY
|
||||
const parts = isoDate.split('-');
|
||||
return `${parts[2]}.${parts[1]}.${parts[0]}`;
|
||||
}
|
||||
|
||||
async function copyWikiFormat() {
|
||||
const textarea = document.getElementById('wiki-output');
|
||||
try {
|
||||
await navigator.clipboard.writeText(textarea.value);
|
||||
showToast('Wiki-Format kopiert!', 'success');
|
||||
} catch (error) {
|
||||
showToast('Fehler beim Kopieren!', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
function extractPlaylistId(url) {
|
||||
const patterns = [
|
||||
/[?&]list=([^&#]+)/,
|
||||
/playlist\?list=([^&#]+)/
|
||||
];
|
||||
|
||||
for (const pattern of patterns) {
|
||||
const match = url.match(pattern);
|
||||
if (match && match[1]) return match[1];
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function showToast(message, type = 'success') {
|
||||
const toast = document.getElementById('toast');
|
||||
toast.className = `toast ${type} visible`;
|
||||
toast.textContent = message;
|
||||
|
||||
setTimeout(() => {
|
||||
toast.classList.remove('visible');
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
function showApiHelp() {
|
||||
// Erstelle Modal-Overlay
|
||||
const overlay = document.createElement('div');
|
||||
overlay.style.cssText = 'position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;';
|
||||
|
||||
// Erstelle Modal-Content
|
||||
const modal = document.createElement('div');
|
||||
modal.style.cssText = 'background: #282828; padding: 30px; border-radius: 12px; max-width: 700px; width: 100%; max-height: 90vh; overflow-y: auto; color: #e0e0e0; box-shadow: 0 8px 32px rgba(0,0,0,0.5);';
|
||||
|
||||
modal.innerHTML = `
|
||||
<h2 style="margin-top: 0; color: #ff0000; font-size: 24px; margin-bottom: 20px;">📖 YouTube API Key erstellen</h2>
|
||||
|
||||
<div style="background: #232323; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
||||
<h3 style="color: #fff; font-size: 18px; margin-top: 0;">1. Google Cloud Console öffnen</h3>
|
||||
<p style="margin: 10px 0;">Gehe zu: <a href="https://console.cloud.google.com/" target="_blank" style="color: #ff0000; text-decoration: none;">https://console.cloud.google.com/</a></p>
|
||||
</div>
|
||||
|
||||
<div style="background: #232323; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
||||
<h3 style="color: #fff; font-size: 18px; margin-top: 0;">2. Neues Projekt erstellen</h3>
|
||||
<ul style="margin: 10px 0; padding-left: 20px; color: #ccc;">
|
||||
<li>Klicke oben auf "Projekt auswählen" → "Neues Projekt"</li>
|
||||
<li>Name: z.B. "YouTube Playlist Analyzer"</li>
|
||||
<li>Klicke auf "Erstellen"</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="background: #232323; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
||||
<h3 style="color: #fff; font-size: 18px; margin-top: 0;">3. YouTube Data API v3 aktivieren</h3>
|
||||
<ul style="margin: 10px 0; padding-left: 20px; color: #ccc;">
|
||||
<li>Gehe zu "APIs & Dienste" → "Bibliothek"</li>
|
||||
<li>Suche nach "YouTube Data API v3"</li>
|
||||
<li>Klicke auf "Aktivieren"</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="background: #232323; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
||||
<h3 style="color: #fff; font-size: 18px; margin-top: 0;">4. API-Key erstellen</h3>
|
||||
<ul style="margin: 10px 0; padding-left: 20px; color: #ccc;">
|
||||
<li>Gehe zu "APIs & Dienste" → "Anmeldedaten"</li>
|
||||
<li>Klicke auf "+ Anmeldedaten erstellen" → "API-Schlüssel"</li>
|
||||
<li>Kopiere den generierten Key</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="background: #232323; padding: 15px; border-radius: 8px; margin-bottom: 20px;">
|
||||
<h3 style="color: #fff; font-size: 18px; margin-top: 0;">5. API-Key einschränken (empfohlen)</h3>
|
||||
<ul style="margin: 10px 0; padding-left: 20px; color: #ccc;">
|
||||
<li>Klicke auf den erstellten Key</li>
|
||||
<li>Bei "API-Einschränkungen": Wähle "Schlüssel einschränken"</li>
|
||||
<li>Aktiviere nur "YouTube Data API v3"</li>
|
||||
<li>Speichern</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div style="background: #1a3a1a; border-left: 4px solid #4CAF50; padding: 15px; border-radius: 4px; margin: 20px 0; color: #ccc;">
|
||||
<strong style="color: #4CAF50;">💡 Hinweis:</strong> Die YouTube API hat ein kostenloses Kontingent von 10.000 Einheiten/Tag.
|
||||
Eine Playlist-Abfrage kostet ca. 1-3 Einheiten pro 50 Videos.
|
||||
</div>
|
||||
|
||||
<div style="text-align: center; margin-top: 25px;">
|
||||
<button onclick="this.closest('[style*=\\'position: fixed\\']').remove()" style="padding: 12px 30px; background: #ff0000; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 16px; font-weight: 500;">
|
||||
Schließen
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
|
||||
overlay.appendChild(modal);
|
||||
document.body.appendChild(overlay);
|
||||
|
||||
// Schließe Modal bei Klick auf Overlay
|
||||
overlay.addEventListener('click', (e) => {
|
||||
if (e.target === overlay) {
|
||||
overlay.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// ESC-Taste zum Schließen
|
||||
const escHandler = (e) => {
|
||||
if (e.key === 'Escape') {
|
||||
overlay.remove();
|
||||
document.removeEventListener('keydown', escHandler);
|
||||
}
|
||||
};
|
||||
document.addEventListener('keydown', escHandler);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user