Skip to content

Commit

Permalink
Merge pull request #63 from Team-Ampersand/feature/57_empty_music_pag…
Browse files Browse the repository at this point in the history 
…e_publishing

🔀 :: (#57) empty music page publishing
  • Loading branch information
@Hyeonseo4799
Hyeonseo4799 authored Sep 18, 2023
2 parents dc9528d + 4508112 commit 34fd2a7
Show file tree
Hide file tree
Showing 3 changed files with 259 additions and 67 deletions.
214 changes: 147 additions & 67 deletions presentation/src/main/java/com/msg/presentation/view/music/MusicScreen.kt
View file
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
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
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>

0 comments on commit 34fd2a7

Please sign in to comment.