Transcription navigation (#70)

* Rewinding video by transcript click * Fixed auto-scrolling of transcription when user scrolls list. Added auto-scroll transcription delay.
openedx · Oct 13, 2023 · 50a4952 · 50a4952
1 parent 095e76d
commit 50a4952
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 5 deletions.
diff --git a/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt b/course/src/main/java/org/openedx/course/presentation/ui/CourseUI.kt
@@ -44,6 +44,9 @@ import androidx.compose.material.rememberScaffoldState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableLongStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -61,6 +64,7 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
 import coil.request.ImageRequest
+import org.jsoup.Jsoup
 import org.openedx.core.BlockType
 import org.openedx.core.domain.model.Block
 import org.openedx.core.domain.model.BlockCounts
@@ -82,7 +86,7 @@ import org.openedx.core.ui.theme.appColors
 import org.openedx.core.ui.theme.appShapes
 import org.openedx.core.ui.theme.appTypography
 import org.openedx.course.R
-import org.jsoup.Jsoup
+import subtitleFile.Caption
 import subtitleFile.TimedTextObject
 import java.util.Date
 import org.openedx.course.R as courseR
@@ -515,11 +519,20 @@ fun VideoSubtitles(
     subtitleLanguage: String,
     showSubtitleLanguage: Boolean,
     currentIndex: Int,
+    onTranscriptClick: (Caption) -> Unit,
     onSettingsClick: () -> Unit
 ) {
     timedTextObject?.let {
+        val autoScrollDelay = 3000L
+        var lastScrollTime by remember {
+            mutableLongStateOf(0L)
+        }
+        if (listState.isScrollInProgress) {
+            lastScrollTime = Date().time
+        }
+
         LaunchedEffect(key1 = currentIndex) {
-            if (currentIndex > 1) {
+            if (currentIndex > 1 && lastScrollTime + autoScrollDelay < Date().time) {
                 listState.animateScrollToItem(currentIndex - 1)
             }
         }
@@ -551,8 +564,7 @@ fun VideoSubtitles(
                 }
                 Spacer(Modifier.height(24.dp))
                 LazyColumn(
-                    state = listState,
-                    userScrollEnabled = false
+                    state = listState
                 ) {
                     itemsIndexed(subtitles) { index, item ->
                         val textColor =
@@ -562,7 +574,11 @@ fun VideoSubtitles(
                                 MaterialTheme.appColors.textFieldBorder
                             }
                         Text(
-                            modifier = Modifier.fillMaxWidth(),
+                            modifier = Modifier
+                                .fillMaxWidth()
+                                .noRippleClickable {
+                                    onTranscriptClick(item)
+                                },
                             text = Jsoup.parse(item.content).text(),
                             color = textColor,
                             style = MaterialTheme.appTypography.bodyMedium

diff --git a/course/src/main/java/org/openedx/course/presentation/unit/video/VideoUnitFragment.kt b/course/src/main/java/org/openedx/course/presentation/unit/video/VideoUnitFragment.kt
@@ -158,6 +158,12 @@ class VideoUnitFragment : Fragment(R.layout.fragment_video_unit) {
                     subtitleLanguage = LocaleUtils.getDisplayLanguage(viewModel.transcriptLanguage),
                     showSubtitleLanguage = viewModel.transcripts.size > 1,
                     currentIndex = currentIndex,
+                    onTranscriptClick = {
+                        exoPlayer?.apply {
+                            seekTo(it.start.mseconds.toLong())
+                            play()
+                        }
+                    },
                     onSettingsClick = {
                         exoPlayer?.pause()
                         val dialog = SelectBottomDialogFragment.newInstance(

diff --git a/course/src/main/java/org/openedx/course/presentation/unit/video/YoutubeVideoUnitFragment.kt b/course/src/main/java/org/openedx/course/presentation/unit/video/YoutubeVideoUnitFragment.kt
@@ -140,6 +140,12 @@ class YoutubeVideoUnitFragment : Fragment(R.layout.fragment_youtube_video_unit)
                     subtitleLanguage = LocaleUtils.getDisplayLanguage(viewModel.transcriptLanguage),
                     showSubtitleLanguage = viewModel.transcripts.size > 1,
                     currentIndex = currentIndex,
+                    onTranscriptClick = {
+                        _youTubePlayer?.apply {
+                            seekTo(it.start.mseconds / 1000f)
+                            play()
+                        }
+                    },
                     onSettingsClick = {
                         _youTubePlayer?.pause()
                         val dialog =