Skip to content

Commit 556b754

Browse files
PrashantUnityPrashantUnity
committed
Initial working
1 parent 4c49c80 commit 556b754

File tree

18 files changed

+970
-888
lines changed

18 files changed

+970
-888
lines changed

‎.DS_Store‎

6 KB
Binary file not shown.

‎Component/AppBar.razor‎

Lines changed: 67 additions & 93 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,75 @@
11
@inject Data Datas
22
@inject NavigationManager nav
33
@inject IJSRuntime JSRuntime
4-
<MudAppBar
5-
Color="Color.Secondary"
6-
Fixed="true"
7-
Dense="true"
8-
Elevation="0"
9-
Class="">
10-
<MudIconButton
11-
Icon="@Icons.Material.Filled.Home"
12-
Color="Color.Inherit"
13-
Edge="Edge.Start"
14-
OnClick="GoToHomePage"/>
15-
<MudSpacer/>
16-
<MudPaper Elevation="0" Class="mx-6">
17-
<div class="InputContainer">
18-
<input type="text"
19-
name="text"
20-
@bind-value="@FindData"
21-
class="input" id="input"
22-
placeholder="Search">
234

24-
<label for="input" class="labelforsearch">
25-
26-
</label>
27-
28-
<button class="micButton" @onclick="GoTOPage">
29-
<svg viewBox="0 0 512 512" class="searchIcon">
30-
<path
31-
d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"></path>
32-
</svg>
33-
</button>
5+
<header class="fixed top-0 left-0 right-0 z-50 bg-white border-b border-gray-200 shadow-sm">
6+
<div class="max-w-7xl mx-auto px-4">
7+
<div class="flex items-center justify-between h-16">
8+
<!-- Left Section -->
9+
<div class="flex items-center space-x-4">
10+
<!-- Menu Button -->
11+
<button @onclick="GoToHomePage"
12+
class="p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-full transition-colors">
13+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
14+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
15+
</svg>
16+
</button>
17+
18+
<!-- Logo -->
19+
<div class="flex items-center space-x-3">
20+
<div class="w-8 h-8 rounded-full overflow-hidden">
21+
<img src="Tom.png" alt="Tom & Jerry" class="w-full h-full object-cover"/>
22+
</div>
23+
<span class="text-xl font-bold text-gray-900">Tom & Jerry</span>
24+
</div>
25+
</div>
26+
27+
<!-- Center Section - Search -->
28+
<div class="flex-1 max-w-2xl mx-8">
29+
<div class="relative">
30+
<div class="flex items-center bg-white border border-gray-300 rounded-full shadow-sm hover:shadow-md transition-shadow">
31+
<input type="text"
32+
name="text"
33+
@bind-value="@FindData"
34+
class="flex-1 px-4 py-2 text-sm border-0 rounded-l-full focus:outline-none focus:ring-0"
35+
placeholder="Search Tom & Jerry episodes...">
36+
37+
<button class="px-4 py-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-r-full transition-colors"
38+
@onclick="GoTOPage">
39+
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
40+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
41+
</svg>
42+
</button>
43+
</div>
44+
</div>
45+
</div>
46+
47+
<!-- Right Section -->
48+
<div class="flex items-center space-x-2">
49+
<!-- Stats -->
50+
<div class="hidden md:flex items-center space-x-4 text-sm text-gray-600">
51+
<div class="text-center">
52+
@if (Datas.VideosData.Count == 0)
53+
{
54+
<div class="h-5 bg-gray-200 rounded w-8 mx-auto mb-1 skeleton"></div>
55+
<div class="text-xs text-gray-500">Episodes</div>
56+
}
57+
else
58+
{
59+
<div class="font-semibold text-gray-900">@Datas.VideosData.Count</div>
60+
<div class="text-xs text-gray-500">Episodes</div>
61+
}
62+
</div>
63+
</div>
64+
65+
<!-- Profile -->
66+
<div class="w-8 h-8 rounded-full overflow-hidden ring-2 ring-gray-200">
67+
<img src="Tom.png" alt="Profile" class="w-full h-full object-cover"/>
68+
</div>
69+
</div>
3470
</div>
35-
</MudPaper>
36-
</MudAppBar>
71+
</div>
72+
</header>
3773

3874
@code {
3975
public string FindData = string.Empty;
@@ -96,65 +132,3 @@
96132
}
97133

