Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. Weโ€™ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

๐Ÿ”€ :: (#57) empty music page publishing #63

Merged
merged 5 commits into from
Sep 18, 2023
Merged

๐Ÿ”€ :: (#57) empty music page publishing #63

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5b06e10
:bento: ::empty music icons
Hyeonseo4799 Sep 18, 2023
bcaad60
:sparkles: :: musicList์— ๋”ฐ๋ผ MusicListContent, EmptyMusicContent ๊ตฌ๋ถ„
Hyeonseo4799 Sep 18, 2023
7ea4172
:recycle: :: bottomSheet ๋กœ์ง ๊ฐ„์†Œํ™”
Hyeonseo4799 Sep 18, 2023
4632f80
:sparkles: :: BottomSheetType default value ์„ค์ •
Hyeonseo4799 Sep 18, 2023
4508112
:lipstick: :: ์Œ์•… ์‹ ์ฒญ ์ด๋ฏธ์ง€ ๊ฐ€์šด๋ฐ ์ •๋ ฌ
Hyeonseo4799 Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
214 changes: 147 additions & 67 deletions presentation/src/main/java/com/msg/presentation/view/music/MusicScreen.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,52 +1,58 @@
package com.msg.presentation.view.music

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.Image
import androidx.compose.foundation.LocalOverscrollConfiguration
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Divider
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.dotori.dotori_components.components.bottomsheet.DotoriBottomSheetDialog
import com.dotori.dotori_components.components.dialog.DotoriDialog
import com.dotori.dotori_components.components.music.DotoriMusicListItem
import com.dotori.dotori_components.theme.DotoriTheme
import com.msg.presentation.R
import kotlinx.coroutines.launch

@OptIn(ExperimentalFoundationApi::class, ExperimentalMaterialApi::class)
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun MusicScreen(modifier: Modifier = Modifier) {
var showDialog by remember { mutableStateOf(false) }
var currentBottomSheetType by remember { mutableStateOf<BottomSheetType?>(null) }
var currentBottomSheetType by remember { mutableStateOf(BottomSheetType.Option) }
var musicUrl by remember { mutableStateOf("") }

val coroutineScope = rememberCoroutineScope()
val musicList = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)

DotoriBottomSheetDialog(
sheetContent = {
currentBottomSheetType?.let { sheetType ->
BottomSheetContent(
bottomSheetType = sheetType,
onLinkClick = { /*TODO*/ },
onDeleteClick = { /*TODO*/ },
onDaySelected = { /*TODO*/ }
)
}
BottomSheetContent(
bottomSheetType = currentBottomSheetType,
onLinkClick = { /*TODO*/ },
onDeleteClick = { /*TODO*/ },
onDaySelected = { /*TODO*/ }
)
}
) { sheetState ->
if (showDialog) {
Expand All @@ -58,74 +64,148 @@ fun MusicScreen(modifier: Modifier = Modifier) {
}
}

CompositionLocalProvider(
LocalOverscrollConfiguration provides null
) {
LazyColumn(modifier = modifier.fillMaxSize()) {
item {
Column(verticalArrangement = Arrangement.Center) {
DotoriTopBar { /*TODO*/ }
Divider(
thickness = 1.dp,
color = DotoriTheme.colors.neutral40
)
}
}
stickyHeader {
MusicHeader(
onMusicClick = { showDialog = true },
onCalendarClick = {
currentBottomSheetType = BottomSheetType.Calendar
coroutineScope.launch { sheetState.show() }
}
)
}
item {
val showBottomSheet: (BottomSheetType) -> Unit = { sheetType ->
currentBottomSheetType = sheetType
coroutineScope.launch { sheetState.show() }
}

if (musicList.isEmpty()) {
EmptyMusicContent(
onSwitchClick = { /*TODO*/ },
onMusicClick = { showDialog = true },
onCalendarClick = { showBottomSheet(BottomSheetType.Calendar) }
)
} else {
MusicListContent(
musicList = musicList,
onSwitchClick = { /*TODO*/ },
onMusicClick = { showDialog = true },
onCalendarClick = { showBottomSheet(BottomSheetType.Calendar) },
onOptionClicked = { showBottomSheet(BottomSheetType.Option) },
onItemClicked = { /*TODO*/ }
)
}
}
}

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MusicListContent(
musicList: List<Int>,
onSwitchClick: (Boolean) -> Unit,
onMusicClick: () -> Unit,
onCalendarClick: () -> Unit,
onItemClicked: () -> Unit,
onOptionClicked: () -> Unit
) {
CompositionLocalProvider(
LocalOverscrollConfiguration provides null
) {
LazyColumn(modifier = Modifier.fillMaxSize()) {
item {
Column(verticalArrangement = Arrangement.Center) {
DotoriTopBar(onSwitchClick = onSwitchClick)
Divider(
color = DotoriTheme.colors.background,
thickness = 16.dp
thickness = 1.dp,
color = DotoriTheme.colors.neutral40
)
}
val musicList = listOf(1, 2, 3, 4, 5, 6, 7, 8, 9, 10)
items(musicList.size) {
Box(
}
stickyHeader {
MusicHeader(
onMusicClick = onMusicClick,
onCalendarClick = onCalendarClick
)
}
item {
Divider(
color = DotoriTheme.colors.background,
thickness = 16.dp
)
}
items(musicList.size) {
Box(
modifier = Modifier
.background(color = DotoriTheme.colors.background)
.padding(horizontal = 20.dp)
) {
DotoriMusicListItem(
modifier = Modifier
.background(color = DotoriTheme.colors.background)
.padding(horizontal = 20.dp)
) {
DotoriMusicListItem(
modifier = Modifier
.background(
color = DotoriTheme.colors.cardBackground,
shape = RoundedCornerShape(
topStart = if (it == 0) 16.dp else 0.dp,
topEnd = if (it == 0) 16.dp else 0.dp,
bottomStart = if (musicList.lastIndex == it) 16.dp else 0.dp,
bottomEnd = if (musicList.lastIndex == it) 16.dp else 0.dp
)
.background(
color = DotoriTheme.colors.cardBackground,
shape = RoundedCornerShape(
topStart = if (it == 0) 16.dp else 0.dp,
topEnd = if (it == 0) 16.dp else 0.dp,
bottomStart = if (musicList.lastIndex == it) 16.dp else 0.dp,
bottomEnd = if (musicList.lastIndex == it) 16.dp else 0.dp
)
.padding(horizontal = 16.dp)
.padding(
top = if (it == 0) 16.dp else 8.dp,
bottom = if (musicList.lastIndex == it) 16.dp else 8.dp
),
imageUrl = "",
title = "10cm- ์„œ๋ž(๊ทธ ํ•ด ์šฐ๋ฆฌ๋Š” OST Part.1)/๊ฐ€์‚ฌ Audio Lyrics 21.12.07 New Release",
name = "2105 ๊น€์ค€",
date = "16์‹œ 23๋ถ„",
onItemClicked = { /*TODO*/ },
onOptionClicked = {
currentBottomSheetType = BottomSheetType.Option
coroutineScope.launch { sheetState.show() }
}
)
}
)
.padding(horizontal = 16.dp)
.padding(
top = if (it == 0) 16.dp else 8.dp,
bottom = if (musicList.lastIndex == it) 16.dp else 8.dp
),
imageUrl = "",
title = "10cm- ์„œ๋ž(๊ทธ ํ•ด ์šฐ๋ฆฌ๋Š” OST Part.1)/๊ฐ€์‚ฌ Audio Lyrics 21.12.07 New Release",
name = "2105 ๊น€์ค€",
date = "16์‹œ 23๋ถ„",
onItemClicked = onItemClicked,
onOptionClicked = onOptionClicked
)
}
}
}
}
}

@Composable
fun EmptyMusicContent(
onSwitchClick: (Boolean) -> Unit,
onMusicClick: () -> Unit,
onCalendarClick: () -> Unit
) {
val imageRes = if (DotoriTheme.isSystemIsDarkTheme()) {
R.drawable.ic_empty_music_icon_dark
} else {
R.drawable.ic_empty_music_icon_light
}

Box(
modifier = Modifier
.fillMaxSize()
.background(DotoriTheme.colors.background)
) {
Column {
DotoriTopBar(onSwitchClick = onSwitchClick)
MusicHeader(
onMusicClick = onMusicClick,
onCalendarClick = onCalendarClick
)
}
Column(
modifier = Modifier.align(Alignment.Center),
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = painterResource(id = imageRes),
contentDescription = "note icon"
)
Spacer(modifier = Modifier.height(8.dp))
Text(
text = "์•„์ง ์‹ ์ฒญํ•œ ์Œ์•…์ด ์—†์Šต๋‹ˆ๋‹ค..",
style = DotoriTheme.typography.subTitle2,
color = DotoriTheme.colors.neutral10
)
Spacer(modifier = Modifier.height(7.dp))
Text(
text = "์˜ค๋ฅธ์ชฝ ์œ„์—์„œ ์Œ์•… ์‹ ์ฒญ์„ ํ•ด๋ณด์„ธ์š”!",
style = DotoriTheme.typography.caption,
color = DotoriTheme.colors.neutral20
)
}
}
}

@Preview
@Composable
fun MusicScreenTest() {
Expand Down
56 changes: 56 additions & 0 deletions presentation/src/main/res/drawable/ic_empty_music_icon_dark.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="120dp"
android:height="120dp"
android:viewportWidth="120"
android:viewportHeight="120">
<path
android:pathData="M42.05,88.93m-9.52,-2.55a9.86,9.86 60,1 1,19.05 5.1a9.86,9.86 60,1 1,-19.05 -5.1"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#CDCDD5"/>
<path
android:pathData="M85.66,91.75m-9.53,-2.55a9.87,9.87 60,1 1,19.06 5.11a9.87,9.87 60,1 1,-19.06 -5.11"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#CDCDD5"/>
<path
android:pathData="M95.19,94.3L105.17,57.04M51.57,91.49L61.56,54.23M61.56,54.23L65.99,37.67C85.86,42.99 101.97,41.39 109.61,40.48L105.17,57.04M61.56,54.23C70.52,56.63 88.49,59.67 105.17,57.04"
android:strokeLineJoin="round"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#CDCDD5"
android:strokeLineCap="round"/>
<path
android:pathData="M61.55,54.23C70.52,56.63 88.49,59.67 105.17,57.04"
android:strokeLineJoin="round"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#818198"
android:strokeLineCap="round"/>
<path
android:pathData="M51.57,91.49L65.99,37.67"
android:strokeLineJoin="round"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#CDCDD5"
android:strokeLineCap="round"/>
<path
android:pathData="M30.09,42.75m6.06,6.06a8.57,8.57 0,1 0,-12.12 -12.12a8.57,8.57 0,1 0,12.12 12.12"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#CDCDD5"/>
<path
android:pathData="M24.03,36.69L45.24,15.47C40.7,16.99 36.15,18.5 30.09,15.47"
android:strokeLineJoin="round"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#CDCDD5"
android:strokeLineCap="round"/>
<path
android:pathData="M45.24,15.47C40.7,16.99 36.15,18.5 30.09,15.47"
android:strokeLineJoin="round"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#818198"
android:strokeLineCap="round"/>
</vector>
56 changes: 56 additions & 0 deletions presentation/src/main/res/drawable/ic_empty_music_icon_light.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="120dp"
android:height="120dp"
android:viewportWidth="120"
android:viewportHeight="120">
<path
android:pathData="M42.05,88.93m-9.52,-2.55a9.86,9.86 60,1 1,19.05 5.1a9.86,9.86 60,1 1,-19.05 -5.1"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#656B80"/>
<path
android:pathData="M85.66,91.75m-9.53,-2.55a9.87,9.87 60,1 1,19.06 5.11a9.87,9.87 60,1 1,-19.06 -5.11"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#656B80"/>
<path
android:pathData="M95.19,94.3L105.17,57.04M51.57,91.49L61.56,54.23M61.56,54.23L65.99,37.67C85.86,43 101.97,41.39 109.61,40.48L105.17,57.04M61.56,54.23C70.52,56.63 88.49,59.67 105.17,57.04"
android:strokeLineJoin="round"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#656B80"
android:strokeLineCap="round"/>
<path
android:pathData="M61.55,54.23C70.52,56.63 88.49,59.67 105.17,57.04"
android:strokeLineJoin="round"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#BBBBCC"
android:strokeLineCap="round"/>
<path
android:pathData="M51.57,91.49L65.99,37.67"
android:strokeLineJoin="round"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#656B80"
android:strokeLineCap="round"/>
<path
android:pathData="M30.09,42.75m6.06,6.06a8.57,8.57 0,1 0,-12.12 -12.12a8.57,8.57 0,1 0,12.12 12.12"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#656B80"/>
<path
android:pathData="M24.03,36.69L45.24,15.47C40.7,16.99 36.15,18.5 30.09,15.47"
android:strokeLineJoin="round"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#656B80"
android:strokeLineCap="round"/>
<path
android:pathData="M45.24,15.47C40.7,16.99 36.15,18.5 30.09,15.47"
android:strokeLineJoin="round"
android:strokeWidth="6"
android:fillColor="#00000000"
android:strokeColor="#BBBBCC"
android:strokeLineCap="round"/>
</vector>
Loading