Skip to content

Commit be7bdf9

Browse files
PrashantUnityPrashantUnity
committed
Common Laout fixes
1 parent 63f7fee commit be7bdf9

File tree

4 files changed

+328
-12
lines changed

4 files changed

+328
-12
lines changed

‎src/Component/PlayMediaMobile.razor‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
@using TomAndJerry.Model
2+
3+
@* A simplified PlayMedia view optimized for mobile *@
4+
<div class="cartoon-bg">
5+
<div class="max-w-7xl mx-auto px-2 py-2">
6+
<div class="space-y-3">
7+
<!-- Video Player -->
8+
<div class="relative bg-black rounded-xl overflow-hidden shadow-2xl border-4 border-jerry-brown">
9+
<div class="video-container">
10+
<iframe src="@EmbedUrl"
11+
frameborder="0"
12+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
13+
allowfullscreen
14+
key="@CurrentVideo?.Id"
15+
class="w-full h-full">
16+
</iframe>
17+
</div>
18+
</div>
19+
20+
<!-- Title -->
21+
<div class="tom-jerry-card p-3">
22+
<h1 class="text-xl font-bold font-cartoon text-amber-800 leading-tight cartoon-text">
23+
@(CurrentVideo?.CommentName?.Substring(6) ?? "Tom & Jerry Episode")
24+
</h1>
25+
</div>
26+
27+
<!-- Actions -->
28+
<div class="flex flex-wrap items-center gap-2">
29+
<button class="flex items-center justify-center px-3 py-2 bg-soft-blue rounded-full font-bold font-comic text-amber-800 min-h-[44px] min-w-[44px]">
30+
👍 Like
31+
</button>
32+
<button class="flex items-center justify-center px-3 py-2 bg-soft-red rounded-full font-bold font-comic text-amber-800 min-h-[44px] min-w-[44px]">
33+
🔗 Share
34+
</button>
35+
<button class="flex items-center justify-center px-3 py-2 bg-soft-yellow rounded-full font-bold font-comic text-amber-800 min-h-[44px] min-w-[44px]">
36+
📌 Save
37+
</button>
38+
</div>
39+
40+
<!-- Description -->
41+
<div class="bg-white rounded-xl p-3 shadow-lg border border-gray-100">
42+
<h3 class="text-lg font-bold text-gray-900 mb-2">Description</h3>
43+
<p class="text-sm text-gray-700 leading-relaxed">
44+
@(CurrentVideo?.Description ?? "Classic Tom & Jerry episode featuring the timeless rivalry between the clever mouse Jerry and the determined cat Tom.")
45+
</p>
46+
</div>
47+
48+
49+
</div>
50+
</div>
51+
</div>
52+
53+
@code {
54+
[Parameter] public Video? CurrentVideo { get; set; }
55+
[Parameter] public string EmbedUrl { get; set; } = string.Empty;
56+
[Parameter] public List<Video> RandomVideos { get; set; } = new();
57+
[Parameter] public bool IsLoadingMore { get; set; }
58+
[Parameter] public bool HasMoreVideos { get; set; }
59+
[Parameter] public EventCallback OnLoadMore { get; set; }
60+
[Parameter] public EventCallback<Video> OnNavigateToVideo { get; set; }
61+
}
62+
63+

‎src/Component/PlayMediaTablet.razor‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@using TomAndJerry.Model
2+
3+
@* A tablet-optimized layout with two-column feel when space allows *@
4+
<div class="cartoon-bg">
5+
<div class="max-w-7xl mx-auto px-4 py-4">
6+
<div class="grid grid-cols-1 gap-4">
7+
<!-- Main -->
8+
<div class="space-y-4">
9+
<div class="relative bg-black rounded-2xl overflow-hidden shadow-2xl border-4 border-jerry-brown">
10+
<div class="video-container">
11+
<iframe src="@EmbedUrl"
12+
frameborder="0"
13+
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
14+
allowfullscreen
15+
key="@CurrentVideo?.Id"
16+
class="w-full h-full">
17+
</iframe>
18+
</div>
19+
</div>
20+
21+
<div class="tom-jerry-card p-4">
22+
<h1 class="text-2xl font-bold font-cartoon text-amber-800 leading-tight cartoon-text">
23+
@(CurrentVideo?.CommentName?.Substring(6) ?? "Tom & Jerry Episode")
24+
</h1>
25+
</div>
26+
27+
<div class="bg-white rounded-2xl p-4 shadow-lg border border-gray-100">
28+
<h3 class="text-xl font-bold text-gray-900 mb-2">Description</h3>
29+
<p class="text-base text-gray-700 leading-relaxed">
30+
@(CurrentVideo?.Description ?? "Classic Tom & Jerry episode featuring the timeless rivalry between Jerry and Tom.")
31+
</p>
32+
</div>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
38+
@code {
39+
[Parameter] public Video? CurrentVideo { get; set; }
40+
[Parameter] public string EmbedUrl { get; set; } = string.Empty;
41+
[Parameter] public List<Video> RandomVideos { get; set; } = new();
42+
[Parameter] public bool IsLoadingMore { get; set; }
43+
[Parameter] public bool HasMoreVideos { get; set; }
44+
[Parameter] public EventCallback OnLoadMore { get; set; }
45+
[Parameter] public EventCallback<Video> OnNavigateToVideo { get; set; }
46+
}
47+
48+