98134
}
99-
100-
<style>
101-
.InputContainer {
102-
height: 40px;
103-
display: flex;
104-
align-items: center;
105-
justify-content: center;
106-
background-color: rgb(255, 255, 255);
107-
border-radius: 10px;
108-
overflow: hidden;
109-
cursor: pointer;
110-
padding-left: 15px;
111-
box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.075);
112-
}
113-
114-
.input {
115-
width: 100%;
116-
height: 100%;
117-
border: none;
118-
outline: none;
119-
font-size: xx-large;
120-
font-weight: bold;
121-
caret-color: rgb(255, 81, 0);
122-
}
123-
124-
125-
.searchIcon {
126-
width: 13px;
127-
}
128-
129-
.border {
130-
height: 40%;
131-
width: 1.3px;
132-
background-color: rgb(223, 223, 223);
133-
}
134-
135-
.micIcon {
136-
width: 12px;
137-
}
138-
139-
.micButton {
140-
padding: 0px 15px 0px 12px;
141-
border: none;
142-
background-color: transparent;
143-
height: 40px;
144-
cursor: pointer;
145-
transition-duration: .3s;
146-
}
147-
148-
.searchIcon path {
149-
fill: rgb(114, 114, 114);
150-
}
151-
152-
.micIcon path {
153-
fill: rgb(255, 81, 0);
154-
}
155-
156-
.micButton:hover {
157-
background-color: rgb(255, 230, 230);
158-
transition-duration: .3s;
159-
}
160-
</style>

‎Component/ErrorPage.razor‎

Lines changed: 23 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,29 @@
11
@inject NavigationManager Nav
2-
@inject IDialogService DialogService
3-
<MudPaper Class="d-flex flex-wrap justify-center "
4-
Style="background-color:transparent"
5-
Elevation="0"
6-
Width="100%">
7-
<MudImage
8-
Src="Tom.png"
9-
Alt="404 Error page"
10-
Class="rounded-lg imageHight"
11-
@onclick="Home"
12-
/>
13-
</MudPaper>
14-
<MudDialog @bind-IsVisible="_visible" Options="_dialogOptions">
15-
<DialogContent>
16-
<MudImage Src="Tom.png"
17-
Alt="404 Error page"
18-
Class="rounded-lg"
19-
Fluid="true"
20-
@onclick="Home"/>
21-
<MudButton Variant="Variant.Outlined"
22-
Color="Color.Secondary"
23-
OnClick="Home"
24-
Class="px-10 " FullWidth="true">Go Home
25-
</MudButton>
26-
</DialogContent>
27-
</MudDialog>
282

29-
@code {
30-
private bool _visible = true;
31-
private DialogOptions _dialogOptions = new() { FullWidth = true, ClassBackground = "my-custom-class" };
3+
<div class="min-h-screen bg-gray-50 flex items-center justify-center p-4">
4+
<div class="max-w-md w-full bg-white rounded-xl shadow-lg p-8 text-center">
5+
<div class="mb-6">
6+
<img src="Tom.png"
7+
alt="404 Error page"
8+
class="w-32 h-32 mx-auto rounded-full object-cover cursor-pointer hover:scale-105 transition-transform"
9+
@onclick="Home"/>
10+
</div>
11+
12+
<h1 class="text-3xl font-bold text-gray-900 mb-4">Oops! Page Not Found</h1>
13+
<p class="text-gray-600 mb-8">
14+
Looks like Tom chased Jerry away from this page! Let's go back home and find some classic episodes.
15+
</p>
16+
17+
<button @onclick="Home"
18+
class="w-full px-6 py-3 bg-red-600 text-white rounded-lg hover:bg-red-700 transition-colors font-medium">
19+
Go Home
20+
</button>
21+
</div>
22+
</div>
3223

24+
@code {
3325
void Home()
3426
{
35-
_visible = false;
36-
Nav.NavigateTo($"");
37-
}
38-
39-
}
40-
41-
<style>
42-
.imageHight {
43-
height: 80%;
44-
width: 80%;
45-
}
46-
47-
.my-custom-class {
48-
backdrop-filter: blur(10px);
27+
Nav.NavigateTo("/");
4928
}
50-
</style>
29+
}

‎Component/Thumbnail.razor‎

Lines changed: 93 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,50 @@
11
@inject NavigationManager Nav
22

