Added bottom action Componant

designSystem/src/main/res/drawable/icon_paly.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="17dp"
+    android:height="18dp"
+    android:viewportWidth="17"
+    android:viewportHeight="18">
+  <path
+      android:pathData="M0.234,9.001V5.548C0.234,1.091 3.384,-0.705 7.234,1.511L10.22,3.238L13.207,4.965C17.057,7.181 17.057,10.821 13.207,13.038L10.22,14.765L7.234,16.492C3.384,18.708 0.234,16.888 0.234,12.455V9.001Z"
+      android:fillColor="#E6DFFF"/>
+</vector>

presentation/src/main/java/com/madrid/presentation/composables/BottomMediaActions.kt

@@ -0,0 +1,149 @@
+package com.madrid.presentation.composables
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.madrid.designsystem.AppTheme
+import com.madrid.designsystem.R
+import com.madrid.designsystem.component.MovioIcon
+import com.madrid.designsystem.component.MovioText
+@Composable
+fun BottomMediaActions(
+    onRateClick: ((Boolean) -> Unit)? = null,
+    onPlayClick: (() -> Unit)? = null,
+    onAddToListClick: ((Boolean) -> Unit)? = null,
+    modifier: Modifier = Modifier,
+) {
+    var isRated by remember { mutableStateOf(false) }
+    var isSaved by remember { mutableStateOf(false) }
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(vertical = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceEvenly
+    ) {
+        if (onRateClick != null) {
+            MediaActionItem(
+                label = "Rate it",
+                isActive = isRated,
+                activeIcon = R.drawable.bold_star,
+                inactiveIcon = R.drawable.outline_star,
+                activeColor = Color.Yellow,
+                onToggle = {
+                    isRated = !isRated
+                    onRateClick(isRated)
+                }
+            )
+        }
+        if (onPlayClick != null) {
+            PlayButton(onClick = onPlayClick)
+        }
+
+        if (onAddToListClick != null) {
+            MediaActionItem(
+                label = "Add to list",
+                isActive = isSaved,
+                activeIcon = R.drawable.bold_bookmark,
+                inactiveIcon = R.drawable.outline_bookmark,
+                activeColor = Color(0xFF4CAF50),
+                onToggle = {
+                    isSaved = !isSaved
+                    onAddToListClick(isSaved)
+                }
+            )
+        }
+    }
+}
+@Composable
+private fun MediaActionItem(
+    label: String,
+    isActive: Boolean,
+    activeIcon: Int,
+    inactiveIcon: Int,
+    activeColor: Color,
+    onToggle: () -> Unit
+) {
+    val animatedColor by animateColorAsState(
+        targetValue = if (isActive) activeColor else AppTheme.colors.surfaceColor.onSurfaceContainer,
+        label = "ActionIconColor"
+    )
+    val icon = if (isActive) activeIcon else inactiveIcon
+    Column(horizontalAlignment = Alignment.CenterHorizontally) {
+        MovioIcon(
+            painter = painterResource(icon),
+            contentDescription = label,
+            modifier = Modifier
+                .size(28.dp)
+                .clickable(
+                    onClick = onToggle,
+                    indication = null,
+                    interactionSource = remember { MutableInteractionSource() }
+                ),
+            tint = animatedColor
+        )
+        MovioText(
+            text = label,
+            textStyle = AppTheme.textStyle.label.smallRegular14,
+            color = AppTheme.colors.surfaceColor.onSurface
+        )
+    }
+}
+@Composable
+private fun PlayButton(onClick: () -> Unit) {
+    Box(
+        modifier = Modifier
+            .size(56.dp)
+            .background(
+                brush = Brush.horizontalGradient(
+                    listOf(Color(0xFFB7A4FB), Color(0xFF663EF6))
+                ),
+                shape = CircleShape
+            )
+            .clickable(
+                onClick = onClick,
+                indication = null,
+                interactionSource = remember { MutableInteractionSource() }
+            ),
+        contentAlignment = Alignment.Center
+    ) {
+        MovioIcon(
+            painter = painterResource(R.drawable.icon_paly),
+            contentDescription = "Play",
+            modifier = Modifier.size(28.dp),
+            tint = Color.White
+        )
+    }
+}
+@Preview(showBackground = true)
+@Composable
+fun BottomActionBarPreview() {
+    AppTheme {
+        BottomMediaActions(
+            onRateClick = {},
+            onPlayClick = {},
+            onAddToListClick = {}
+        )
+    }
+}

