Feat/create thumbnail

android/app/build.gradle.kts

@@ -92,6 +92,9 @@ dependencies {
     // jetpack compose extended icons
     implementation("androidx.compose.material:material-icons-extended:1.5.4")
 
+    // coil
+    implementation("io.coil-kt:coil-compose:2.5.0")
+
     // test tools
     testImplementation("junit:junit:4.13.2")
     testImplementation("androidx.test.ext:junit:1.1.5")

android/app/src/main/java/com/goliath/emojihub/data_sources/api/EmojiApi.kt

@@ -31,6 +31,7 @@ interface EmojiApi {
     @POST("emoji")
     suspend fun uploadEmoji(
         @Part file: MultipartBody.Part,
+        @Part thumbnail: MultipartBody.Part,
         @Part("postEmojiRequest") emojiDto: RequestBody
     ): Response<Unit>
 

android/app/src/main/java/com/goliath/emojihub/models/Emoji.kt

@@ -10,6 +10,7 @@ class Emoji(
     val createdAt: String = dto.createdAt
     val savedCount: Int = dto.savedCount
     val videoLink: String = dto.videoLink
+    val thumbnailLink: String = dto.thumbnailLink
     val unicode: String = dto.unicode
     val label: String = dto.label
     val id: String = dto.id
@@ -20,6 +21,7 @@ data class EmojiDto(
     @SerializedName("created_at") val createdAt: String,
     @SerializedName("num_saved") val savedCount: Int,
     @SerializedName("video_url") val videoLink: String,
+    @SerializedName("thumbnail_url") val thumbnailLink: String,
     @SerializedName("id") val id: String,
     @SerializedName("emoji_label") val label: String,
     @SerializedName("emoji_unicode") val unicode: String
@@ -48,6 +50,7 @@ val dummyEmoji = Emoji(
         createdAt = "2023.09.16",
         savedCount = 1600,
         videoLink = "https://firebasestorage.googleapis.com/v0/b/emojihub-e2023.appspot.com/o/sample_videos%2Fthumbs%20up.mp4?alt=media&token=9526818f-6ccb-499f-84b2-e6e1f6924704",
+        thumbnailLink = "https://storage.googleapis.com/emojihub-e2023.appspot.com/username1_2023-11-22%2008%3A45%3A29.jpeg?GoogleAccessId=firebase-adminsdk-zynbm@emojihub-e2023.iam.gserviceaccount.com&Expires=1709250330&Signature=Mht0X%2BkLsGGzGKq1yT2MmhUOzW8p9FqWd659Ggb8isEG7UkKvVFOdnqd4U6iPvS7JWv%2FhHyPp%2F%2FnZyQ4%2F6smLSAyQtRCUNtuKkbVVN0bTP8a8Wo5BwMjRlj5rFyyyo3hDAAOZIr3Qj6OThGcvxldGXnYVFtc5qWCLkkb%2FYS5QoHa9NYbqx0Hj10T5QfKSHhayi3%2BXEBgN59nzdrmFl7dsJ4RW8043EvXNF20eNw9DFmiRSIFqh7dT9Q3hd21GVgoIBOlXJ%2BsI%2BWu2vy61NXcfKhlZzAwS8eh8jHSxQZ%2FjPHE3itl7fFfgcFvapcJ9d%2BkFjwqhr7j4D2mcBF0yr1tHQ%3D%3D",
         unicode = "U+1F44D",
         id = "1234",
         label = "sample"
@@ -65,6 +68,7 @@ fun createDummyEmoji(): Emoji {
             createdAt = "2023.09.16",
             savedCount = dummySavedCounts.random(),
             videoLink = "",
+            thumbnailLink = "",
             unicode = dummyUnicodes.random(),
             id = dummySavedCounts.random().toString(),
             label = "cat"

android/app/src/main/java/com/goliath/emojihub/repositories/remote/EmojiRepository.kt

@@ -1,24 +1,26 @@
 package com.goliath.emojihub.repositories.remote
 
+import android.content.Context
+import android.graphics.Bitmap
+import android.media.MediaMetadataRetriever
 import android.util.Log
 import androidx.paging.Pager
 import androidx.paging.PagingConfig
 import androidx.paging.PagingData
 import com.goliath.emojihub.data_sources.EmojiPagingSource
-import com.goliath.emojihub.data_sources.PostPagingSource
 import com.goliath.emojihub.data_sources.api.EmojiApi
 import com.goliath.emojihub.models.EmojiDto
-import com.goliath.emojihub.models.FetchEmojiListDto
-import com.goliath.emojihub.models.PostDto
 import com.goliath.emojihub.models.UploadEmojiDto
 import com.google.gson.Gson
+import dagger.hilt.android.qualifiers.ApplicationContext
 import kotlinx.coroutines.flow.Flow
-import okhttp3.MediaType
+import okhttp3.MediaType.Companion.toMediaTypeOrNull
 import okhttp3.MultipartBody
 import okhttp3.RequestBody
 import retrofit2.HttpException
 import retrofit2.Response
 import java.io.File
+import java.io.FileOutputStream
 import java.io.IOException
 import javax.inject.Inject
 import javax.inject.Singleton
@@ -34,7 +36,8 @@ interface EmojiRepository {
 
 @Singleton
 class EmojiRepositoryImpl @Inject constructor(
-    private val emojiApi: EmojiApi
+    private val emojiApi: EmojiApi,
+    @ApplicationContext private val context: Context
 ): EmojiRepository {
     override suspend fun fetchEmojiList(): Flow<PagingData<EmojiDto>> {
         return Pager(
@@ -49,13 +52,20 @@ class EmojiRepositoryImpl @Inject constructor(
 
     override suspend fun uploadEmoji(videoFile: File, emojiDto: UploadEmojiDto): Boolean {
         val emojiDtoJson = Gson().toJson(emojiDto)
-        val emojiDtoRequestBody = RequestBody.create(MediaType.parse("application/json"), emojiDtoJson)
+        val emojiDtoRequestBody = RequestBody.create("application/json".toMediaTypeOrNull(), emojiDtoJson)
 
-        val videoFileRequestBody = RequestBody.create(MediaType.parse("video/mp4"), videoFile)
+        val videoFileRequestBody = RequestBody.create("video/mp4".toMediaTypeOrNull(), videoFile)
         val videoFileMultipartBody = MultipartBody.Part.createFormData("file", videoFile.name, videoFileRequestBody)
 
+        val thumbnailFile = createVideoThumbnail(context, videoFile)
+
+        val thumbnailRequestBody = RequestBody.create("image/jpg".toMediaTypeOrNull(),
+            thumbnailFile!!
+        )
+        val thumbnailMultipartBody = MultipartBody.Part.createFormData("thumbnail", thumbnailFile?.name, thumbnailRequestBody)
+
         return try {
-            emojiApi.uploadEmoji(videoFileMultipartBody, emojiDtoRequestBody)
+            emojiApi.uploadEmoji(videoFileMultipartBody, thumbnailMultipartBody, emojiDtoRequestBody)
             true
         }
         catch (e: IOException) {
@@ -81,4 +91,27 @@ class EmojiRepositoryImpl @Inject constructor(
     override suspend fun deleteEmoji(id: String): Response<Unit> {
         TODO("Not yet implemented")
     }
+
+    private fun createVideoThumbnail(context: Context, videoFile: File): File? {
+        val retriever = MediaMetadataRetriever()
+        try {
+            retriever.setDataSource(videoFile.absolutePath)
+            val bitmap = retriever.frameAtTime
+
+            bitmap?.let {
+                val thumbnailFile = File(context.cacheDir, "thumbnail_${videoFile.name}.jpg")
+                FileOutputStream(thumbnailFile).use { out ->
+                    bitmap.compress(Bitmap.CompressFormat.JPEG, 75, out)
+                }
+                Log.d("create_TN", "Thumbnail created: ${thumbnailFile.absolutePath}")
+                return thumbnailFile
+            }
+        } catch (e: Exception) {
+            Log.d("create_TN", "ERROR...")
+            e.printStackTrace()
+        } finally {
+            retriever.release()
+        }
+        return null
+    }
 }

android/app/src/main/java/com/goliath/emojihub/usecases/EmojiUseCase.kt

@@ -7,16 +7,12 @@ import androidx.paging.map
 import com.goliath.emojihub.data_sources.ApiErrorController
 import com.goliath.emojihub.models.CreatedEmoji
 import com.goliath.emojihub.models.Emoji
-import com.goliath.emojihub.models.EmojiDto
-import com.goliath.emojihub.models.Post
-
 import com.goliath.emojihub.models.UploadEmojiDto
 import com.goliath.emojihub.repositories.local.X3dRepository
 import com.goliath.emojihub.repositories.remote.EmojiRepository
-import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
-import kotlinx.coroutines.flow.asStateFlow
+import kotlinx.coroutines.flow.Flow
 import kotlinx.coroutines.flow.map
 import java.io.File
 import javax.inject.Inject

android/app/src/main/java/com/goliath/emojihub/viewmodels/EmojiViewModel.kt

@@ -13,9 +13,6 @@ import com.goliath.emojihub.models.Emoji
 import com.goliath.emojihub.usecases.EmojiUseCase
 import dagger.hilt.android.lifecycle.HiltViewModel
 import kotlinx.coroutines.Dispatchers
-import kotlinx.coroutines.flow.MutableStateFlow
-import kotlinx.coroutines.flow.StateFlow
-import kotlinx.coroutines.flow.asStateFlow
 import kotlinx.coroutines.launch
 import kotlinx.coroutines.withContext
 import java.io.File

android/app/src/main/java/com/goliath/emojihub/views/EmojiPage.kt

@@ -44,7 +44,6 @@ import com.goliath.emojihub.views.components.TopNavigationBar
 
 @Composable
 fun EmojiPage(
-//    emojiList: List<Emoji>
 ) {
     val context = LocalContext.current
     val navController = LocalNavController.current
@@ -119,10 +118,4 @@ fun EmojiPage(
             }
         }
     }
-}
-
-//@Preview
-//@Composable
-//fun EmojiPagePreview() {
-//    EmojiPage(emojiList = (1..10).map { createDummyEmoji() })
-//}
+}

android/app/src/main/java/com/goliath/emojihub/views/components/EmojiCell.kt

@@ -1,12 +1,15 @@
 package com.goliath.emojihub.views.components
 
+import android.net.Uri
 import android.util.Log
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.runtime.Composable
 import com.goliath.emojihub.models.Emoji
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
@@ -19,29 +22,52 @@ import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.SaveAlt
 import androidx.compose.material3.IconButton
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.platform.LocalConfiguration
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.hilt.navigation.compose.hiltViewModel
+import coil.compose.AsyncImage
+import coil.compose.rememberAsyncImagePainter
 import com.goliath.emojihub.extensions.toEmoji
 import com.goliath.emojihub.ui.theme.Color.Black
 import com.goliath.emojihub.ui.theme.Color.White
+import com.goliath.emojihub.viewmodels.EmojiViewModel
 
 @Composable
 fun EmojiCell (
     emoji: Emoji,
     onSelected: (Emoji) -> Unit
 ) {
-    Log.d("Fetch_E_L", "Emoji passed: ${emoji.id}")
-    Log.d("Fetch_E_L", "unicode is: ${emoji.unicode}")
+    //replace to emoji.thumbnailLink
+    val thumbnailLink = emoji.thumbnailLink.takeIf{ it.isNotEmpty()} ?:"https://i.pinimg.com/236x/4b/05/0c/4b050ca4fcf588eedc58aa6135f5eecf.jpg"
+    Log.d("create_TN", "${emoji.thumbnailLink}")
+    val context = LocalContext.current
+
     Card (
-        modifier = Modifier.fillMaxWidth().height(292.dp).clickable { onSelected(emoji) },
+        modifier = Modifier
+            .fillMaxWidth()
+            .height(292.dp)
+            .clickable { onSelected(emoji) },
         shape = RoundedCornerShape(4.dp),
         elevation = 0.dp
     ) {
-        // TODO: Add video thumbnail
-        Box(Modifier.fillMaxSize().background(Black).alpha(0.25F))
+        Box(Modifier.fillMaxSize().background(Color.Gray).alpha(0.25F))
+        Image(
+            painter = rememberAsyncImagePainter(thumbnailLink),
+            contentDescription = null,
+            modifier = Modifier.fillMaxWidth(),
+            contentScale = ContentScale.Crop
+        )
 
         Box(
             modifier = Modifier.padding(8.dp)