feat: Media stream info in now playing modal (#233)

* feat: add base codec info to player

* fix: redundant console.log

* chore: translation

* fix: only overflow direct play

src/screens/modals/Player/components/MediaControls.tsx

@@ -19,6 +19,7 @@ const previous = () => TrackPlayer.skipToPrevious();
 const Container = styled.View`
     align-items: center;
     margin-top: 40px;
+    margin-bottom: 52px;
 `;
 
 const Buttons = styled.View`

src/screens/modals/Player/components/MediaInformation.tsx

@@ -0,0 +1,79 @@
+import { Text } from '@/components/Typography';
+import useCurrentTrack from '@/utility/useCurrentTrack';
+import React from 'react-native';
+import WaveformIcon from '@/assets/icons/waveform.svg';
+import useDefaultStyles from '@/components/Colors';
+import styled, { css } from 'styled-components/native';
+import { useMemo } from 'react';
+import { t } from '@/localisation';
+
+const Container = styled.View`
+    flex-direction: row;
+    gap: 8px;
+    margin-top: 12px;
+    margin-bottom: 16px;
+`;
+
+const Info = styled.View`
+    flex-direction: row;
+    justify-content: space-between;
+    gap: 8px;
+    flex-grow: 1;
+    flex-shrink: 1;
+`;
+
+const Label = styled(Text)<{ overflow?: boolean }>`
+    opacity: 0.5;
+    font-size: 13px;
+
+    ${(props) => props?.overflow && css`
+        flex: 0 1 auto;
+    `}
+`;
+
+/**
+ * This component displays information about the media that is being played
+ * back, such as the bitrate, sample rate, codec and whether it's transcoded.
+ */
+export default function MediaInformation() {
+    const styles = useDefaultStyles();
+    const { track, albumTrack } = useCurrentTrack();
+
+    const mediaStream = useMemo(() => (
+        albumTrack?.MediaStreams?.find((d) => d.Type === 'Audio')
+    ), [albumTrack]);
+
+    if (!albumTrack || !track) {
+        return null;
+    }
+
+    return (
+        <Container>
+            <WaveformIcon fill={styles.icon.color} height={16} width={16} />
+            <Info>
+                <Label numberOfLines={1} overflow>
+                    {track.isDirectPlay ? t('direct-play') : t('transcoded')}
+                </Label>
+                <Label numberOfLines={1}>
+                    {track.isDirectPlay
+                        ? mediaStream?.Codec.toUpperCase()
+                        : track.contentType?.replace('audio/', '').toUpperCase()
+                    }
+                </Label>
+                {mediaStream && (
+                    <>
+                        <Label numberOfLines={1}>
+                            {((track.isDirectPlay ? mediaStream.BitRate : track.bitRate) / 1000)
+                                .toFixed(0)}
+                            {t('kbps')}
+                        </Label>
+                        <Label numberOfLines={1}>
+                            {(mediaStream.SampleRate / 1000).toFixed(1)}
+                            {t('khz')}
+                        </Label>
+                    </>
+                )}
+            </Info>
+        </Container>
+    );
+}

src/screens/modals/Player/components/Timer.tsx

@@ -13,7 +13,6 @@ import { t } from '@/localisation';
 const Container = styled.View`
     align-self: flex-start;
     align-items: flex-start;
-    margin-top: 52px;
     padding: 8px;
     margin-left: -8px;
     flex: 0 1 auto;

src/screens/modals/Player/index.tsx

@@ -12,6 +12,7 @@ import Timer from './components/Timer';
 import styled from 'styled-components/native';
 import { ColoredBlurView } from '@/components/Colors.tsx';
 import LyricsPreview from './components/LyricsPreview.tsx';
+import MediaInformation from './components/MediaInformation';
 
 const Group = styled.View`
     flex-direction: row;
@@ -28,6 +29,7 @@ export default function Player() {
                         <NowPlaying />
                         <ConnectionNotice />
                         <StreamStatus />
+                        <MediaInformation />
                         <ProgressBar />
                         <MediaControls />
                         <Group>