Merge 64a92bdfdf into d479f29e9b

Introducing Jetpack Compose in NewPipe

app/build.gradle

@@ -92,6 +92,7 @@ android {
 
     buildFeatures {
         viewBinding true
+        compose true
     }
 
     packagingOptions {
@@ -103,6 +104,10 @@ android {
                          'META-INF/COPYRIGHT']
         }
     }
+
+    composeOptions {
+        kotlinCompilerExtensionVersion = "1.5.13"
+    }
 }
 
 ext {
@@ -264,6 +269,7 @@ dependencies {
     // Image loading
     //noinspection GradleDependency --> 2.8 is the last version, not 2.71828!
     implementation "com.squareup.picasso:picasso:2.8"
+    implementation 'io.coil-kt:coil-compose:2.6.0'
 
     // Markdown library for Android
     implementation "io.noties.markwon:core:${markwonVersion}"
@@ -284,6 +290,12 @@ dependencies {
     // Date and time formatting
     implementation "org.ocpsoft.prettytime:prettytime:5.0.7.Final"
 
+    // Jetpack Compose
+    implementation(platform('androidx.compose:compose-bom:2024.05.00'))
+    implementation 'androidx.compose.material3:material3'
+    implementation 'androidx.activity:activity-compose'
+    implementation 'androidx.compose.ui:ui-tooling-preview'
+
 /** Debugging **/
     // Memory leak detection
     debugImplementation "com.squareup.leakcanary:leakcanary-object-watcher-android:${leakCanaryVersion}"
@@ -293,6 +305,9 @@ dependencies {
     debugImplementation "com.facebook.stetho:stetho:${stethoVersion}"
     debugImplementation "com.facebook.stetho:stetho-okhttp3:${stethoVersion}"
 
+    // Jetpack Compose
+    debugImplementation 'androidx.compose.ui:ui-tooling'
+
 /** Testing **/
     testImplementation 'junit:junit:4.13.2'
     testImplementation 'org.mockito:mockito-core:5.6.0'

app/src/main/java/org/schabi/newpipe/fragments/list/comments/Comment.kt

@@ -0,0 +1,131 @@
+package org.schabi.newpipe.fragments.list.comments
+
+import android.content.res.Configuration
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.fragment.app.FragmentActivity
+import coil.compose.AsyncImage
+import org.schabi.newpipe.R
+import org.schabi.newpipe.extractor.comments.CommentsInfoItem
+import org.schabi.newpipe.extractor.stream.Description
+import org.schabi.newpipe.ui.theme.AppTheme
+import org.schabi.newpipe.util.NavigationHelper
+import org.schabi.newpipe.util.image.ImageStrategy
+
+@Composable
+fun Comment(comment: CommentsInfoItem) {
+    val context = LocalContext.current
+
+    Surface(color = MaterialTheme.colorScheme.background) {
+        Row(modifier = Modifier.padding(all = 8.dp)) {
+            if (ImageStrategy.shouldLoadImages()) {
+                AsyncImage(
+                    model = ImageStrategy.choosePreferredImage(comment.uploaderAvatars),
+                    contentDescription = null,
+                    placeholder = painterResource(R.drawable.placeholder_person),
+                    error = painterResource(R.drawable.placeholder_person),
+                    modifier = Modifier
+                        .size(42.dp)
+                        .clip(CircleShape)
+                        .clickable {
+                            NavigationHelper.openCommentAuthorIfPresent(
+                                context as FragmentActivity,
+                                comment
+                            )
+                        }
+                )
+            }
+
+            Spacer(modifier = Modifier.width(8.dp))
+
+            var isExpanded by rememberSaveable { mutableStateOf(false) }
+
+            Column(
+                modifier = Modifier.clickable { isExpanded = !isExpanded },
+                verticalArrangement = Arrangement.spacedBy(4.dp)
+            ) {
+                Text(
+                    text = comment.uploaderName,
+                    color = MaterialTheme.colorScheme.secondary
+                )
+
+                Text(
+                    text = comment.commentText.content,
+                    // If the comment is expanded, we display all its content
+                    // otherwise we only display the first two lines
+                    maxLines = if (isExpanded) Int.MAX_VALUE else 2,
+                    style = MaterialTheme.typography.bodyMedium
+                )
+
+                Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
+                    Image(
+                        painter = painterResource(R.drawable.ic_thumb_up),
+                        contentDescription = stringResource(R.string.detail_likes_img_view_description)
+                    )
+                    Text(text = comment.likeCount.toString())
+
+                    if (comment.isHeartedByUploader) {
+                        Image(
+                            painter = painterResource(R.drawable.ic_heart),
+                            contentDescription = stringResource(R.string.detail_heart_img_view_description)
+                        )
+                    }
+
+                    if (comment.isPinned) {
+                        Image(
+                            painter = painterResource(R.drawable.ic_pin),
+                            contentDescription = stringResource(R.string.detail_pinned_comment_view_description)
+                        )
+                    }
+                }
+            }
+        }
+
+        // TODO: Add support for comment replies
+    }
+}
+
+@Preview(
+    name = "Light mode",
+    uiMode = Configuration.UI_MODE_NIGHT_NO
+)
+@Preview(
+    name = "Dark mode",
+    uiMode = Configuration.UI_MODE_NIGHT_YES
+)
+@Composable
+fun CommentPreview() {
+    val comment = CommentsInfoItem(1, "", "")
+    comment.commentText = Description("Hello world!", Description.PLAIN_TEXT)
+    comment.uploaderName = "Test"
+    comment.likeCount = 100
+    comment.isHeartedByUploader = true
+    comment.isPinned = true
+
+    AppTheme {
+        Comment(comment)
+    }
+}

app/src/main/java/org/schabi/newpipe/fragments/list/comments/CommentRepliesFragment.java

@@ -1,170 +0,0 @@
-package org.schabi.newpipe.fragments.list.comments;
-
-import static org.schabi.newpipe.util.ServiceHelper.getServiceById;
-
-import android.os.Bundle;
-import android.view.LayoutInflater;
-import android.view.View;
-import android.view.ViewGroup;
-
-import androidx.annotation.NonNull;
-import androidx.annotation.Nullable;
-import androidx.constraintlayout.widget.ConstraintLayout;
-import androidx.core.text.HtmlCompat;
-
-import org.schabi.newpipe.R;
-import org.schabi.newpipe.databinding.CommentRepliesHeaderBinding;
-import org.schabi.newpipe.error.UserAction;
-import org.schabi.newpipe.extractor.ListExtractor;
-import org.schabi.newpipe.extractor.comments.CommentsInfoItem;
-import org.schabi.newpipe.fragments.list.BaseListInfoFragment;
-import org.schabi.newpipe.info_list.ItemViewMode;
-import org.schabi.newpipe.util.DeviceUtils;
-import org.schabi.newpipe.util.ExtractorHelper;
-import org.schabi.newpipe.util.Localization;
-import org.schabi.newpipe.util.NavigationHelper;
-import org.schabi.newpipe.util.image.ImageStrategy;
-import org.schabi.newpipe.util.image.PicassoHelper;
-import org.schabi.newpipe.util.text.TextLinkifier;
-
-import java.util.Queue;
-import java.util.function.Supplier;
-
-import icepick.State;
-import io.reactivex.rxjava3.core.Single;
-import io.reactivex.rxjava3.disposables.CompositeDisposable;
-
-public final class CommentRepliesFragment
-        extends BaseListInfoFragment<CommentsInfoItem, CommentRepliesInfo> {
-
-    public static final String TAG = CommentRepliesFragment.class.getSimpleName();
-
-    @State
-    CommentsInfoItem commentsInfoItem; // the comment to show replies of
-    private final CompositeDisposable disposables = new CompositeDisposable();
-
-
-    /*//////////////////////////////////////////////////////////////////////////
-    // Constructors and lifecycle
-    //////////////////////////////////////////////////////////////////////////*/
-
-    // only called by the Android framework, after which readFrom is called and restores all data
-    public CommentRepliesFragment() {
-        super(UserAction.REQUESTED_COMMENT_REPLIES);
-    }
-
-    public CommentRepliesFragment(@NonNull final CommentsInfoItem commentsInfoItem) {
-        this();
-        this.commentsInfoItem = commentsInfoItem;
-        // setting "" as title since the title will be properly set right after
-        setInitialData(commentsInfoItem.getServiceId(), commentsInfoItem.getUrl(), "");
-    }
-
-    @Nullable
-    @Override
-    public View onCreateView(@NonNull final LayoutInflater inflater,
-                             @Nullable final ViewGroup container,
-                             @Nullable final Bundle savedInstanceState) {
-        return inflater.inflate(R.layout.fragment_comments, container, false);
-    }
-
-    @Override
-    public void onDestroyView() {
-        disposables.clear();
-        super.onDestroyView();
-    }
-
-    @Override
-    protected Supplier<View> getListHeaderSupplier() {
-        return () -> {
-            final CommentRepliesHeaderBinding binding = CommentRepliesHeaderBinding
-                    .inflate(activity.getLayoutInflater(), itemsList, false);
-            final CommentsInfoItem item = commentsInfoItem;
-
-            // load the author avatar
-            PicassoHelper.loadAvatar(item.getUploaderAvatars()).into(binding.authorAvatar);
-            binding.authorAvatar.setVisibility(ImageStrategy.shouldLoadImages()
-                    ? View.VISIBLE : View.GONE);
-
-            // setup author name and comment date
-            binding.authorName.setText(item.getUploaderName());
-            binding.uploadDate.setText(Localization.relativeTimeOrTextual(
-                    getContext(), item.getUploadDate(), item.getTextualUploadDate()));
-            binding.authorTouchArea.setOnClickListener(
-                    v -> NavigationHelper.openCommentAuthorIfPresent(requireActivity(), item));
-
-            // setup like count, hearted and pinned
-            binding.thumbsUpCount.setText(
-                    Localization.likeCount(requireContext(), item.getLikeCount()));
-            // for heartImage goneMarginEnd was used, but there is no way to tell ConstraintLayout
-            // not to use a different margin only when both the next two views are gone
-            ((ConstraintLayout.LayoutParams) binding.thumbsUpCount.getLayoutParams())
-                    .setMarginEnd(DeviceUtils.dpToPx(
-                            (item.isHeartedByUploader() || item.isPinned() ? 8 : 16),
-                            requireContext()));
-            binding.heartImage.setVisibility(item.isHeartedByUploader() ? View.VISIBLE : View.GONE);
-            binding.pinnedImage.setVisibility(item.isPinned() ? View.VISIBLE : View.GONE);
-
-            // setup comment content
-            TextLinkifier.fromDescription(binding.commentContent, item.getCommentText(),
-                    HtmlCompat.FROM_HTML_MODE_LEGACY, getServiceById(item.getServiceId()),
-                    item.getUrl(), disposables, null);
-
-            return binding.getRoot();
-        };
-    }
-
-
-    /*//////////////////////////////////////////////////////////////////////////
-    // State saving
-    //////////////////////////////////////////////////////////////////////////*/
-
-    @Override
-    public void writeTo(final Queue<Object> objectsToSave) {
-        super.writeTo(objectsToSave);
-        objectsToSave.add(commentsInfoItem);
-    }
-
-    @Override
-    public void readFrom(@NonNull final Queue<Object> savedObjects) throws Exception {
-        super.readFrom(savedObjects);
-        commentsInfoItem = (CommentsInfoItem) savedObjects.poll();
-    }
-
-
-    /*//////////////////////////////////////////////////////////////////////////
-    // Data loading
-    //////////////////////////////////////////////////////////////////////////*/
-
-    @Override
-    protected Single<CommentRepliesInfo> loadResult(final boolean forceLoad) {
-        return Single.fromCallable(() -> new CommentRepliesInfo(commentsInfoItem,
-                // the reply count string will be shown as the activity title
-                Localization.replyCount(requireContext(), commentsInfoItem.getReplyCount())));
-    }
-
-    @Override
-    protected Single<ListExtractor.InfoItemsPage<CommentsInfoItem>> loadMoreItemsLogic() {
-        // commentsInfoItem.getUrl() should contain the url of the original
-        // ListInfo<CommentsInfoItem>, which should be the stream url
-        return ExtractorHelper.getMoreCommentItems(
-                serviceId, commentsInfoItem.getUrl(), currentNextPage);
-    }
-
-
-    /*//////////////////////////////////////////////////////////////////////////
-    // Utils
-    //////////////////////////////////////////////////////////////////////////*/
-
-    @Override
-    protected ItemViewMode getItemViewMode() {
-        return ItemViewMode.LIST;
-    }
-
-    /**
-     * @return the comment to which the replies are shown
-     */
-    public CommentsInfoItem getCommentsInfoItem() {
-        return commentsInfoItem;
-    }
-}

app/src/main/java/org/schabi/newpipe/fragments/list/comments/CommentRepliesFragment.kt

@@ -0,0 +1,107 @@
+package org.schabi.newpipe.fragments.list.comments
+
+import android.os.Bundle
+import android.view.LayoutInflater
+import android.view.View
+import android.view.ViewGroup
+import androidx.compose.ui.platform.ComposeView
+import icepick.State
+import io.reactivex.rxjava3.core.Single
+import io.reactivex.rxjava3.disposables.CompositeDisposable
+import org.schabi.newpipe.R
+import org.schabi.newpipe.error.UserAction
+import org.schabi.newpipe.extractor.ListExtractor.InfoItemsPage
+import org.schabi.newpipe.extractor.comments.CommentsInfoItem
+import org.schabi.newpipe.fragments.list.BaseListInfoFragment
+import org.schabi.newpipe.info_list.ItemViewMode
+import org.schabi.newpipe.ui.theme.AppTheme
+import org.schabi.newpipe.util.ExtractorHelper
+import org.schabi.newpipe.util.Localization
+import java.util.Queue
+import java.util.function.Supplier
+
+class CommentRepliesFragment() : BaseListInfoFragment<CommentsInfoItem, CommentRepliesInfo>(UserAction.REQUESTED_COMMENT_REPLIES) {
+    /**
+     * @return the comment to which the replies are shown
+     */
+    @State
+    lateinit var commentsInfoItem: CommentsInfoItem // the comment to show replies of
+    private val disposables = CompositeDisposable()
+
+    constructor(commentsInfoItem: CommentsInfoItem) : this() {
+        this.commentsInfoItem = commentsInfoItem
+        // setting "" as title since the title will be properly set right after
+        setInitialData(commentsInfoItem.serviceId, commentsInfoItem.url, "")
+    }
+
+    override fun onCreateView(
+        inflater: LayoutInflater,
+        container: ViewGroup?,
+        savedInstanceState: Bundle?
+    ): View {
+        return inflater.inflate(R.layout.fragment_comments, container, false)
+    }
+
+    override fun onDestroyView() {
+        disposables.clear()
+        super.onDestroyView()
+    }
+
+    override fun getListHeaderSupplier(): Supplier<View> {
+        return Supplier {
+            ComposeView(requireContext()).apply {
+                setContent {
+                    AppTheme {
+                        CommentRepliesHeader(commentsInfoItem, disposables)
+                    }
+                }
+            }
+        }
+    }
+
+    /*//////////////////////////////////////////////////////////////////////////
+    // State saving
+    ////////////////////////////////////////////////////////////////////////// */
+    override fun writeTo(objectsToSave: Queue<Any>) {
+        super.writeTo(objectsToSave)
+        objectsToSave.add(commentsInfoItem)
+    }
+
+    @Throws(Exception::class)
+    override fun readFrom(savedObjects: Queue<Any>) {
+        super.readFrom(savedObjects)
+        commentsInfoItem = savedObjects.poll() as CommentsInfoItem
+    }
+
+    /*//////////////////////////////////////////////////////////////////////////
+    // Data loading
+    ////////////////////////////////////////////////////////////////////////// */
+    override fun loadResult(forceLoad: Boolean): Single<CommentRepliesInfo> {
+        return Single.fromCallable {
+            CommentRepliesInfo(
+                commentsInfoItem, // the reply count string will be shown as the activity title
+                Localization.replyCount(requireContext(), commentsInfoItem.replyCount)
+            )
+        }
+    }
+
+    override fun loadMoreItemsLogic(): Single<InfoItemsPage<CommentsInfoItem?>>? {
+        // commentsInfoItem.getUrl() should contain the url of the original
+        // ListInfo<CommentsInfoItem>, which should be the stream url
+        return ExtractorHelper.getMoreCommentItems(
+            serviceId, commentsInfoItem.url, currentNextPage
+        )
+    }
+
+    /*//////////////////////////////////////////////////////////////////////////
+    // Utils
+    ////////////////////////////////////////////////////////////////////////// */
+    override fun getItemViewMode(): ItemViewMode {
+        return ItemViewMode.LIST
+    }
+
+    companion object {
+        @JvmField
+        val TAG: String = CommentRepliesFragment::class.java.simpleName
+    }
+}

app/src/main/java/org/schabi/newpipe/fragments/list/comments/CommentRepliesHeader.kt

@@ -0,0 +1,161 @@
+package org.schabi.newpipe.fragments.list.comments
+
+import android.content.res.Configuration
+import android.widget.TextView
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.compose.ui.viewinterop.AndroidView
+import androidx.core.text.HtmlCompat
+import androidx.core.text.method.LinkMovementMethodCompat
+import androidx.fragment.app.FragmentActivity
+import coil.compose.AsyncImage
+import io.reactivex.rxjava3.disposables.CompositeDisposable
+import org.schabi.newpipe.R
+import org.schabi.newpipe.extractor.comments.CommentsInfoItem
+import org.schabi.newpipe.extractor.stream.Description
+import org.schabi.newpipe.ui.theme.AppTheme
+import org.schabi.newpipe.util.Localization
+import org.schabi.newpipe.util.NavigationHelper
+import org.schabi.newpipe.util.ServiceHelper
+import org.schabi.newpipe.util.image.ImageStrategy
+import org.schabi.newpipe.util.text.TextLinkifier
+
+@Composable
+fun CommentRepliesHeader(comment: CommentsInfoItem, disposables: CompositeDisposable) {
+    val context = LocalContext.current
+
+    Surface(color = MaterialTheme.colorScheme.background) {
+        Column(modifier = Modifier.padding(all = 8.dp)) {
+            Row(
+                modifier = Modifier.fillMaxWidth(),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                Row(
+                    modifier = Modifier
+                        .padding(top = 8.dp, bottom = 8.dp, end = 8.dp)
+                        .clickable {
+                            NavigationHelper.openCommentAuthorIfPresent(
+                                context as FragmentActivity,
+                                comment
+                            )
+                        },
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    if (ImageStrategy.shouldLoadImages()) {
+                        AsyncImage(
+                            model = ImageStrategy.choosePreferredImage(comment.uploaderAvatars),
+                            contentDescription = null,
+                            placeholder = painterResource(R.drawable.placeholder_person),
+                            error = painterResource(R.drawable.placeholder_person),
+                            modifier = Modifier
+                                .size(42.dp)
+                                .clip(CircleShape)
+                        )
+                    }
+
+                    Spacer(modifier = Modifier.width(8.dp))
+
+                    Column {
+                        Text(text = comment.uploaderName)
+
+                        Text(
+                            color = MaterialTheme.colorScheme.secondary,
+                            style = MaterialTheme.typography.bodySmall,
+                            text = Localization.relativeTimeOrTextual(
+                                context, comment.uploadDate, comment.textualUploadDate
+                            )
+                        )
+                    }
+                }
+
+                Spacer(modifier = Modifier.weight(1f))
+
+                Row(
+                    horizontalArrangement = Arrangement.spacedBy(8.dp),
+                    verticalAlignment = Alignment.CenterVertically
+                ) {
+                    Image(
+                        painter = painterResource(R.drawable.ic_thumb_up),
+                        contentDescription = stringResource(R.string.detail_likes_img_view_description)
+                    )
+                    Text(text = comment.likeCount.toString())
+
+                    if (comment.isHeartedByUploader) {
+                        Image(
+                            painter = painterResource(R.drawable.ic_heart),
+                            contentDescription = stringResource(R.string.detail_heart_img_view_description)
+                        )
+                    }
+
+                    if (comment.isPinned) {
+                        Image(
+                            painter = painterResource(R.drawable.ic_pin),
+                            contentDescription = stringResource(R.string.detail_pinned_comment_view_description)
+                        )
+                    }
+                }
+            }
+
+            AndroidView(
+                factory = { context ->
+                    TextView(context).apply {
+                        movementMethod = LinkMovementMethodCompat.getInstance()
+                    }
+                },
+                update = { view ->
+                    // setup comment content
+                    TextLinkifier.fromDescription(
+                        view, comment.commentText, HtmlCompat.FROM_HTML_MODE_LEGACY,
+                        ServiceHelper.getServiceById(comment.serviceId), comment.url, disposables,
+                        null
+                    )
+                }
+            )
+        }
+    }
+}
+
+@Preview(
+    name = "Light mode",
+    uiMode = Configuration.UI_MODE_NIGHT_NO
+)
+@Preview(
+    name = "Dark mode",
+    uiMode = Configuration.UI_MODE_NIGHT_YES
+)
+@Composable
+fun CommentRepliesHeaderPreview() {
+    val disposables = CompositeDisposable()
+    val comment = CommentsInfoItem(1, "", "")
+    comment.commentText = Description("Hello world!", Description.PLAIN_TEXT)
+    comment.uploaderName = "Test"
+    comment.textualUploadDate = "5 months ago"
+    comment.likeCount = 100
+    comment.isPinned = true
+    comment.isHeartedByUploader = true
+
+    AppTheme {
+        CommentRepliesHeader(comment, disposables)
+    }
+}

app/src/main/java/org/schabi/newpipe/ui/Toolbar.kt

@@ -0,0 +1,137 @@
+package org.schabi.newpipe.ui
+
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.automirrored.filled.ArrowBack
+import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Icon
+import androidx.compose.material3.IconButton
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.SearchBar
+import androidx.compose.material3.SearchBarDefaults
+import androidx.compose.material3.Text
+import androidx.compose.material3.TopAppBar
+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.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import org.schabi.newpipe.R
+import org.schabi.newpipe.ui.theme.AppTheme
+import org.schabi.newpipe.ui.theme.SizeTokens
+
+@Composable
+fun TextAction(text: String, modifier: Modifier = Modifier) {
+    Text(text = text, color = MaterialTheme.colorScheme.onSurface, modifier = modifier)
+}
+
+@Composable
+fun NavigationIcon() {
+    Icon(
+        imageVector = Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Back",
+        modifier = Modifier.padding(horizontal = SizeTokens.SpacingExtraSmall)
+    )
+}
+
+@Composable
+fun SearchSuggestionItem(text: String) {
+    // TODO: Add more components here to display all the required details of a search suggestion item.
+    Text(text = text)
+}
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun Toolbar(
+    title: String,
+    modifier: Modifier = Modifier,
+    hasNavigationIcon: Boolean = true,
+    hasSearch: Boolean = false,
+    onSearchQueryChange: ((String) -> List<String>)? = null,
+    actions: @Composable RowScope.() -> Unit = {}
+) {
+    var isSearchActive by remember { mutableStateOf(false) }
+    var query by remember { mutableStateOf("") }
+
+    Column {
+        TopAppBar(
+            title = { Text(text = title) },
+            modifier = modifier,
+            navigationIcon = { if (hasNavigationIcon) NavigationIcon() },
+            actions = {
+                actions()
+                if (hasSearch) {
+                    IconButton(onClick = { isSearchActive = true }) {
+                        Icon(
+                            painterResource(id = R.drawable.ic_search),
+                            contentDescription = stringResource(id = R.string.search),
+                            tint = MaterialTheme.colorScheme.onSurface
+                        )
+                    }
+                }
+            }
+        )
+        if (isSearchActive) {
+            SearchBar(
+                query = query,
+                onQueryChange = { query = it },
+                onSearch = {},
+                placeholder = {
+                    Text(text = stringResource(id = R.string.search))
+                },
+                active = true,
+                onActiveChange = {
+                    isSearchActive = it
+                },
+                colors = SearchBarDefaults.colors(
+                    containerColor = MaterialTheme.colorScheme.background,
+                    inputFieldColors = SearchBarDefaults.inputFieldColors(
+                        focusedTextColor = MaterialTheme.colorScheme.onBackground,
+                        unfocusedTextColor = MaterialTheme.colorScheme.onBackground
+                    )
+                )
+            ) {
+                onSearchQueryChange?.invoke(query)?.takeIf { it.isNotEmpty() }
+                    ?.map { suggestionText -> SearchSuggestionItem(text = suggestionText) }
+                    ?: run {
+                        Box(
+                            modifier = Modifier
+                                .fillMaxHeight()
+                                .fillMaxWidth(),
+                            contentAlignment = Alignment.Center
+                        ) {
+                            Column {
+                                Text(text = "╰(°●°╰)")
+                                Text(text = stringResource(id = R.string.search_no_results))
+                            }
+                        }
+                    }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun ToolbarPreview() {
+    AppTheme {
+        Toolbar(
+            title = "Title",
+            hasSearch = true,
+            onSearchQueryChange = { emptyList() },
+            actions = {
+                TextAction(text = "Action1")
+                TextAction(text = "Action2")
+            }
+        )
+    }
+}

app/src/main/java/org/schabi/newpipe/ui/theme/Color.kt

@@ -0,0 +1,63 @@
+package org.schabi.newpipe.ui.theme
+
+import androidx.compose.ui.graphics.Color
+
+val md_theme_light_primary = Color(0xFFBB171C)
+val md_theme_light_onPrimary = Color(0xFFFFFFFF)
+val md_theme_light_primaryContainer = Color(0xFFFFDAD6)
+val md_theme_light_onPrimaryContainer = Color(0xFF410002)
+val md_theme_light_secondary = Color(0xFF984061)
+val md_theme_light_onSecondary = Color(0xFFFFFFFF)
+val md_theme_light_secondaryContainer = Color(0xFFFFD9E2)
+val md_theme_light_onSecondaryContainer = Color(0xFF3E001D)
+val md_theme_light_tertiary = Color(0xFF006874)
+val md_theme_light_onTertiary = Color(0xFFFFFFFF)
+val md_theme_light_tertiaryContainer = Color(0xFF97F0FF)
+val md_theme_light_onTertiaryContainer = Color(0xFF001F24)
+val md_theme_light_error = Color(0xFFBA1A1A)
+val md_theme_light_errorContainer = Color(0xFFFFDAD6)
+val md_theme_light_onError = Color(0xFFFFFFFF)
+val md_theme_light_onErrorContainer = Color(0xFF410002)
+val md_theme_light_background = Color(0xFFEEEEEE)
+val md_theme_light_onBackground = Color(0xFF1B1B1B)
+val md_theme_light_surface = Color(0xFFE53835)
+val md_theme_light_onSurface = Color(0xFFFFFFFF)
+val md_theme_light_surfaceVariant = Color(0xFFF5DDDB)
+val md_theme_light_onSurfaceVariant = Color(0xFF534341)
+val md_theme_light_outline = Color(0xFF857371)
+val md_theme_light_inverseOnSurface = Color(0xFFD6F6FF)
+val md_theme_light_inverseSurface = Color(0xFF00363F)
+val md_theme_light_inversePrimary = Color(0xFFFFB4AC)
+val md_theme_light_surfaceTint = Color(0xFFBB171C)
+val md_theme_light_outlineVariant = Color(0xFFD8C2BF)
+val md_theme_light_scrim = Color(0xFF000000)
+
+val md_theme_dark_primary = Color(0xFFFFB4AC)
+val md_theme_dark_onPrimary = Color(0xFF690006)
+val md_theme_dark_primaryContainer = Color(0xFF93000D)
+val md_theme_dark_onPrimaryContainer = Color(0xFFFFDAD6)
+val md_theme_dark_secondary = Color(0xFFFFB1C8)
+val md_theme_dark_onSecondary = Color(0xFF5E1133)
+val md_theme_dark_secondaryContainer = Color(0xFF7B2949)
+val md_theme_dark_onSecondaryContainer = Color(0xFFFFD9E2)
+val md_theme_dark_tertiary = Color(0xFF4FD8EB)
+val md_theme_dark_onTertiary = Color(0xFF00363D)
+val md_theme_dark_tertiaryContainer = Color(0xFF004F58)
+val md_theme_dark_onTertiaryContainer = Color(0xFF97F0FF)
+val md_theme_dark_error = Color(0xFFFFB4AB)
+val md_theme_dark_errorContainer = Color(0xFF93000A)
+val md_theme_dark_onError = Color(0xFF690005)
+val md_theme_dark_onErrorContainer = Color(0xFFFFDAD6)
+val md_theme_dark_background = Color(0xFF212121)
+val md_theme_dark_onBackground = Color(0xFFFFFFFF)
+val md_theme_dark_surface = Color(0xFF992521)
+val md_theme_dark_onSurface = Color(0xFFFFFFFF)
+val md_theme_dark_surfaceVariant = Color(0xFF534341)
+val md_theme_dark_onSurfaceVariant = Color(0xFFD8C2BF)
+val md_theme_dark_outline = Color(0xFFA08C8A)
+val md_theme_dark_inverseOnSurface = Color(0xFF001F25)
+val md_theme_dark_inverseSurface = Color(0xFFA6EEFF)
+val md_theme_dark_inversePrimary = Color(0xFFBB171C)
+val md_theme_dark_surfaceTint = Color(0xFFFFB4AC)
+val md_theme_dark_outlineVariant = Color(0xFF534341)
+val md_theme_dark_scrim = Color(0xFF000000)

app/src/main/java/org/schabi/newpipe/ui/theme/SizeTokens.kt

@@ -0,0 +1,13 @@
+package org.schabi.newpipe.ui.theme
+
+import androidx.compose.ui.unit.dp
+
+internal object SizeTokens {
+    val SpacingExtraSmall = 4.dp
+    val SpacingSmall = 8.dp
+    val SpacingMedium = 16.dp
+    val SpacingLarge = 24.dp
+    val SpacingExtraLarge = 32.dp
+
+    val SpaceMinSize = 44.dp // Minimum tappable size required for accessibility
+}

app/src/main/java/org/schabi/newpipe/ui/theme/Theme.kt

@@ -0,0 +1,79 @@
+package org.schabi.newpipe.ui.theme
+
+import androidx.compose.foundation.isSystemInDarkTheme
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.darkColorScheme
+import androidx.compose.material3.lightColorScheme
+import androidx.compose.runtime.Composable
+
+private val LightColors = lightColorScheme(
+    primary = md_theme_light_primary,
+    onPrimary = md_theme_light_onPrimary,
+    primaryContainer = md_theme_light_primaryContainer,
+    onPrimaryContainer = md_theme_light_onPrimaryContainer,
+    secondary = md_theme_light_secondary,
+    onSecondary = md_theme_light_onSecondary,
+    secondaryContainer = md_theme_light_secondaryContainer,
+    onSecondaryContainer = md_theme_light_onSecondaryContainer,
+    tertiary = md_theme_light_tertiary,
+    onTertiary = md_theme_light_onTertiary,
+    tertiaryContainer = md_theme_light_tertiaryContainer,
+    onTertiaryContainer = md_theme_light_onTertiaryContainer,
+    error = md_theme_light_error,
+    errorContainer = md_theme_light_errorContainer,
+    onError = md_theme_light_onError,
+    onErrorContainer = md_theme_light_onErrorContainer,
+    background = md_theme_light_background,
+    onBackground = md_theme_light_onBackground,
+    surface = md_theme_light_surface,
+    onSurface = md_theme_light_onSurface,
+    surfaceVariant = md_theme_light_surfaceVariant,
+    onSurfaceVariant = md_theme_light_onSurfaceVariant,
+    outline = md_theme_light_outline,
+    inverseOnSurface = md_theme_light_inverseOnSurface,
+    inverseSurface = md_theme_light_inverseSurface,
+    inversePrimary = md_theme_light_inversePrimary,
+    surfaceTint = md_theme_light_surfaceTint,
+    outlineVariant = md_theme_light_outlineVariant,
+    scrim = md_theme_light_scrim,
+)
+
+private val DarkColors = darkColorScheme(
+    primary = md_theme_dark_primary,
+    onPrimary = md_theme_dark_onPrimary,
+    primaryContainer = md_theme_dark_primaryContainer,
+    onPrimaryContainer = md_theme_dark_onPrimaryContainer,
+    secondary = md_theme_dark_secondary,
+    onSecondary = md_theme_dark_onSecondary,
+    secondaryContainer = md_theme_dark_secondaryContainer,
+    onSecondaryContainer = md_theme_dark_onSecondaryContainer,
+    tertiary = md_theme_dark_tertiary,
+    onTertiary = md_theme_dark_onTertiary,
+    tertiaryContainer = md_theme_dark_tertiaryContainer,
+    onTertiaryContainer = md_theme_dark_onTertiaryContainer,
+    error = md_theme_dark_error,
+    errorContainer = md_theme_dark_errorContainer,
+    onError = md_theme_dark_onError,
+    onErrorContainer = md_theme_dark_onErrorContainer,
+    background = md_theme_dark_background,
+    onBackground = md_theme_dark_onBackground,
+    surface = md_theme_dark_surface,
+    onSurface = md_theme_dark_onSurface,
+    surfaceVariant = md_theme_dark_surfaceVariant,
+    onSurfaceVariant = md_theme_dark_onSurfaceVariant,
+    outline = md_theme_dark_outline,
+    inverseOnSurface = md_theme_dark_inverseOnSurface,
+    inverseSurface = md_theme_dark_inverseSurface,
+    inversePrimary = md_theme_dark_inversePrimary,
+    surfaceTint = md_theme_dark_surfaceTint,
+    outlineVariant = md_theme_dark_outlineVariant,
+    scrim = md_theme_dark_scrim,
+)
+
+@Composable
+fun AppTheme(useDarkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit) {
+    MaterialTheme(
+        colorScheme = if (useDarkTheme) DarkColors else LightColors,
+        content = content
+    )
+}

app/src/main/res/layout/comment_replies_header.xml

@@ -1,137 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
-    xmlns:app="http://schemas.android.com/apk/res-auto"
-    xmlns:tools="http://schemas.android.com/tools"
-    android:layout_width="match_parent"
-    android:layout_height="wrap_content">
-
-    <com.google.android.material.imageview.ShapeableImageView
-        android:id="@+id/authorAvatar"
-        android:layout_width="42dp"
-        android:layout_height="42dp"
-        android:layout_marginStart="16dp"
-        android:layout_marginTop="16dp"
-        android:focusable="false"
-        android:src="@drawable/placeholder_person"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent"
-        app:shapeAppearance="@style/CircularImageView"
-        tools:ignore="RtlHardcoded" />
-
-    <org.schabi.newpipe.views.NewPipeTextView
-        android:id="@+id/authorName"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="8dp"
-        android:layout_marginEnd="8dp"
-        android:ellipsize="end"
-        android:lines="1"
-        android:textAppearance="?android:attr/textAppearanceLarge"
-        android:textSize="16sp"
-        app:layout_constraintBottom_toTopOf="@+id/uploadDate"
-        app:layout_constraintEnd_toStartOf="@+id/thumbsUpImage"
-        app:layout_constraintStart_toEndOf="@+id/authorAvatar"
-        app:layout_constraintTop_toTopOf="@+id/authorAvatar"
-        tools:text="@tools:sample/lorem/random" />
-
-    <org.schabi.newpipe.views.NewPipeTextView
-        android:id="@+id/uploadDate"
-        android:layout_width="0dp"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="8dp"
-        android:layout_marginEnd="8dp"
-        android:ellipsize="end"
-        android:lines="1"
-        android:textAppearance="?android:attr/textAppearanceSmall"
-        android:textSize="14sp"
-        app:layout_constraintBottom_toBottomOf="@+id/authorAvatar"
-        app:layout_constraintEnd_toStartOf="@+id/thumbsUpImage"
-        app:layout_constraintStart_toEndOf="@+id/authorAvatar"
-        app:layout_constraintTop_toBottomOf="@+id/authorName"
-        tools:text="5 months ago" />
-
-    <ImageView
-        android:id="@+id/thumbsUpImage"
-        android:layout_width="21sp"
-        android:layout_height="21sp"
-        android:layout_marginEnd="@dimen/video_item_detail_like_margin"
-        android:contentDescription="@string/detail_likes_img_view_description"
-        android:src="@drawable/ic_thumb_up"
-        app:layout_constraintBottom_toBottomOf="@+id/authorAvatar"
-        app:layout_constraintEnd_toStartOf="@+id/thumbsUpCount"
-        app:layout_constraintTop_toTopOf="@+id/authorAvatar" />
-
-    <org.schabi.newpipe.views.NewPipeTextView
-        android:id="@+id/thumbsUpCount"
-        android:layout_width="wrap_content"
-        android:layout_height="wrap_content"
-        android:layout_marginEnd="8dp"
-        android:gravity="center"
-        android:lines="1"
-        android:textAppearance="?android:attr/textAppearanceMedium"
-        android:textSize="14sp"
-        app:layout_constraintBottom_toBottomOf="@+id/authorAvatar"
-        app:layout_constraintEnd_toStartOf="@+id/heartImage"
-        app:layout_constraintTop_toTopOf="@+id/authorAvatar"
-        tools:text="12M" />
-
-    <ImageView
-        android:id="@+id/heartImage"
-        android:layout_width="21sp"
-        android:layout_height="21sp"
-        android:layout_marginEnd="4dp"
-        android:contentDescription="@string/detail_heart_img_view_description"
-        android:src="@drawable/ic_heart"
-        app:layout_constraintBottom_toBottomOf="@+id/authorAvatar"
-        app:layout_constraintEnd_toStartOf="@+id/pinnedImage"
-        app:layout_constraintTop_toTopOf="@+id/authorAvatar"
-        app:layout_goneMarginEnd="16dp" />
-
-    <View
-        android:id="@+id/authorTouchArea"
-        android:layout_width="0dp"
-        android:layout_height="0dp"
-        android:layout_margin="8dp"
-        android:background="?attr/selectableItemBackground"
-        app:layout_constraintBottom_toTopOf="@+id/commentContent"
-        app:layout_constraintEnd_toStartOf="@+id/thumbsUpImage"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toTopOf="parent" />
-
-    <ImageView
-        android:id="@+id/pinnedImage"
-        android:layout_width="21sp"
-        android:layout_height="21sp"
-        android:layout_marginEnd="16dp"
-        android:contentDescription="@string/detail_pinned_comment_view_description"
-        android:src="@drawable/ic_pin"
-        app:layout_constraintBottom_toBottomOf="@+id/authorAvatar"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintTop_toTopOf="@+id/authorAvatar" />
-
-    <org.schabi.newpipe.views.NewPipeTextView
-        android:id="@+id/commentContent"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_marginStart="16dp"
-        android:layout_marginTop="16dp"
-        android:layout_marginEnd="16dp"
-        android:textAppearance="?android:attr/textAppearanceLarge"
-        android:textSize="14sp"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/authorAvatar"
-        tools:text="@tools:sample/lorem/random[10]" />
-
-    <View
-        android:layout_width="match_parent"
-        android:layout_height="1px"
-        android:layout_marginTop="16dp"
-        android:layout_marginBottom="8dp"
-        android:background="?attr/separator_color"
-        app:layout_constraintBottom_toBottomOf="parent"
-        app:layout_constraintEnd_toEndOf="parent"
-        app:layout_constraintStart_toStartOf="parent"
-        app:layout_constraintTop_toBottomOf="@+id/commentContent" />
-
-</androidx.constraintlayout.widget.ConstraintLayout>

build.gradle

@@ -1,7 +1,7 @@
 // Top-level build file where you can add configuration options common to all sub-projects/modules.
 
 buildscript {
-    ext.kotlin_version = '1.9.10'
+    ext.kotlin_version = '1.9.23'
     repositories {
         google()
         mavenCentral()