3-
4-
<MudPaper Width="400px" MaxHeight="480px" Class="mx-1 my-2" Style="background-color:transparent">
5-
<MudCard>
6-
<MudCardMedia Image="@VideoModel.Thumbnail" Height="300"/>
7-
<MudCardContent>
8-
<MudText
9-
Typo="Typo.h5">@string.Join(" ", VideoModel.Description.Split(".").Where(x => x != "mkv").Select(x => x))</MudText>
10-
</MudCardContent>
11-
</MudCard>
12-
</MudPaper>
13-
3+
<div class="video-card cursor-pointer group" @onclick="GoToPage">
4+
<!-- Thumbnail Container -->
5+
<div class="relative aspect-video bg-gray-200 rounded-lg overflow-hidden mb-3">
6+
<img src="@VideoModel.Thumbnail"
7+
alt="@GetCleanTitle()"
8+
class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300"/>
9+
10+
<!-- Play Button Overlay -->
11+
<div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
12+
<div class="w-16 h-16 bg-red-600 rounded-full flex items-center justify-center shadow-lg">
13+
<svg class="w-6 h-6 text-white ml-1" fill="currentColor" viewBox="0 0 20 20">
14+
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clip-rule="evenodd"/>
15+
</svg>
16+
</div>
17+
</div>
18+
19+
<!-- Duration Badge -->
20+
<div class="absolute bottom-2 right-2 bg-black bg-opacity-80 text-white text-xs px-2 py-1 rounded">
21+
7:30
22+
</div>
23+
</div>
24+
25+
<!-- Video Info -->
26+
<div class="space-y-2">
27+
<!-- Title -->
28+
<h3 class="font-medium text-gray-900 text-sm line-clamp-2 group-hover:text-red-600 transition-colors">
29+
@GetCleanTitle()
30+
</h3>
31+
32+
<!-- Channel Info -->
33+
<div class="flex items-center space-x-2">
34+
<div class="w-6 h-6 rounded-full overflow-hidden">
35+
<img src="Tom.png" alt="Tom & Jerry" class="w-full h-full object-cover"/>
36+
</div>
37+
<span class="text-xs text-gray-600">Tom & Jerry</span>
38+
</div>
39+
40+
<!-- Stats -->
41+
<div class="text-xs text-gray-500">
42+
<span>@GetRandomViews() views</span>
43+
<span class="mx-1">•</span>
44+
<span>@GetRandomTimeAgo()</span>
45+
</div>
46+
</div>
47+
</div>
1448

1549
@code
1650
{
@@ -20,4 +54,51 @@
2054
{
2155
Nav.NavigateTo($"playmedia/{VideoModel.Id}");
2256
}
23-
}
57+
58+
private string GetCleanTitle()
59+
{
60+
return string.Join(" ", VideoModel.Description.Split(".").Where(x => x != "mkv").Select(x => x));
61+
}
62+
63+
private string GetRandomViews()
64+
{
65+
var random = new Random();
66+
var views = random.Next(100, 10000);
67+
if (views >= 1000)
68+
{
69+
return $"{views / 1000:F1}K";
70+
}
71+
return views.ToString();
72+
}
73+
74+
private string GetRandomTimeAgo()
75+
{
76+
var random = new Random();
77+
var days = random.Next(1, 365);
78+
if (days < 7)
79+
return $"{days} days ago";
80+
else if (days < 30)
81+
return $"{days / 7} weeks ago";
82+
else if (days < 365)
83+
return $"{days / 30} months ago";
84+
else
85+
return $"{days / 365} years ago";
86+
}
87+
}
88+
89+
<style>
90+
.line-clamp-2 {
91+
display: -webkit-box;
92+
-webkit-line-clamp: 2;
93+
-webkit-box-orient: vertical;
94+
overflow: hidden;
95+
}
96+
97+
.video-card {
98+
transition: all 0.2s ease-in-out;
99+
}
100+
101+
.video-card:hover {
102+
transform: translateY(-2px);
103+
}
104+
</style>

‎Layout/MainLayout.razor‎

Lines changed: 8 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,19 @@
11
@inherits LayoutComponentBase
2-
<MudThemeProvider/>
3-
<MudDialogProvider/>
4-
<MudSnackbarProvider/>
52
<ErrorBoundary>
63
<ChildContent>
7-
<MudLayout>
4+
<div class="min-h-screen bg-gray-50">
85
<AppBar/>
9-
<MudMainContent>
6+
<main class="pt-16">
107
@Body
11-
</MudMainContent>
12-
</MudLayout>
8+
</main>
9+
</div>
1310
</ChildContent>
1411
<ErrorContent>
15-
<MudLayout>
12+
<div class="min-h-screen bg-gray-50">
1613
<AppBar/>
17-
<MudMainContent>
14+
<main class="pt-16">
1815
@Body
19-
</MudMainContent>
20-
</MudLayout>
16+
</main>
17+
</div>
2118
</ErrorContent>
2219
</ErrorBoundary>

0 commit comments

Comments
 (0)