BililiveRecorder/BililiveRecorder.WPF/Controls/RoomCard.xaml

<UserControl
    x:Class="BililiveRecorder.WPF.Controls.RoomCard"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    xmlns:ui="http://schemas.modernwpf.com/2019"
    xmlns:l="https://github.com/XAMLMarkupExtensions/WPFLocalizationExtension"
    l:LocalizeDictionary.DesignCulture=""
    l:ResxLocalizationProvider.DefaultAssembly="BililiveRecorder.WPF"
    l:ResxLocalizationProvider.DefaultDictionary="Strings"
    xmlns:local="clr-namespace:BililiveRecorder.WPF.Controls"
    xmlns:core="clr-namespace:BililiveRecorder.Core;assembly=BililiveRecorder.Core"
    d:DataContext="{d:DesignInstance core:Room}"
    d:DesignWidth="220" d:DesignHeight="110"
    mc:Ignorable="d">
    <Border Background="{DynamicResource SystemControlBackgroundAltHighBrush}"
            BorderBrush="{DynamicResource SystemControlBackgroundAccentBrush}" 
            BorderThickness="1"
            CornerRadius="5">
        <Grid Margin="8,5">
            <Grid.RowDefinitions>
                <RowDefinition Height="30"/>
                <RowDefinition Height="*"/>
                <RowDefinition Height="25"/>
            </Grid.RowDefinitions>
            <TextBlock VerticalAlignment="Center" Style="{DynamicResource SubtitleTextBlockStyle}" 
                       TextWrapping="NoWrap" TextTrimming="CharacterEllipsis" FontFamily="Microsoft Yahei" 
                       Text="{Binding Name,Mode=OneWay}" ToolTip="{Binding Name,Mode=OneWay}"
                       ContextMenu="{StaticResource CopyTextContextMenu}"/>

            <Grid Grid.Row="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="Auto"/>
                    <RowDefinition Height="*"/>
                </Grid.RowDefinitions>
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>
                <TextBlock Grid.Row="0" Text="{Binding Title}" ToolTip="{Binding Title}"
                           Visibility="{Binding RoomConfig.WpfShowTitleAndArea,Converter={StaticResource BooleanToVisibilityCollapsedConverter}}"
                           TextTrimming="CharacterEllipsis" ContextMenu="{StaticResource CopyTextContextMenu}"/>
                <StackPanel Grid.Row="1" Orientation="Horizontal"
                            Visibility="{Binding RoomConfig.WpfShowTitleAndArea,Converter={StaticResource BooleanToVisibilityCollapsedConverter}}">
                    <TextBlock Text="{Binding AreaNameParent}"
                               ContextMenu="{StaticResource CopyTextContextMenu}"/>
                    <TextBlock Text=" · "/>
                    <TextBlock Text="{Binding AreaNameChild}"
                               ContextMenu="{StaticResource CopyTextContextMenu}"/>
                </StackPanel>
                <StackPanel Grid.Row="3" VerticalAlignment="Center" HorizontalAlignment="Stretch" Orientation="Horizontal">
                    <ui:PathIcon Height="10" Margin="0,0,2,0" Style="{Binding DanmakuConnected,Converter={StaticResource BooleanToDanmakuConnectedStyleConverter}}"
                             Foreground="{Binding DanmakuConnected,Converter={StaticResource BooleanToDanmakuConnectedColorBrushConverter}}"
                             ToolTip="{Binding DanmakuConnected,Converter={StaticResource BooleanToDanmakuConnectedTooltipConverter}}"/>
                    <ui:PathIcon Height="10" Margin="0,0,3,0" Style="{StaticResource PathIconDataAccessPoint}"
                             Foreground="{Binding Streaming,Converter={StaticResource BooleanToLiveStatusColorBrushConverter}}"
                             ToolTip="{Binding Streaming,Converter={StaticResource BooleanToLiveStatusTooltipConverter}}"/>
                    <ui:PathIcon Height="10" Style="{StaticResource PathIconDataUpperCaseIdentifier}" />
                    <TextBlock Text="{Binding RoomConfig.RoomId, StringFormat=\{0\},Mode=OneWay}" ContextMenu="{StaticResource CopyTextContextMenu}" Margin="4,0" FontSize="11"/>
                    <ui:PathIcon Height="10" Style="{StaticResource PathIconDataLowerCaseIdentifier}" Margin="3,0"
                             Visibility="{Binding ShortId,Converter={StaticResource ShortRoomIdToVisibilityConverter}}"/>
                    <TextBlock Text="{Binding ShortId, StringFormat=\{0\},Mode=OneWay}" ContextMenu="{StaticResource CopyTextContextMenu}" FontSize="11"
                           Visibility="{Binding ShortId,Converter={StaticResource ShortRoomIdToVisibilityConverter}}"/>
                </StackPanel>
                <Menu Grid.Column="1" Grid.RowSpan="3" VerticalAlignment="Center" HorizontalAlignment="Right">
                    <MenuItem ToolTip="{l:Loc RoomCard_Menu_Tooltip}">
                        <MenuItem.Header>
                            <ui:PathIcon Height="20" Width="20" Style="{StaticResource PathIconDataDotsVertical}"/>
                        </MenuItem.Header>
                        <MenuItem Header="{l:Loc RoomCard_Menu_StartRecording}" Click="MenuItem_StartRecording_Click">
                            <MenuItem.Icon>
                                <ui:PathIcon Style="{StaticResource PathIconDataPlayCircleOutline}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <MenuItem Header="{l:Loc RoomCard_Menu_StopRecording}" Click="MenuItem_StopRecording_Click">
                            <MenuItem.Icon>
                                <ui:PathIcon Style="{StaticResource PathIconDataStopCircleOutline}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <MenuItem Header="{l:Loc RoomCard_Menu_RefreshInfo}" Click="MenuItem_RefreshInfo_Click">
                            <MenuItem.Icon>
                                <ui:PathIcon Style="{StaticResource PathIconDataRefresh}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <MenuItem Header="{l:Loc RoomCard_Menu_OpenInBrowser}" Click="MenuItem_OpenInBrowser_Click">
                            <MenuItem.Icon>
                                <ui:PathIcon Style="{StaticResource PathIconDataOpenInNew}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <Separator/>
                        <MenuItem Header="{l:Loc RoomCard_Menu_Settings}" Click="MenuItem_ShowSettings_Click">
                            <MenuItem.Icon>
                                <ui:PathIcon Style="{StaticResource PathIconDataCogOutline}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                        <Separator/>
                        <ui:RadioMenuItem Header="{l:Loc RoomCard_Menu_EnableAutoRecord}" GroupName="AutoRecord" IsChecked="{Binding RoomConfig.AutoRecord,Mode=OneWay}" Click="MenuItem_StartMonitor_Click">
                            <ui:RadioMenuItem.Icon>
                                <ui:PathIcon Foreground="Orange" Style="{StaticResource PathIconDataCctv}"/>
                            </ui:RadioMenuItem.Icon>
                        </ui:RadioMenuItem>
                        <ui:RadioMenuItem Header="{l:Loc RoomCard_Menu_DisableAutoRecord}" GroupName="AutoRecord" IsChecked="{Binding RoomConfig.AutoRecord,Mode=OneWay,Converter={StaticResource BooleanInverterConverter}}" Click="MenuItem_StopMonitor_Click"/>
                        <Separator/>
                        <MenuItem Header="{l:Loc RoomCard_Menu_Delete}" Click="MenuItem_DeleteRoom_Click">
                            <MenuItem.Icon>
                                <ui:PathIcon Foreground="DarkRed" Style="{StaticResource PathIconDataDelete}"/>
                            </MenuItem.Icon>
                        </MenuItem>
                    </MenuItem>
                </Menu>
            </Grid>

            <Grid Grid.Row="2">
                <Grid.ColumnDefinitions>
                    <ColumnDefinition Width="Auto"/>
                    <ColumnDefinition Width="*"/>
                    <ColumnDefinition Width="Auto"/>
                </Grid.ColumnDefinitions>

                <StackPanel VerticalAlignment="Center" HorizontalAlignment="Center" Orientation="Horizontal">
                    <StackPanel.Visibility>
                        <MultiBinding Converter="{StaticResource MultiBoolToVisibilityCollapsedConverter}" Mode="OneWay">
                            <Binding Path="Recording" Converter="{StaticResource BooleanInverterConverter}" Mode="OneWay"/>
                            <Binding Path="RoomConfig.AutoRecord" Mode="OneWay"/>
                        </MultiBinding>
                    </StackPanel.Visibility>
                    <ui:PathIcon Style="{StaticResource PathIconDataCctv}" Foreground="DarkOrange" Width="15"/>
                    <TextBlock Foreground="DarkOrange" Margin="3,0,0,0" Text="{l:Loc RoomCard_Status_Monitoring}"/>
                </StackPanel>

                <StackPanel Name="RecordingIcon" VerticalAlignment="Center" HorizontalAlignment="Center" Orientation="Horizontal"
                            Visibility="{Binding Recording, Converter={StaticResource BooleanToVisibilityCollapsedConverter},Mode=OneWay}">
                    <ui:PathIcon Style="{StaticResource PathIconDataRecordRec}" Foreground="Red" Width="15"/>
                    <TextBlock Foreground="Red" Margin="3,0,0,0" Text="{l:Loc RoomCard_Status_Recording}"/>
                </StackPanel>

                <Border Grid.Column="1" VerticalAlignment="Center" Visibility="{Binding Visibility, ElementName=RecordingIcon}"
                    Background="{Binding Stats.DuraionRatio, Converter={StaticResource RatioToColorBrushConverter},Mode=OneWay}"
                    BorderThickness="1" BorderBrush="{DynamicResource SystemControlBackgroundChromeBlackMediumBrush}" Margin="2,0" CornerRadius="5">
                    <Border.ToolTip>
                        <ContentControl Content="{Binding}" ContentTemplate="{StaticResource RoomCardStatsPopup}"/>
                    </Border.ToolTip>
                    <Grid>
                        <StackPanel Orientation="Horizontal" HorizontalAlignment="Center">
                            <ui:PathIcon MaxWidth="11" Foreground="Black" Style="{Binding Stats.DuraionRatio, Converter={StaticResource RatioToArrowIconConverter}}"/>
                            <TextBlock HorizontalAlignment="Center" Foreground="Black">
                                <TextBlock.Text>
                                    <MultiBinding Converter="{l:StringFormatConverter}">
                                        <l:BLoc Key="RoomCard_Status_SpeedIndicator_SpeedInMbps"/>
                                        <Binding Path="Stats.NetworkMbps" Mode="OneWay"/>
                                    </MultiBinding>
                                </TextBlock.Text>
                            </TextBlock>
                        </StackPanel>
                        <Button Opacity="0" FocusVisualStyle="{x:Null}" Cursor="Hand" HorizontalAlignment="Stretch" VerticalAlignment="Stretch">
                            <ui:FlyoutService.Flyout>
                                <ui:Flyout Placement="Bottom">
                                    <ContentControl Content="{Binding}" ContentTemplate="{StaticResource RoomCardStatsPopup}"/>
                                </ui:Flyout>
                            </ui:FlyoutService.Flyout>
                        </Button>
                    </Grid>
                </Border>
                <Button Grid.Column="2" Padding="5,3" HorizontalAlignment="Right" Margin="5,0"
                        ToolTip="{l:Loc RoomCard_SplitButton_Tooltip}" Click="Button_Split_Click"
                        Visibility="{Binding Recording, Converter={StaticResource BooleanToVisibilityCollapsedConverter},Mode=OneWay}">
                    <ui:PathIcon Width="10" Style="{StaticResource PathIconDataContentCut}"/>
                </Button>
            </Grid>
        </Grid>
    </Border>
</UserControl>