leftyer/MASA.Blazor
1
0
Fork 0
mirror of https://gitee.com/blazorcomponent/MASA.Blazor.git synced 2025-12-06 10:19:23 +08:00
Code Issues Packages Projects Releases Wiki Activity

🆕 feat(VideoFeeder): add AutoCoverInPortrait param for vertical video handling (#2512)

Browse Source
This commit is contained in:
capdiem
2025-07-28 15:10:58 +08:00
committed by GitHub
parent a41db1c238
commit 718c55ccaf
5 changed files with 18 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Masa.Blazor.JSComponents.VideoFeeder/VideoFeeder/MVideoFeeder.razor
View File

@@ -30,6 +30,7 @@
Autoplay="@Autoplay"
Loop="@_autoplayNext"
DynamicBg="@DynamicBg"
AutoCoverInPortrait="@AutoCoverInPortrait"
RotateFullscreen="@RotateFullscreen"
OnFullscreen="@HandleOnFullscreen"
OnLongPress="@OpenSheet"

5
src/Masa.Blazor.JSComponents.VideoFeeder/VideoFeeder/MVideoFeeder.razor.cs
View File

@@ -54,6 +54,11 @@ public partial class MVideoFeeder<TItem> where TItem : notnull
/// </summary>
[Parameter] public RenderFragment<BottomActionContext<TItem>>? BottomActionsContent { get; set; }
/// <summary>
/// Whether to automatically use cover mode for the video when it is in portrait orientation.
/// </summary>
[Parameter] public bool AutoCoverInPortrait { get; set; }
private static readonly Block Block = new("m-video-feeder");
private readonly ModifierBuilder _blockBuilder = Block.CreateModifierBuilder();

2
src/Masa.Blazor.JSComponents.VideoFeeder/VideoFeeder/Player.razor
View File

@@ -13,7 +13,7 @@
Loop="@Loop"
Url="@Data.Url"
Ignores="@IgnoredXgplayerPlugins"
Class="m-video-feeder__player"
Class="@_playerModifierBuilder.Add(Portrait).Build()"
Height="@("100%")"
Width="@("100%")"
OnReady="@OnReady"

8
src/Masa.Blazor.JSComponents.VideoFeeder/VideoFeeder/Player.razor.cs
View File

@@ -27,6 +27,8 @@ public partial class Player<TItem> : MasaComponentBase where TItem : notnull
[Parameter] public bool DynamicBg { get; set; }
[Parameter] public bool AutoCoverInPortrait { get; set; }
[Parameter] public EventCallback<FullscreenEventArgs<TItem>> OnFullscreen { get; set; }
[Parameter] public EventCallback OnEnded { get; set; }
@@ -51,11 +53,13 @@ public partial class Player<TItem> : MasaComponentBase where TItem : notnull
];
private static readonly Block _block = new("m-video-feeder");
private static readonly Element PlayerElement = _block.Element("player");
private static readonly Element ControlsElement = _block.Element("controls");
private static readonly Element ControlsTopElement = _block.Element("controls-top");
private static readonly Element ControlsBottomElement = _block.Element("controls-bottom");
private static readonly Element ControlsRightElement = _block.Element("controls-right");
private static readonly Element ControlsFullscreenElement = _block.Element("controls-fullscreen");
private readonly ModifierBuilder _playerModifierBuilder = PlayerElement.CreateModifierBuilder();
private readonly IDictionary<string, IDictionary<string, object>> _rightActionDefaults =
new Dictionary<string, IDictionary<string, object>>()
@@ -87,7 +91,9 @@ public partial class Player<TItem> : MasaComponentBase where TItem : notnull
private LongPressJSObject? _longPressJSObject;
private bool ShowFullscreenBtn => !_isMusic && _fullscreenChipStyle != null && _aspectRatio > 1;
private bool IsPortrait => _aspectRatio < 1;
private bool Portrait => AutoCoverInPortrait && IsPortrait;
private bool ShowFullscreenBtn => !_isMusic && _fullscreenChipStyle != null && !IsPortrait;
protected override Task OnInitializedAsync()
{

4
src/Masa.Blazor.JSComponents.VideoFeeder/wwwroot/css/video-feeder.css
View File

@@ -22,6 +22,10 @@
display: none !important;
}
.m-video-feeder__player--portrait video {
object-fit: cover;
}
.m-video-feeder__controls-top {
position: absolute;
top: 0;