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

Implement dark mode for Android

Browse Source
This commit is contained in:
Lei Nelissen
2020-07-26 17:02:18 +02:00
parent 9c24dede18
commit 57b79bf4e2
9 changed files with 79 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
android/app/build.gradle
View File

@@ -166,13 +166,6 @@ android {
}
}
packagingOptions {
pickFirst "lib/armeabi-v7a/libc++_shared.so"
pickFirst "lib/arm64-v8a/libc++_shared.so"
pickFirst "lib/x86/libc++_shared.so"
pickFirst "lib/x86_64/libc++_shared.so"
}
// applicationVariants are e.g. debug, release
applicationVariants.all { variant ->
variant.outputs.each { output ->

5
android/app/src/main/res/values/styles.xml
View File

@@ -1,9 +1,8 @@
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<style name="AppTheme" parent="Theme.MaterialComponents.DayNight.NoActionBar">
<!-- Customize your theme here. -->
<item name="android:textColor">#000000</item>
<!-- <item name="android:textColor">#000000</item> -->
</style>
</resources>

6
ios/JellyfinAudioPlayer/AppDelegate.m
View File

@@ -36,7 +36,11 @@ static void InitializeFlipper(UIApplication *application) {
moduleName:@"JellyfinAudioPlayer"
initialProperties:nil];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
if (@available(iOS 13.0, *)) {
rootView.backgroundColor = [UIColor systemBackgroundColor];
} else {
rootView.backgroundColor = [UIColor whiteColor];
}
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];

3
src/components/App.tsx
View File

@@ -10,7 +10,6 @@ import {
DefaultTheme,
DarkTheme,
} from '@react-navigation/native';
import { colors } from './Colors';
interface State {
isReady: boolean;
@@ -55,8 +54,6 @@ export default class App extends Component<{}, State> {
return null;
}
console.log(colorScheme);
return (
<Provider store={store}>
<PersistGate loading={null} persistor={persistedStore}>

26
src/components/Colors.android.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { StyleSheet, PlatformColor } from 'react-native';
import { THEME_COLOR } from 'CONSTANTS';
export const colors = StyleSheet.create({
text: {
color: PlatformColor('?attr/colorOnBackground'),
},
view: {
backgroundColor: PlatformColor('?android:colorBackground'),
},
border: {
borderColor: '#88888844'
},
activeBackground: {
backgroundColor: `${THEME_COLOR}44`,
},
imageBackground: {
backgroundColor: PlatformColor('?attr/colorBackgroundFloating'),
},
modal: {
backgroundColor: PlatformColor('?attr/colorBackgroundFloating'),
},
input: {
backgroundColor: PlatformColor('?attr/colorBackgroundFloating'),
}
});

26
src/components/Colors.ios.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { StyleSheet, PlatformColor, DynamicColorIOS } from 'react-native';
import { THEME_COLOR } from 'CONSTANTS';
export const colors = StyleSheet.create({
text: {
color: PlatformColor('label'),
},
view: {
backgroundColor: PlatformColor('systemBackground'),
},
border: {
borderColor: PlatformColor('systemGray5Color'),
},
activeBackground: {
backgroundColor: DynamicColorIOS({ light: `${THEME_COLOR}16`, dark: `${THEME_COLOR}66` })
},
imageBackground: {
backgroundColor: PlatformColor('systemGray5Color')
},
modal: {
backgroundColor: DynamicColorIOS({ light: '#eeeeeeee', dark: '#222222ee' })
},
input: {
backgroundColor: PlatformColor('systemGray5Color'),
}
});

76
src/components/Colors.tsx
View File

@@ -1,76 +0,0 @@
import { StyleSheet, PlatformColor, Platform, DynamicColorIOS } from 'react-native';
import { THEME_COLOR } from 'CONSTANTS';
export const colors = StyleSheet.create({
text: {
...Platform.select({
ios: {
color: PlatformColor('label'),
},
android: {
color: PlatformColor('?android:attr/textColorPrimary'),
}
}),
},
view: {
...Platform.select({
ios: {
backgroundColor: PlatformColor('systemBackground'),
},
android: {
backgroundColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
},
border: {
...Platform.select({
ios: {
borderColor: PlatformColor('systemGray5Color'),
},
android: {
borderColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
},
activeBackground: {
...Platform.select({
ios: {
backgroundColor: DynamicColorIOS({ light: `${THEME_COLOR}16`, dark: `${THEME_COLOR}66` })
},
android: {
backgroundColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
},
imageBackground: {
...Platform.select({
ios: {
backgroundColor: PlatformColor('systemGray5Color')
},
android: {
backgroundColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
},
modal: {
...Platform.select({
ios: {
backgroundColor: DynamicColorIOS({ light: '#eeeeeeee', dark: '#222222ee' })
},
android: {
backgroundColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
},
input: {
...Platform.select({
ios: {
backgroundColor: PlatformColor('systemGray5Color'),
color: PlatformColor('label'),
},
android: {
backgroundColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
}
});

26
src/screens/Player/components/MediaControls.tsx
View File

@@ -7,6 +7,7 @@ import ForwardIcon from 'assets/forwards.svg';
import BackwardIcon from 'assets/backwards.svg';
import PlayIcon from 'assets/play.svg';
import PauseIcon from 'assets/pause.svg';
import { useColorScheme } from 'react-native-appearance';
const BUTTON_SIZE = 40;
@@ -32,61 +33,64 @@ const Button = styled.View`
`;
export default function MediaControls() {
const scheme = useColorScheme();
const fill = scheme === 'dark' ? '#ffffff' : '#000000';
return (
<Container>
<Buttons>
<Button>
<PreviousButton />
<PreviousButton fill={fill} />
</Button>
<MainButton />
<MainButton fill={fill} />
<Button>
<NextButton />
<NextButton fill={fill} />
</Button>
</Buttons>
</Container>
);
}
export function PreviousButton() {
export function PreviousButton({ fill }: { fill: string }) {
const hasQueue = useHasQueue();
return (
<TouchableOpacity onPress={previous} disabled={!hasQueue} style={{ opacity: hasQueue ? 1 : 0.5 }}>
<BackwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
<BackwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
</TouchableOpacity>
);
}
export function NextButton() {
export function NextButton({ fill }: { fill: string }) {
const hasQueue = useHasQueue();
return (
<TouchableOpacity onPress={next} disabled={!hasQueue} style={{ opacity: hasQueue ? 1 : 0.5 }}>
<ForwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
<ForwardIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
</TouchableOpacity>
);
}
export function MainButton() {
export function MainButton({ fill }: { fill: string }) {
const state = usePlaybackState();
switch (state) {
case STATE_PLAYING:
return (
<TouchableOpacity onPress={pause}>
<PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
<PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
</TouchableOpacity>
);
case STATE_PAUSED:
return (
<TouchableOpacity onPress={play}>
<PlayIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
<PlayIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
</TouchableOpacity>
);
default:
return (
<TouchableOpacity onPress={pause} disabled>
<PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill="#000" />
<PauseIcon width={BUTTON_SIZE} height={BUTTON_SIZE} fill={fill} />
</TouchableOpacity>
);
}

18
src/screens/Player/index.tsx
View File

@@ -1,28 +1,20 @@
import React from 'react';
import { DynamicColorIOS, StyleSheet, ScrollView, Platform, PlatformColor } from 'react-native';
import { StyleSheet, ScrollView } from 'react-native';
import MediaControls from './components/MediaControls';
import ProgressBar from './components/ProgressBar';
import NowPlaying from './components/NowPlaying';
import Queue from './components/Queue';
import { colors } from 'components/Colors';
const styles = StyleSheet.create({
outer: {
...Platform.select({
ios: {
color: PlatformColor('label'),
backgroundColor: PlatformColor('systemBackground'),
},
android: {
color: PlatformColor('?android:attr/textColorPrimary'),
backgroundColor: PlatformColor('?android:attr/backgroundTint'),
}
}),
},
outer: colors.view,
inner: {
padding: 25,
}
});
console.log(JSON.stringify(styles));
export default function Player() {
return (
<ScrollView contentContainerStyle={styles.inner} style={styles.outer}>