-
Notifications
You must be signed in to change notification settings - Fork 1
/
NowPlaying.ux
107 lines (105 loc) · 7.18 KB
/
NowPlaying.ux
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
<Page ux:Class="NowPlaying">
<Visual ux:Dependency="navBar" />
<AlternateRoot ParentNode="navBar">
<NavBarTitle>NOW PLAYING</NavBarTitle>
</AlternateRoot>
<StackPanel ContentAlignment="Bottom" Orientation="Vertical">
<Panel Dock="Top" Opacity="1" Width="100%" Height="400" ux:Name="albumart">
<Panel Margin="0, 0, 0, 0" MaxWidth="100%" MaxHeight="380">
<WhileTrue Value="{player.isPlaying}">
<Change folder.Alignment="Top" />
<Change vinyl.Alignment="Bottom" />
<Change playtext.Value="" />
<Spin Target="disc" Frequency="0.5" />
</WhileTrue>
<Rectangle Clicked="{player.TogglePlaying}" ux:Name="folder" CornerRadius="15" Color="#fff8" Alignment="HorizontalCenter" Width="290" Height="290">
<LayoutAnimation>
<Move Vector="1" RelativeTo="PositionChange" DurationBack="0.4" Easing="QuarticOut" EasingBack="QuarticIn" />
</LayoutAnimation>
<ImageFill File="{player.currentTrack.artworkUrl}" StretchMode="UniformToFill" WrapMode="ClampToEdge" />
<Shadow />
<Stroke Color="#FCFCFC" Width="1.5" Alignment="Outside" />
</Rectangle>
<Panel ux:Name="vinyl" Alignment="HorizontalCenter" Width="290" Height="290">
<LayoutAnimation>
<Move Vector="1" RelativeTo="PositionChange" DurationBack="0.4" Easing="QuarticOut" EasingBack="QuarticIn" />
</LayoutAnimation>
<Circle ux:Name="disc" Margin="10">
<Circle Width="50%" Height="50%" Color="#000000" ux:Name="disclabel">
<Stroke Width="1.5" Color="#FFFFFF" Alignment="Outside" />
</Circle>
<Circle StartAngleDegrees="95" LengthAngleDegrees="25" Width="76%" Height="76%" Color="#000000">
<Stroke Width="2" Color="#FFFFFF" Alignment="Outside" />
</Circle>
<Circle StartAngleDegrees="90" LengthAngleDegrees="30" Width="85%" Height="85%" Color="#000000">
<Stroke Width="2" Color="#FFFFFF" Alignment="Outside" />
</Circle>
<Circle StartAngleDegrees="275" LengthAngleDegrees="25" Width="76%" Height="76%" Color="#000000">
<Stroke Width="2" Color="#FFFFFF" Alignment="Outside" />
</Circle>
<Circle StartAngleDegrees="270" LengthAngleDegrees="30" Width="85%" Height="85%" Color="#000000">
<Stroke Width="2" Color="#FFFFFF" Alignment="Outside" />
</Circle>
<Stroke Width="1.5" Color="#FFFFFF" Alignment="Outside" />
</Circle>
</Panel>
</Panel>
</Panel>
<Text Value="{player.currentTrack.name}" Alignment="Center" Font="robotoregular" TextColor="#FFFFFF" TextWrapping="Wrap" Margin="20, 10, 20, 10" TextAlignment="Center" FontSize="22" Padding="0, 0, 0, 0" ux:Name="songtitle" />
<Text Value="{player.currentTrack.artist}" Alignment="Center" Font="robotoregular" TextColor="#951418" TextWrapping="Wrap" Margin="0, 10, 0, 10" TextAlignment="Center" FontSize="17" Padding="0, 0, 0, 0" ux:Name="songartist" />
<!-- controls -->
<DockPanel Height="120" ux:Name="audiovis" Opacity="1" Margin="30, 0, 30, 0">
<Panel>
<!-- <Rectangle Clicked="{player.ProgressPlayDebug}" Width="30" Height="30" Color="#750808">
</Rectangle> -->
<RangeControl ProgressChanged="{player.SeekControl}" ux:Class="SeekControl" Padding="0, 0, 0, 0" Margin="0, 0, 0, 0" Opacity="0">
<LinearRangeBehavior />
<Panel Opacity="1">
<Circle Anchor="50%,50%" ux:Name="thumb" Alignment="Left" Color="#ffffffee" Width="28" Height="28" Opacity="0" />
</Panel>
<Rectangle Layer="Background" Color="#aaaaaacc" CornerRadius="45" />
<ProgressAnimation>
<Move Target="thumb" X="1" RelativeTo="ParentSize" />
</ProgressAnimation>
</RangeControl>
<SeekControl Margin="0, 0, 0, 0" />
<StackPanel Orientation="Horizontal" ItemSpacing="1" Alignment="Center">
<Each Items="{player.bars}">
<Rectangle ux:Name="bar" CornerRadius="1" Color="#3C3C3C" Width="1" Height="{height}">
<WhileTrue Value="{isPlayed}">
<Change bar.Color="#951418" />
</WhileTrue>
</Rectangle>
</Each>
</StackPanel>
<Rectangle Color="#F80909" Opacity="0" />
</Panel>
<DockPanel Dock="Bottom">
<Text Dock="Left" Value="{player.displayProgress}" Font="robotoregular" TextColor="White" FontSize="12" />
<Text Dock="Right" Value="{player.displayDuration}" Font="robotoregular" TextColor="White" FontSize="12" />
</DockPanel>
</DockPanel>
<Panel Dock="Bottom" Margin="0, 20, 0, 20">
<Rectangle Opacity="1" Alignment="Bottom" Width="100%" Padding="0, 0, 0, 0" Margin="0, 0, 0, 0" Height="90" ux:Name="buttons">
<StackPanel Orientation="Horizontal" Alignment="Center">
<Panel Width="30" Height="30" Margin="20, 20, 20, 20" ux:Name="shuffle" Opacity="1">
<Text Font="fa" Alignment="Center" TextAlignment="Center" TextColor="#FFFFFF" Opacity="1" FontSize="20" Color="#3C3C3C"></Text>
</Panel>
<Panel Width="30" Height="30" Margin="20, 20, 20, 20" ux:Name="prev" Opacity="1">
<Text Font="fa" Alignment="Center" TextAlignment="Center" TextColor="#FFFFFF" Opacity="1" FontSize="20" Color="#3C3C3C"></Text>
</Panel>
<Rectangle Clicked="{player.TogglePlaying}" CornerRadius="30" Color="#13171a" Margin="0, 0, 0, 0" ux:Name="play" Width="90" Height="45" Opacity="1">
<Text ux:Name="playtext" Font="fa" Alignment="Center" TextAlignment="Center" TextColor="#FFFFFF" FontSize="25"></Text>
</Rectangle>
<Panel Width="30" Height="30" Margin="20, 20, 20, 20" ux:Name="next" Opacity="1">
<Text Font="fa" Alignment="Center" TextAlignment="Center" TextColor="#FFFFFF" Opacity="1" FontSize="20" Color="#3C3C3C"></Text>
</Panel>
<Panel Width="30" Height="30" Margin="20, 20, 20, 20" ux:Name="repeat" Opacity="1">
<Text Font="fa" Alignment="Center" TextAlignment="Center" TextColor="#FFFFFF" Opacity="1" FontSize="20" Color="#3C3C3C"></Text>
</Panel>
</StackPanel>
</Rectangle>
</Panel>
<BottomBarBackground Dock="Bottom" />
</StackPanel>
</Page>