Update video details to fetch real title & thumbnail only
Refactored backend to extract actual YouTube title and thumbnail from HTML, removing simulated metadata fields (description, author, duration, views, upload date, tags). Simplified UI to display only title and thumbnail, and enhanced visuals with animated musical notes background. Removed related formatting and display logic for unused metadata.
This commit is contained in:
Michal Vrba
@@ -1,5 +1,8 @@
|
||||
using TuneRipper.Shared.Models;
|
||||
using System.Text.RegularExpressions;
|
||||
using System.Net.Http;
|
||||
using System.Threading.Tasks;
|
||||
using System.Text.RegularExpressions;
|
||||
|
||||
namespace TuneRipper.Api.Services;
|
||||
|
||||
@@ -13,10 +16,12 @@ public interface IVideoService
|
||||
public class VideoService : IVideoService
|
||||
{
|
||||
private readonly ILogger<VideoService> _logger;
|
||||
private readonly HttpClient _httpClient;
|
||||
|
||||
public VideoService(ILogger<VideoService> logger)
|
||||
{
|
||||
_logger = logger;
|
||||
_httpClient = new HttpClient();
|
||||
}
|
||||
|
||||
public async Task<YouTubeVideoDetails?> GetVideoDetailsAsync(string url)
|
||||
@@ -29,26 +34,48 @@ public class VideoService : IVideoService
|
||||
return null;
|
||||
}
|
||||
|
||||
// Simulate API call delay
|
||||
await Task.Delay(Random.Shared.Next(500, 2000));
|
||||
|
||||
var videoId = ExtractVideoId(url);
|
||||
var thumbnailUrl = $"https://img.youtube.com/vi/{videoId}/maxresdefault.jpg";
|
||||
string? title = null;
|
||||
|
||||
// Fetch HTML and parse title
|
||||
try
|
||||
{
|
||||
var html = await _httpClient.GetStringAsync(url);
|
||||
// Try OpenGraph title first
|
||||
var ogTitleMatch = Regex.Match(html, "<meta property='og:title' content='(.*?)'", RegexOptions.IgnoreCase);
|
||||
if (!ogTitleMatch.Success)
|
||||
{
|
||||
ogTitleMatch = Regex.Match(html, "<meta property=\"og:title\" content=\"(.*?)\"", RegexOptions.IgnoreCase);
|
||||
}
|
||||
if (ogTitleMatch.Success)
|
||||
{
|
||||
title = ogTitleMatch.Groups[1].Value;
|
||||
}
|
||||
else
|
||||
{
|
||||
// Fallback to <title>
|
||||
var titleMatch = Regex.Match(html, "<title>(.*?)</title>", RegexOptions.IgnoreCase);
|
||||
if (titleMatch.Success)
|
||||
{
|
||||
title = titleMatch.Groups[1].Value.Replace(" - YouTube", "").Trim();
|
||||
}
|
||||
}
|
||||
}
|
||||
catch (Exception ex)
|
||||
{
|
||||
_logger.LogWarning(ex, "Failed to fetch or parse video title for {Url}", url);
|
||||
title = $"YouTube Video {videoId}";
|
||||
}
|
||||
|
||||
// In production, use YouTube API or yt-dlp to get actual video details
|
||||
var videoDetails = new YouTubeVideoDetails
|
||||
{
|
||||
Id = videoId,
|
||||
Title = GenerateSampleTitle(videoId),
|
||||
Description = $"Video description for {videoId}. In production, this would be fetched from YouTube API.",
|
||||
ThumbnailUrl = $"https://img.youtube.com/vi/{videoId}/maxresdefault.jpg",
|
||||
Duration = TimeSpan.FromMinutes(Random.Shared.Next(2, 10)).Add(TimeSpan.FromSeconds(Random.Shared.Next(0, 59))),
|
||||
Author = $"Channel_{Random.Shared.Next(1, 1000)}",
|
||||
ViewCount = Random.Shared.Next(100, 5000000),
|
||||
UploadDate = DateTime.UtcNow.AddDays(-Random.Shared.Next(1, 1000)),
|
||||
Tags = GenerateSampleTags()
|
||||
Title = title,
|
||||
ThumbnailUrl = thumbnailUrl
|
||||
};
|
||||
|
||||
_logger.LogInformation("Successfully fetched details for video {VideoId}", videoId);
|
||||
_logger.LogInformation("Fetched image and title for video {VideoId}", videoId);
|
||||
return videoDetails;
|
||||
}
|
||||
catch (Exception ex)
|
||||
@@ -81,7 +108,6 @@ public class VideoService : IVideoService
|
||||
|
||||
try
|
||||
{
|
||||
// Different YouTube URL formats
|
||||
var patterns = new Dictionary<string, string>
|
||||
{
|
||||
{ @"youtu\.be/([^?&]+)", "$1" },
|
||||
@@ -106,29 +132,4 @@ public class VideoService : IVideoService
|
||||
|
||||
return string.Empty;
|
||||
}
|
||||
|
||||
private static string GenerateSampleTitle(string videoId)
|
||||
{
|
||||
var sampleTitles = new[]
|
||||
{
|
||||
"Amazing Music Video",
|
||||
"Best Song Ever",
|
||||
"Epic Guitar Solo",
|
||||
"Relaxing Piano Music",
|
||||
"Dance Hit 2024",
|
||||
"Acoustic Session",
|
||||
"Live Performance",
|
||||
"Official Music Video"
|
||||
};
|
||||
|
||||
var randomTitle = sampleTitles[Random.Shared.Next(sampleTitles.Length)];
|
||||
return $"{randomTitle} - {videoId}";
|
||||
}
|
||||
|
||||
private static List<string> GenerateSampleTags()
|
||||
{
|
||||
var allTags = new[] { "music", "video", "song", "artist", "album", "live", "official", "acoustic", "cover", "remix" };
|
||||
var tagCount = Random.Shared.Next(3, 7);
|
||||
return allTags.OrderBy(x => Random.Shared.Next()).Take(tagCount).ToList();
|
||||
}
|
||||
}
|
||||
@@ -4,11 +4,5 @@ public class YouTubeVideoDetails
|
||||
{
|
||||
public string? Id { get; set; }
|
||||
public string? Title { get; set; }
|
||||
public string? Description { get; set; }
|
||||
public string? ThumbnailUrl { get; set; }
|
||||
public TimeSpan Duration { get; set; }
|
||||
public string? Author { get; set; }
|
||||
public int ViewCount { get; set; }
|
||||
public DateTime UploadDate { get; set; }
|
||||
public List<string> Tags { get; set; } = new();
|
||||
}
|
||||
+16
-97
@@ -6,7 +6,21 @@
|
||||
|
||||
<PageTitle>TuneRipper - YouTube to MP3 Downloader</PageTitle>
|
||||
|
||||
<div class="hero-section">
|
||||
<!-- Floating Musical Notes Background -->
|
||||
<div class="page-background">
|
||||
<div class="music-notes">
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♫</div>
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♬</div>
|
||||
<div class="note">♫</div>
|
||||
<div class="note">♪</div>
|
||||
<div class="note">♬</div>
|
||||
<div class="note">♫</div>
|
||||
<div class="note">♪</div>
|
||||
</div>
|
||||
|
||||
<div class="hero-section">
|
||||
<div class="logo-container">
|
||||
<img src="images/logo.png" alt="TuneRipper Logo" class="logo" />
|
||||
<h1 class="app-title">TuneRipper</h1>
|
||||
@@ -56,40 +70,6 @@
|
||||
</div>
|
||||
<div class="video-details">
|
||||
<h4 class="video-title">@currentVideoDetails.Title</h4>
|
||||
<div class="video-meta">
|
||||
<span class="meta-item">
|
||||
<span class="meta-icon">👤</span>
|
||||
<span>@currentVideoDetails.Author</span>
|
||||
</span>
|
||||
<span class="meta-item">
|
||||
<span class="meta-icon">⏱️</span>
|
||||
<span>@FormatDuration(currentVideoDetails.Duration)</span>
|
||||
</span>
|
||||
<span class="meta-item">
|
||||
<span class="meta-icon">👁️</span>
|
||||
<span>@FormatViewCount(currentVideoDetails.ViewCount) views</span>
|
||||
</span>
|
||||
<span class="meta-item">
|
||||
<span class="meta-icon">📅</span>
|
||||
<span>@currentVideoDetails.UploadDate.ToString("MMM dd, yyyy")</span>
|
||||
</span>
|
||||
</div>
|
||||
@if (currentVideoDetails.Tags?.Any() == true)
|
||||
{
|
||||
<div class="video-tags">
|
||||
@foreach (var tag in currentVideoDetails.Tags.Take(5))
|
||||
{
|
||||
<span class="tag">@tag</span>
|
||||
}
|
||||
</div>
|
||||
}
|
||||
@if (isProcessing)
|
||||
{
|
||||
<div class="conversion-status">
|
||||
<span class="status-icon">⚡</span>
|
||||
<span class="status-text">Converting to MP3...</span>
|
||||
</div>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -167,6 +147,7 @@
|
||||
<span>Completely Free</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -384,40 +365,6 @@
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.video-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.meta-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-size: 13px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.meta-icon {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.video-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tag {
|
||||
background: #f0f0f0;
|
||||
color: #666;
|
||||
font-size: 11px;
|
||||
padding: 4px 8px;
|
||||
border-radius: 12px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 15px;
|
||||
padding: 12px;
|
||||
@@ -696,34 +643,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
private string FormatDuration(TimeSpan duration)
|
||||
{
|
||||
if (duration.TotalHours >= 1)
|
||||
{
|
||||
return duration.ToString(@"h\:mm\:ss");
|
||||
}
|
||||
else
|
||||
{
|
||||
return duration.ToString(@"m\:ss");
|
||||
}
|
||||
}
|
||||
|
||||
private string FormatViewCount(int viewCount)
|
||||
{
|
||||
if (viewCount >= 1_000_000)
|
||||
{
|
||||
return $"{viewCount / 1_000_000.0:F1}M";
|
||||
}
|
||||
else if (viewCount >= 1_000)
|
||||
{
|
||||
return $"{viewCount / 1_000.0:F1}K";
|
||||
}
|
||||
else
|
||||
{
|
||||
return viewCount.ToString("N0");
|
||||
}
|
||||
}
|
||||
|
||||
private string ExtractTitleFromUrl(string url)
|
||||
{
|
||||
if (url.Contains("youtube.com/watch?v=") || url.Contains("youtu.be/"))
|
||||
|
||||
Reference in New Issue
Block a user