javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: introduce high contrast mode for ios

Browse Source 
fixes #194
This commit is contained in:
Lei Nelissen
2024-02-12 00:01:09 +01:00
parent f95c79b254
commit 82b4223939
28 changed files with 187 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/screens/modals/Player/components/Casting.ios.tsx
View File

@@ -1,5 +1,4 @@
import { Text } from '@/components/Typography';
import { THEME_COLOR } from '@/CONSTANTS';
import React, { useCallback } from 'react';
import { showRoutePicker, useAirplayRoutes } from 'react-airplay';
import { TouchableOpacity } from 'react-native';
@@ -27,7 +26,6 @@ const Label = styled(Text)<{ active?: boolean }>`
font-size: 13px;
${(props) => props.active && css`
color: ${THEME_COLOR};
opacity: 1;
`}
`;
@@ -43,9 +41,13 @@ function Casting() {
<AirplayAudioIcon
width={20}
height={20}
fill={routes.length > 0 ? THEME_COLOR : defaultStyles.textHalfOpacity.color}
fill={routes.length > 0 ? defaultStyles.themeColor.color : defaultStyles.textHalfOpacity.color}
/>
<Label active={routes.length > 0} numberOfLines={1}>
<Label
active={routes.length > 0}
numberOfLines={1}
style={routes.length > 0 && defaultStyles.themeColor}
>
{routes.length > 0
? `${t('playing-on')} ${routes.map((route) => route.portName).join(', ')}`
: t('local-playback')

5
src/screens/modals/Player/components/ConnectionNotice.tsx
View File

@@ -1,6 +1,5 @@
import React from 'react';
import { useNetInfo } from '@react-native-community/netinfo';
import { THEME_COLOR } from '@/CONSTANTS';
import styled from 'styled-components/native';
import CloudSlash from '@/assets/icons/cloud-slash.svg';
import { Text } from 'react-native';
@@ -23,8 +22,8 @@ function ConnectionNotice() {
if (!isInternetReachable) {
return (
<Well style={defaultStyles.activeBackground}>
<CloudSlash width={24} height={24} fill={THEME_COLOR} />
<Text style={{ color: THEME_COLOR, marginLeft: 12 }}>
<CloudSlash width={24} height={24} fill={defaultStyles.themeColor.color} />
<Text style={[ defaultStyles.themeColor, { marginLeft: 12 }]}>
{t('you-are-offline-message')}
</Text>
</Well>

22
src/screens/modals/Player/components/ProgressBar.tsx
View File

@@ -8,7 +8,6 @@ import ProgressTrack, {
ProgressTrackContainer
} from '@/components/Progresstrack';
import { Gesture, GestureDetector, gestureHandlerRootHOC } from 'react-native-gesture-handler';
import { THEME_COLOR } from '@/CONSTANTS';
import Reanimated, {
useSharedValue,
useAnimatedStyle,
@@ -19,6 +18,7 @@ import Reanimated, {
} from 'react-native-reanimated';
import ReText from '@/components/ReText';
import useCurrentTrack from '@/utility/useCurrentTrack';
import useDefaultStyles from '@/components/Colors';
const DRAG_HANDLE_SIZE = 20;
const PADDING_TOP = 12;
@@ -43,7 +43,6 @@ const DragHandle = styled(Reanimated.View)`
width: ${DRAG_HANDLE_SIZE}px;
height: ${DRAG_HANDLE_SIZE}px;
border-radius: ${DRAG_HANDLE_SIZE}px;
background-color: ${THEME_COLOR};
position: absolute;
left: -${DRAG_HANDLE_SIZE / 2}px;
top: ${PADDING_TOP - DRAG_HANDLE_SIZE / 2 + 2.5}px;
@@ -51,6 +50,7 @@ const DragHandle = styled(Reanimated.View)`
`;
function ProgressBar() {
const styles = useDefaultStyles();
const { position, buffered } = useProgress();
const { track } = useCurrentTrack();
@@ -182,16 +182,28 @@ function ProgressBar() {
<ProgressTrackContainer>
<ProgressTrack
opacity={0.15}
style={styles.themeBackground}
/>
<ProgressTrack
style={bufferStyles}
style={[
styles.themeBackground,
bufferStyles
]}
opacity={0.15}
/>
<ProgressTrack
style={progressStyles}
style={[
progressStyles,
styles.themeBackground,
]}
/>
</ProgressTrackContainer>
<DragHandle style={dragHandleStyles} />
<DragHandle
style={[
styles.themeBackground,
dragHandleStyles,
]}
/>
<NumberBar style={{ flex: 1 }}>
<Number text={timePassed} style={timePassedStyles} />
<Number text={timeRemaining} style={timeRemainingStyles} />

13
src/screens/modals/Player/components/Queue.tsx
View File

@@ -11,7 +11,6 @@ import { Text } from '@/components/Typography';
import RepeatIcon from '@/assets/icons/repeat.svg';
import RepeatSingleIcon from '@/assets/icons/repeat.1.svg';
import Button from '@/components/Button';
import { THEME_COLOR } from '@/CONSTANTS';
import DownloadIcon from '@/components/DownloadIcon';
import Divider from '@/components/Divider';
import ticksToDuration from '@/utility/ticksToDuration';
@@ -123,7 +122,7 @@ export default function Queue({ header }: Props) {
onPress={toggleTrackLoop}
>
<RepeatSingleIcon
fill={repeatMode === RepeatMode.Track ? THEME_COLOR : defaultStyles.textHalfOpacity.color}
fill={repeatMode === RepeatMode.Track ? defaultStyles.themeColor.color : defaultStyles.textHalfOpacity.color}
width={ICON_SIZE}
height={ICON_SIZE}
/>
@@ -133,7 +132,7 @@ export default function Queue({ header }: Props) {
onPress={toggleQueueLoop}
>
<RepeatIcon
fill={repeatMode === RepeatMode.Queue ? THEME_COLOR : defaultStyles.textHalfOpacity.color}
fill={repeatMode === RepeatMode.Queue ? defaultStyles.themeColor.color : defaultStyles.textHalfOpacity.color}
width={ICON_SIZE}
height={ICON_SIZE}
/>
@@ -154,14 +153,14 @@ export default function Queue({ header }: Props) {
>
<View style={{ flex: 1, marginRight: 16 }}>
<Text
style={[currentIndex === index ? { color: THEME_COLOR, fontWeight: '500' } : styles.trackTitle, { marginBottom: 2 }]}
style={[currentIndex === index ? { color: defaultStyles.themeColor.color, fontWeight: '500' } : styles.trackTitle, { marginBottom: 2 }]}
numberOfLines={1}
>
{track.title}
</Text>
{(track.artist || track.album) && (
<TextHalfOpacity
style={currentIndex === index ? { color: THEME_COLOR, fontWeight: '400' } : undefined}
style={currentIndex === index ? { color: defaultStyles.themeColor.color, fontWeight: '400' } : undefined}
numberOfLines={1}
>
{track.artist}{track.album && ' — ' + track.album}
@@ -170,13 +169,13 @@ export default function Queue({ header }: Props) {
</View>
<View style={{ marginLeft: 'auto', marginRight: 8 }}>
<TextHalfOpacity
style={currentIndex === index ? { color: THEME_COLOR, fontWeight: '400' } : undefined}
style={currentIndex === index ? { color: defaultStyles.themeColor.color, fontWeight: '400' } : undefined}
>
{ticksToDuration(track.duration || 0)}
</TextHalfOpacity>
</View>
<View>
<DownloadIcon trackId={track.backendId} fill={currentIndex === index ? THEME_COLOR + '80' : undefined} />
<DownloadIcon trackId={track.backendId} fill={currentIndex === index ? defaultStyles.themeColor.color + '80' : undefined} />
</View>
</QueueItem>
</TouchableHandler>

5
src/screens/modals/Player/components/Timer.tsx
View File

@@ -1,7 +1,6 @@
import React, { useCallback, useEffect, useState } from 'react';
import DateTimePickerModal from 'react-native-modal-datetime-picker';
import styled from 'styled-components/native';
import { THEME_COLOR } from '@/CONSTANTS';
import { useDispatch } from 'react-redux';
import { useTypedSelector } from '@/store';
import TimerIcon from '@/assets/icons/timer.svg';
@@ -109,7 +108,7 @@ export default function Timer() {
<View>
<TimerIcon
fill={showPicker || date
? THEME_COLOR
? defaultStyles.themeColor.color
: defaultStyles.textHalfOpacity.color
}
width={16}
@@ -117,7 +116,7 @@ export default function Timer() {
/>
<Label
style={{ color: showPicker || date
? THEME_COLOR
? defaultStyles.themeColor.color
: defaultStyles.textHalfOpacity.color
}}
>

3
src/screens/modals/SetJellyfinServer/index.tsx
View File

@@ -5,7 +5,6 @@ import Input from '@/components/Input';
import { setJellyfinCredentials } from '@/store/settings/actions';
import { useNavigation, StackActions } from '@react-navigation/native';
import CredentialGenerator from './components/CredentialGenerator';
import { THEME_COLOR } from '@/CONSTANTS';
import { t } from '@/localisation';
import useDefaultStyles from '@/components/Colors';
import { Text } from '@/components/Typography';
@@ -55,7 +54,7 @@ export default function SetJellyfinServer() {
title={t('set-jellyfin-server')}
onPress={() => setIsLogginIn(true)}
disabled={!serverUrl?.length}
color={THEME_COLOR}
color={defaultStyles.themeColor.color}
/>
</View>
)}