‎src/Pages/PlayMedia.razor‎

Lines changed: 147 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,152 @@
11
@page "/playmedia/{videId}"
22
@using TomAndJerry.Services
3-
@inject NavigationManager nav
4-
@inject IVideoService VideoService
5-
@inject IStateService StateService
6-
@inject IJSRuntime JS
3+
@using TomAndJerry.Component
74

85
<PageTitle>@(currentVideo?.CommentName?.Substring(6) ?? "Tom & Jerry") - Tom & Jerry</PageTitle>
96

10-
<div class="min-h-screen cartoon-bg">
7+
@* Render device-specific views *@
8+
@if (ResponsiveService.IsMobile)
9+
{
10+
<PlayMediaMobile
11+
CurrentVideo="@currentVideo"
12+
EmbedUrl="@GetEmbeddableUrl(currentVideo?.VideoUrl ?? string.Empty)"
13+
RandomVideos="@randomVideos"
14+
IsLoadingMore="@isLoadingMore"
15+
HasMoreVideos="@hasMoreVideos"
16+
OnLoadMore="@LoadMoreVideos"
17+
OnNavigateToVideo="@GoTOPage" />
18+
19+
@* Mobile comments *@
20+
<div class="bg-white rounded-xl sm:rounded-2xl shadow-lg border border-gray-100 mt-4">
21+
<div class="p-4 sm:p-6 border-b border-gray-200">
22+
<div class="flex items-center justify-between">
23+
<div class="flex items-center space-x-2">
24+
<h3 class="text-lg font-bold text-gray-900">Comments</h3>
25+
<span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full">@GetRandomComments()</span>
26+
</div>
27+
</div>
28+
</div>
29+
<div>
30+
<div class="border-b border-gray-200">
31+
<nav class="flex space-x-4 sm:space-x-8 px-4 sm:px-6">
32+
<button @onclick="SetTabRelated"
33+
class="@(activeTab == "related" ? "border-red-500 text-red-600" : "border-transparent text-gray-500 hover:text-gray-700") py-3 sm:py-4 px-1 border-b-2 font-medium text-xs sm:text-sm transition-colors min-h-[44px]">
34+
Related
35+
</button>
36+
<button @onclick="SetTabGiscus"
37+
class="@(activeTab == "giscus" ? "border-red-500 text-red-600" : "border-transparent text-gray-500 hover:text-gray-700") py-3 sm:py-4 px-1 border-b-2 font-medium text-xs sm:text-sm transition-colors min-h-[44px]">
38+
Giscus
39+
</button>
40+
<button @onclick="SetTabDisqusAsync"
41+
class="@(activeTab == "disqus" ? "border-red-500 text-red-600" : "border-transparent text-gray-500 hover:text-gray-700") py-3 sm:py-4 px-1 border-b-2 font-medium text-xs sm:text-sm transition-colors min-h-[44px]">
42+
Disqus
43+
</button>
44+
</nav>
45+
</div>
46+
<div class="p-4 sm:p-6">
47+
@if (activeTab == "giscus")
48+
{
49+
<Giscus Term="@(currentVideo?.CommentName ?? "")"/>
50+
}
51+
else if (activeTab == "disqus")
52+
{
53+
<div id="disqus_thread"></div>
54+
}
55+
else if (activeTab == "related")
56+
{
57+
<div class="space-y-3">
58+
@foreach (var item in randomVideos)
59+
{
60+
<div @onclick="()=>GoTOPage(item)" class="cursor-pointer">
61+
<Thumbnail VideoModel="@item" />
62+
</div>
63+
}
64+
@if (hasMoreVideos)
65+
{
66+
<button @onclick="LoadMoreVideos" disabled="@isLoadingMore"
67+
class="w-full px-4 py-2 bg-soft-blue hover:bg-cartoon-yellow text-amber-800 rounded-full font-bold font-comic transition-colors disabled:opacity-50">
68+
@(isLoadingMore ? "Loading..." : "Load more videos")
69+
</button>
70+
}
71+
</div>
72+
}
73+
</div>
74+
</div>
75+
</div>
76+
}
77+
else if (ResponsiveService.IsTablet)
78+
{
79+
<PlayMediaTablet
80+
CurrentVideo="@currentVideo"
81+
EmbedUrl="@GetEmbeddableUrl(currentVideo?.VideoUrl ?? string.Empty)"
82+
RandomVideos="@randomVideos"
83+
IsLoadingMore="@isLoadingMore"
84+
HasMoreVideos="@hasMoreVideos"
85+
OnLoadMore="@LoadMoreVideos"
86+
OnNavigateToVideo="@GoTOPage" />
87+
88+
@* Tablet comments *@
89+
<div class="bg-white rounded-xl sm:rounded-2xl shadow-lg border border-gray-100 mt-4">
90+
<div class="p-4 sm:p-6 border-b border-gray-200">
91+
<div class="flex items-center justify-between">
92+
<div class="flex items-center space-x-2">
93+
<h3 class="text-lg font-bold text-gray-900">Comments</h3>
94+
<span class="px-2 py-1 bg-gray-100 text-gray-600 text-xs font-medium rounded-full">@GetRandomComments()</span>
95+
</div>
96+
</div>
97+
</div>
98+
<div>
99+
<div class="border-b border-gray-200">
100+
<nav class="flex space-x-4 sm:space-x-8 px-4 sm:px-6">
101+
<button @onclick="SetTabRelated"
102+
class="@(activeTab == "related" ? "border-red-500 text-red-600" : "border-transparent text-gray-500 hover:text-gray-700") py-3 sm:py-4 px-1 border-b-2 font-medium text-xs sm:text-sm transition-colors min-h-[44px]">
103+
Related
104+
</button>
105+
<button @onclick="SetTabGiscus"
106+
class="@(activeTab == "giscus" ? "border-red-500 text-red-600" : "border-transparent text-gray-500 hover:text-gray-700") py-3 sm:py-4 px-1 border-b-2 font-medium text-xs sm:text-sm transition-colors min-h-[44px]">
107+
Giscus
108+
</button>
109+
<button @onclick="SetTabDisqusAsync"
110+
class="@(activeTab == "disqus" ? "border-red-500 text-red-600" : "border-transparent text-gray-500 hover:text-gray-700") py-3 sm:py-4 px-1 border-b-2 font-medium text-xs sm:text-sm transition-colors min-h-[44px]">
111+
Disqus
112+
</button>
113+
</nav>
114+
</div>
115+
<div class="p-4 sm:p-6">
116+
@if (activeTab == "giscus")
117+
{
118+
<Giscus Term="@(currentVideo?.CommentName ?? "")"/>
119+
}
120+
else if (activeTab == "disqus")
121+
{
122+
<div id="disqus_thread"></div>
123+
}
124+
else if (activeTab == "related")
125+
{
126+
<div class="space-y-3">
127+
@foreach (var item in randomVideos)
128+
{
129+
<div @onclick="()=>GoTOPage(item)" class="cursor-pointer">
130+
<Thumbnail VideoModel="@item" />
131+
</div>
132+
}
133+
@if (hasMoreVideos)
134+
{
135+
<button @onclick="LoadMoreVideos" disabled="@isLoadingMore"
136+
class="w-full px-4 py-2 bg-soft-blue hover:bg-cartoon-yellow text-amber-800 rounded-full font-bold font-comic transition-colors disabled:opacity-50">
137+
@(isLoadingMore ? "Loading..." : "Load more videos")
138+
</button>
139+
}
140+
</div>
141+
}
142+
</div>
143+
</div>
144+
</div>
145+
}
146+
else
147+
{
148+
149+
<div class="cartoon-bg">
11150
<div id="playmedia-main-container" class="max-w-7xl mx-auto px-2 sm:px-4 lg:px-8 py-2 sm:py-4 lg:py-6">
12151
<div id="playmedia-grid" class="grid grid-cols-1 lg:grid-cols-4 gap-3 sm:gap-4 lg:gap-6">
13152
<!-- Main Content Area -->
@@ -188,11 +327,11 @@
188327
<div>
189328
<div class="border-b border-gray-200">
190329
<nav class="flex space-x-4 sm:space-x-8 px-4 sm:px-6">
191-
<button @onclick="@(() => { activeTab = "giscus"; StateHasChanged(); })"
330+
<button @onclick="SetTabGiscus"
192331
class="@(activeTab == "giscus" ? "border-red-500 text-red-600" : "border-transparent text-gray-500 hover:text-gray-700") py-3 sm:py-4 px-1 border-b-2 font-medium text-xs sm:text-sm transition-colors min-h-[44px]">
193332
Giscus
194333
</button>
195-
<button @onclick="@(async () => { activeTab = "disqus"; await LoadGiscud(currentVideo?.CommentName ?? ""); StateHasChanged(); })"
334+
<button @onclick="SetTabDisqusAsync"
196335
class="@(activeTab == "disqus" ? "border-red-500 text-red-600" : "border-transparent text-gray-500 hover:text-gray-700") py-3 sm:py-4 px-1 border-b-2 font-medium text-xs sm:text-sm transition-colors min-h-[44px]">
197336
Disqus
198337
</button>
@@ -280,8 +419,5 @@
280419
</div>
281420
</div>
282421
</div>
283-
</div>
284-
285-
@code
286-
{
422+
</div>
287423
}

0 commit comments

Comments
 (0)