presentation/src/main/java/com/madrid/presentation/composables/ReviewActionBar.kt

@@ -0,0 +1,115 @@
+package com.madrid.presentation.composables
+
+import androidx.compose.animation.animateColorAsState
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.madrid.designsystem.AppTheme
+import com.madrid.designsystem.R
+import com.madrid.designsystem.component.MovioIcon
+import com.madrid.designsystem.component.MovioText
+@Composable
+fun ReviewTopBar(
+    onBackClick: () -> Unit,
+    modifier: Modifier = Modifier,
+    centerText: String? = null,
+    onShareClick: (() -> Unit)? = null,
+    onFavoriteClick: (() -> Unit)? = null,
+    initiallyFavorite: Boolean = false
+) {
+    var isFavorite by rememberSaveable { mutableStateOf(initiallyFavorite) }
+    val favoriteColor by animateColorAsState(
+        targetValue = if (isFavorite) Color.Red else AppTheme.colors.surfaceColor.onSurfaceContainer,
+        label = "FavoriteColor"
+    )
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .height(40.dp)
+            .padding(horizontal = AppTheme.spacing.medium),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween
+    ) {
+        IconButton(
+            iconRes = R.drawable.arrow_left,
+            contentDescription = "Back",
+            tint = AppTheme.colors.surfaceColor.onSurface,
+            onClick = onBackClick
+        )
+        centerText?.let {
+            MovioText(
+                text = it,
+                textStyle = AppTheme.textStyle.label.medium14,
+                color = AppTheme.colors.surfaceColor.onSurface
+            )
+        }
+        Row(horizontalArrangement = Arrangement.spacedBy(AppTheme.spacing.medium)) {
+            onShareClick?.let {
+                IconButton(
+                    iconRes = R.drawable.share_arrow,
+                    contentDescription = "Share",
+                    tint = AppTheme.colors.surfaceColor.onSurface,
+                    onClick = it
+                )
+            }
+            onFavoriteClick?.let {
+                IconButton(
+                    iconRes = if (isFavorite) R.drawable.bold_heart else R.drawable.outline_heart,
+                    contentDescription = "Favorite",
+                    tint = favoriteColor,
+                    onClick = {
+                        isFavorite = !isFavorite
+                        it()
+                    }
+                )
+            }
+        }
+    }
+}
+@Composable
+private fun IconButton(
+    iconRes: Int,
+    contentDescription: String?,
+    tint: Color,
+    onClick: () -> Unit
+) {
+    MovioIcon(
+        painter = painterResource(iconRes),
+        contentDescription = contentDescription,
+        modifier = Modifier
+            .size(24.dp)
+            .clickable(
+                onClick = onClick,
+                indication = null,
+                interactionSource = remember { MutableInteractionSource() }
+            ),
+        tint = tint
+    )
+}
+@Preview(showBackground = true, showSystemUi = true)
+@Composable
+fun ReviewActionBarPreview() {
+    ReviewTopBar(
+        onBackClick = {  },
+        onShareClick = {},
+        onFavoriteClick = {}
+
+    )
+}

presentation/src/main/res/values-ar/string.xml

@@ -22,4 +22,7 @@
 
     <string name="recent_search">البحث الأخير</string>
     <string name="clear_all">مسح الكل</string>
+    <string name="Rate_it">التقيم </string>
+    <string name="Add_to_list">أضف الى القائمة </string>
+    <string name="Play">تشغيل </string>
 </resources>

presentation/src/main/res/values/string.xml

@@ -22,5 +22,9 @@
         <string name="Series">Series</string>
         <string name="Artists">Artists</string>
         <string name="search_result_count">SearchResult (%1$s items)</string>
+        <string name="Rate_it">Rate it</string>
+        <string name="Add_to_list">Add to list</string>
+        <string name="Play">Play</string>
+
 
 </resources>