Skip to content

Added showing a page overlay while reading a comic [#149] #150

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

Merged
mcpierce merged 1 commit into from
Aug 8, 2025
Merged

Added showing a page overlay while reading a comic [#149] #150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
165 changes: 101 additions & 64 deletions ...t/android/view/reading/ReadingPageView.kt → ...ndroid/view/reading/PageNavigationView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,16 +20,17 @@ package org.comixedproject.variant.android.view.reading

import android.graphics.BitmapFactory
import androidx.compose.foundation.Image
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
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.padding
import androidx.compose.material3.BottomAppBar
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Slider
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
Expand All @@ -43,6 +44,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.asImageBitmap
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.tooling.preview.Preview
import org.comixedproject.variant.adaptor.ArchiveAPI
Expand All @@ -51,42 +53,33 @@ import org.comixedproject.variant.android.R
import org.comixedproject.variant.android.VariantTheme
import org.comixedproject.variant.platform.Log

private const val TAG = "ReadingPageView"
private const val TAG = "PageNavigationView"

@Composable
fun ReadingPageView(
fun PageNavigationView(
comicFilename: String,
comicTitle: String,
pageFilename: String,
title: String,
currentPage: Int,
totalPages: Int,
showPageOverlay: Boolean,
onChangePage: (Int) -> Unit,
onStopReading: () -> Unit,
onToggleShowOverlay: () -> Unit,
modifier: Modifier = Modifier
) {
var currentPageContent by remember { mutableStateOf<ByteArray?>(null) }

Scaffold(
content = { padding ->
if (currentPageContent == null) {
LaunchedEffect(currentPageContent) {
currentPageContent =
ArchiveAPI.loadPage(comicFilename, pageFilename)
}
} else {
currentPageContent?.let { content ->
Image(
bitmap = BitmapFactory.decodeByteArray(content, 0, content.size)
.asImageBitmap(),
contentDescription = title,
modifier = Modifier
.padding(padding)
.fillMaxHeight()
)
}
Column(
modifier = modifier
.verticalScroll(rememberScrollState())
.clickable {
Log.debug(TAG, "Page tapped")
onToggleShowOverlay()
}
},
topBar = {
.fillMaxSize()) {
if (showPageOverlay) {
Row(
verticalAlignment = Alignment.CenterVertically,
modifier = Modifier.fillMaxWidth()
Expand All @@ -107,69 +100,113 @@ fun ReadingPageView(
}

Text(
title,
text = comicTitle,
style = MaterialTheme.typography.titleMedium,
textAlign = TextAlign.Center,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
modifier = Modifier.fillMaxWidth()
)
}
},
bottomBar = {
BottomAppBar {
Row(modifier = Modifier.fillMaxWidth()) {
IconButton(onClick = {
currentPageContent = null
onChangePage(currentPage - 1)
}, enabled = (currentPage > 0)) {
Icon(
painterResource(R.drawable.ic_previous_page),
contentDescription = stringResource(R.string.previousPageLabel)
)
}

Slider(
value = currentPage.toFloat(),
valueRange = 0f..(totalPages - 1).toFloat(),
steps = totalPages,
onValueChange = {
currentPageContent = null
onChangePage(it.toInt())
},
modifier = Modifier.weight(0.9f)
Text(
text = pageFilename,
style = MaterialTheme.typography.titleSmall,
textAlign = TextAlign.Center,
maxLines = 1, overflow = TextOverflow.Ellipsis,
modifier = Modifier.fillMaxWidth()
)
Row(modifier = Modifier.fillMaxWidth()) {
IconButton(onClick = {
currentPageContent = null
onChangePage(currentPage - 1)
}, enabled = (currentPage > 0)) {
Icon(
painterResource(R.drawable.ic_previous_page),
contentDescription = stringResource(R.string.previousPageLabel)
)
}

IconButton(onClick = {
Slider(
value = currentPage.toFloat(),
valueRange = 0f..(totalPages - 1).toFloat(),
steps = totalPages,
onValueChange = {
currentPageContent = null
onChangePage(currentPage + 1)
}, enabled = (currentPage < (totalPages - 1))) {
Icon(
painterResource(R.drawable.ic_next_page),
contentDescription = stringResource(R.string.nextPageLabel)
)
}
onChangePage(it.toInt())
},
modifier = Modifier.weight(0.9f)
)

IconButton(onClick = {
currentPageContent = null
onChangePage(currentPage + 1)
}, enabled = (currentPage < (totalPages - 1))) {
Icon(
painterResource(R.drawable.ic_next_page),
contentDescription = stringResource(R.string.nextPageLabel)
)
}
}
},
modifier = modifier
.fillMaxSize()
)
}


if (currentPageContent == null) {
LaunchedEffect(currentPageContent) {
currentPageContent =
ArchiveAPI.loadPage(comicFilename, pageFilename)
}
} else {
currentPageContent?.let { content ->
Image(
bitmap = BitmapFactory.decodeByteArray(content, 0, content.size)
.asImageBitmap(),
contentDescription = title,
modifier = modifier
.fillMaxHeight()
)
}
}
}
}


@Composable
@Preview
fun ReadingPageViewPreview() {
fun PageNavigationPreview() {
val comic = COMIC_BOOK_LIST.get(0)

VariantTheme {
ReadingPageView(
PageNavigationView(
comic.path,
comic.filename,
comic.pages.get(0).filename,
"Page Title",
5,
10,
false,
onChangePage = {},
onStopReading = {},
onToggleShowOverlay = {})
}
}

@Composable
@Preview
fun PageNavigationPreviewWithOverlay() {
val comic = COMIC_BOOK_LIST.get(0)

VariantTheme {
PageNavigationView(
comic.path,
comic.metadata.title,
comic.pages.get(0).filename,
"Page Title",
5,
10,
true,
onChangePage = {},
onStopReading = {}
)
onStopReading = {},
onToggleShowOverlay = {})
}
}
16 changes: 14 additions & 2 deletions androidVariant/src/main/java/org/comixedproject/variant/android/view/reading/ReadingView.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ package org.comixedproject.variant.android.view.reading
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
Expand All @@ -33,20 +34,31 @@ import org.comixedproject.variant.platform.Log
private const val TAG = "ReadingView"

@Composable
fun ReadingView(comicBook: ComicBook, onStopReading: () -> Unit, modifier: Modifier = Modifier) {
fun ReadingView(
comicBook: ComicBook,
onStopReading: () -> Unit,
modifier: Modifier = Modifier
) {
var currentPage by remember { mutableIntStateOf(0) }
var showPageOverlay by remember { mutableStateOf(false) }

ReadingPageView(
PageNavigationView(
comicBook.path,
comicBook.filename,
comicBook.pages.get(currentPage).filename,
comicBook.pages.get(currentPage).filename,
currentPage,
comicBook.pages.size,
showPageOverlay,
onChangePage = {
Log.debug(TAG, "Going to page ${it}")
currentPage = it
},
onStopReading = onStopReading,
onToggleShowOverlay = {
Log.debug(TAG, "Toggling showing overlay")
showPageOverlay = !showPageOverlay
},
modifier = modifier
)
}
Expand Down
8 changes: 4 additions & 4 deletions iosVariant/Variant.xcodeproj/project.pbxproj
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
6AA5984C2DE72EF40078CC9F /* Fixtures.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6AA5984B2DE72EF40078CC9F /* Fixtures.swift */; };
6AA598502DE73A8F0078CC9F /* EditServerView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6AA5984F2DE73A8F0078CC9F /* EditServerView.swift */; };
6AF012932E1DDF67001A6A19 /* ReadingView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6AF012922E1DDF67001A6A19 /* ReadingView.swift */; };
6AF012952E1E89A3001A6A19 /* ReadingPageView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6AF012942E1E89A3001A6A19 /* ReadingPageView.swift */; };
7555FF83242A565900829871 /* HomeView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 7555FF82242A565900829871 /* HomeView.swift */; };
B62AADC32DFDDF01000BCC0C /* DirectoryEntry.swift in Sources */ = {isa = PBXBuildFile; fileRef = B62AADC22DFDDF01000BCC0C /* DirectoryEntry.swift */; };
B67F711E2E1848A1005BFB6B /* ImageLoader.swift in Sources */ = {isa = PBXBuildFile; fileRef = B67F711D2E1848A1005BFB6B /* ImageLoader.swift */; };
Expand All @@ -26,6 +25,7 @@
B68FF2E92E0834980010853B /* ComicBooksView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B68FF2E82E0834980010853B /* ComicBooksView.swift */; };
B68FF2EB2E0834EF0010853B /* ComicBookListView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B68FF2EA2E0834EF0010853B /* ComicBookListView.swift */; };
B68FF2ED2E0837610010853B /* ComicBookListItemView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B68FF2EC2E0837610010853B /* ComicBookListItemView.swift */; };
B6A363ED2E456E5600E9D270 /* PageNavigationView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6A363EC2E456E5600E9D270 /* PageNavigationView.swift */; };
B6AEB7952E1024FC003FB705 /* AppDestination.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6AEB7942E1024FC003FB705 /* AppDestination.swift */; };
B6AEB7972E102901003FB705 /* SettingsView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6AEB7962E102901003FB705 /* SettingsView.swift */; };
B6B20B942DE5048E008598A7 /* KMPObservableViewModel.swift in Sources */ = {isa = PBXBuildFile; fileRef = B6B20B932DE5048E008598A7 /* KMPObservableViewModel.swift */; };
Expand Down Expand Up @@ -57,7 +57,6 @@
6AA5984B2DE72EF40078CC9F /* Fixtures.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Fixtures.swift; sourceTree = "<group>"; };
6AA5984F2DE73A8F0078CC9F /* EditServerView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = EditServerView.swift; sourceTree = "<group>"; };
6AF012922E1DDF67001A6A19 /* ReadingView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReadingView.swift; sourceTree = "<group>"; };
6AF012942E1E89A3001A6A19 /* ReadingPageView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ReadingPageView.swift; sourceTree = "<group>"; };
7555FF7B242A565900829871 /* Variant.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Variant.app; sourceTree = BUILT_PRODUCTS_DIR; };
7555FF82242A565900829871 /* HomeView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = HomeView.swift; sourceTree = "<group>"; };
7555FF8C242A565B00829871 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
Expand All @@ -69,6 +68,7 @@
B68FF2E82E0834980010853B /* ComicBooksView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ComicBooksView.swift; sourceTree = "<group>"; };
B68FF2EA2E0834EF0010853B /* ComicBookListView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ComicBookListView.swift; sourceTree = "<group>"; };
B68FF2EC2E0837610010853B /* ComicBookListItemView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ComicBookListItemView.swift; sourceTree = "<group>"; };
B6A363EC2E456E5600E9D270 /* PageNavigationView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = PageNavigationView.swift; sourceTree = "<group>"; };
B6AEB7942E1024FC003FB705 /* AppDestination.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDestination.swift; sourceTree = "<group>"; };
B6AEB7962E102901003FB705 /* SettingsView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SettingsView.swift; sourceTree = "<group>"; };
B6B20B932DE5048E008598A7 /* KMPObservableViewModel.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = KMPObservableViewModel.swift; sourceTree = "<group>"; };
Expand Down Expand Up @@ -108,7 +108,7 @@
isa = PBXGroup;
children = (
6AF012922E1DDF67001A6A19 /* ReadingView.swift */,
6AF012942E1E89A3001A6A19 /* ReadingPageView.swift */,
B6A363EC2E456E5600E9D270 /* PageNavigationView.swift */,
);
path = Reading;
sourceTree = "<group>";
Expand Down Expand Up @@ -322,6 +322,7 @@
B6B20B9E2DE50C0E008598A7 /* Koin.swift in Sources */,
B68FF2E92E0834980010853B /* ComicBooksView.swift in Sources */,
6A4D18062E14191D00FF9EA2 /* Constants.swift in Sources */,
B6A363ED2E456E5600E9D270 /* PageNavigationView.swift in Sources */,
B68922532DFDC29400BDC032 /* DirectoryItemView.swift in Sources */,
6AA598492DE72E910078CC9F /* ServerView.swift in Sources */,
B6AEB7972E102901003FB705 /* SettingsView.swift in Sources */,
Expand All @@ -330,7 +331,6 @@
B6B20B942DE5048E008598A7 /* KMPObservableViewModel.swift in Sources */,
B689224F2DFDA77C00BDC032 /* BrowseServerView.swift in Sources */,
B6AEB7952E1024FC003FB705 /* AppDestination.swift in Sources */,
6AF012952E1E89A3001A6A19 /* ReadingPageView.swift in Sources */,
B68FF2EB2E0834EF0010853B /* ComicBookListView.swift in Sources */,
);
runOnlyForDeploymentPostprocessing = 0;
Expand Down
Loading