Feature: Add minimized video service (YouTube-style PiP) #5423

aliIsazadeh · 2025-09-27T08:56:51Z

What’s Changed

Introduced a minimized video service, similar to YouTube’s PiP experience.
Allows users to keep watching videos while navigating the app.
Designed within Element X’s architecture constraints, since implementing it like Telegram/WhatsApp is not straightforward.
Ensures smooth transitions between fullscreen and minimized modes.

Why This Matters

Many modern messengers (e.g. Telegram, WhatsApp) already support minimized video.
Element X’s structure makes this challenging, but this approach provides a practical way to implement it while staying close to the app’s design principles.

Demo

video_2025-09-27_12-22-19.mp4

Closes #5421

Notes

This was really fun to implement, and I believe it can improve the user experience a lot. 🚀
Also — I’m open to remote Android opportunities. If anyone is interested in collaborating or has a project/position where I can contribute, feel free to reach out: [[email protected]]

- Adds a service to display a draggable video overlay outside the app, similar to YouTube or Telegram. - Basic controls included: play/pause, close, maximize. - Handles overlay permissions (SYSTEM_ALERT_WINDOW). - This is a draft implementation for feedback; UX and integration with in-app Compose features may need adjustments.

…video

CLAassistant · 2025-09-27T08:56:57Z

All committers have signed the CLA.

github-actions · 2025-09-27T08:56:58Z

Thank you for your contribution! Here are a few things to check in the PR to ensure it's reviewed as quickly as possible:

Your branch should be based on origin/develop, at least when it was created.
The title of the PR will be used for release notes, so it needs to describe the change visible to the user.
The test pass locally running ./gradlew test.
The code quality check suite pass locally running ./gradlew runQualityChecks.
If you modified anything related to the UI, including previews, you'll have to run the Record screenshots GH action in your forked repo: that will generate compatible new screenshots. However, given Github Actions limitations, it will prevent the CI from running temporarily, until you upload a new commit after that one. To do so, just pull the latest changes and push an empty commit.

bmarty

Awesome feature, thanks!
I have not tested the code yet, but here are a first set of comments.

bmarty · 2025-09-29T07:09:13Z

...impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/viewer/MediaViewerNode.kt

    @Composable
    override fun View(modifier: Modifier) {
+        val context = LocalContext.current
+        val (isMinimized, setMinimized) = remember { mutableStateOf(false) }


TIL we can assigned remembered mutable state like this. Handy!

bmarty · 2025-09-29T07:10:09Z

...impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/viewer/MediaViewerView.kt

+                ) {
+                    Icon(
+                        imageVector = Icons.Default.FullscreenExit,
+                        contentDescription = "Minimize"


Oh sorry, my comment seems a bit rude, it was not supposed to be sent but was a note for me to not forget. But I forgot to edit it.
I have create a new String CommonStrings.action_minimize with this value. It will be available on develop next time we sync the string (probably in the coming days, but for sure on next Monday).

😂 Nah I undrstanded what you mean you were talking about accessibility and hard coded string.

oh yes, and the comment should have been i18n of course!

i changed string to unknown and also i add a comment about it needs to be replaced with CommonStrings.action_minimize

bmarty · 2025-09-29T07:11:19Z

app/src/main/AndroidManifest.xml

        android:theme="@style/Theme.ElementX"
        tools:targetApi="33">
-
+        <service


This declaration should be located in the AndroidManifest of the module where FloatingVideoService is defined.

oh of course

and remove the declaration from here?

oh shoot sorry i forgot about that
yeah now i removed it

bmarty · 2025-09-29T07:11:36Z

app/src/main/AndroidManifest.xml

    <!-- To be able to install APK from the application -->
    <uses-permission android:name="android.permission.REQUEST_INSTALL_PACKAGES" />
-
+    <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />


This declaration should be located in the AndroidManifest of the module where FloatingVideoService is defined.

bmarty · 2025-09-29T07:23:23Z

libraries/mediaviewer/impl/src/main/res/drawable/ic_close.xml

+  <path
+      android:pathData="m256,760 l-56,-56 224,-224 -224,-224 56,-56 224,224 224,-224 56,56 -224,224 224,224 -56,56 -224,-224 -224,224Z"
+      android:fillColor="#e3e3e3"/>
+</vector>


You should not add new icons but use icons provided by Compound. For this one, it is io.element.android.compound.R.drawable.ic_compound_close.

cool
what about minimize and maximize icons it seems Compound dose not have them
i will use something else but i will comment in the code that it need to change

The available compound icons are visible here: https://github.com/element-hq/compound-android/blob/main/compound/screenshots/Compound%20Icons%20-%20Light.png. You may want to use expand and collapse for your use case?

bmarty · 2025-09-29T07:24:29Z

libraries/mediaviewer/impl/src/main/res/values/strings.xml

+  -->
+
+<resources>
+    <string name="video_playback_error">Video playback error</string>


We do not add string manually in the project. For now you can just remove it and use CommonStrings.error_unknown.

not removed?

now it's removed.

bmarty · 2025-09-29T07:26:21Z

...n/kotlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/FloatingVideoService.kt

+        })
+
+        container.addView(overlayContainer)
+        return container


It would be awesome to use Compose UI to design the View. It will simplify the code a lot (I think), and allow to have previews. Maybe https://gist.github.com/kishan-vadoliya/9fbd1e3c1590de1e4a1a830c5d4edb3f can inspire?

I will try that and then I will tell you what happend
thanks

Quick update on the floating video overlay refactor. I migrated it from XML/ViewBinding to Compose, but ran into an issue: Compose recompositions don’t work reliably in a Service context, even with proper lifecycle setup. State updates happen, but the UI doesn’t recompose.

Because of that, I switched to a hybrid approach: Compose is used for layout, but window size/aspect ratio updates are applied directly via WindowManager and callbacks instead of relying on recomposition.

Main changes:

Dynamic aspect ratio for portrait/landscape

Removed controller bar (state-driven updates weren’t working) → replaced with tap-to-play/pause gesture

Fixed window resizing when toggling minimized/maximized

Improved drag/tap gesture handling

So the overlay is Compose-based now, but with direct view updates for stable behavior in Service.
@bmarty

aliIsazadeh · 2025-09-30T07:35:32Z

such a cool checks

-changed minimize buttons text to error_unknown but it need new CommonString -moved service permission and registration from app manifest to mediaViewer manifest

-handling TYPE_PHONE deprivation

-remove extra string of video_playback_error

…video

-remove extra margin

…updates Replace ViewBinding-based floating video UI with Jetpack Compose implementation. Due to Compose recomposition limitations in Service context, implemented hybrid approach using direct view manipulation instead of state-driven UI updates. Key changes: - Migrated floating video overlay from XML layouts to Compose - Implemented dynamic aspect ratio handling for portrait/landscape videos - Added direct WindowManager updates for window resizing instead of relying on recomposition - Removed video controller bar (play/pause, seek bar) as Compose state changes don't trigger recomposition in Service lifecycle - Added tap-to-play/pause gesture as alternative to controller bar - Fixed window sizing issues when toggling between maximized and minimized states - Improved drag gesture handling to prevent conflicts with tap gestures Technical notes: - Compose recomposition does not work reliably in Service context even with proper lifecycle owners set up - State changes (mutableStateOf, mutableFloatStateOf) update values but don't trigger UI recomposition - LaunchedEffect blocks can observe state changes but composable body doesn't recompose - Solution: Use state to track values, but update UI elements (WindowManager, Android Views) directly via callbacks and references instead of relying on Compose recomposition - This hybrid approach allows using Compose for layout while maintaining reliable UI updates in Service environment

bmarty

Thanks for the update and the migration to Compose!
I have added more remarks.

I have also tested the feature and it seems to work pretty well. I would maybe add some padding, here the minimized video was displayed at the bottom start of the screen. Also maybe having a way to Play/Pause the video on the minimize video would be awesome. Last point, the View should maybe automatically close at the end of the Playback?

bmarty · 2025-10-06T15:13:07Z

.idea/codeStyles/Project.xml

+          <emptyLine />
+        </value>
+      </option>
+    </JavaCodeStyleSettings>


You must revert this change.
I have the same change locally, this is a pain, I have not find a way to get ride of it. The problem is that other developers do not have it so we cannot touch this file on each PR...

oh sure i put this file in gitignore from now on.

bmarty · 2025-10-06T15:14:17Z

gradle.properties

+org.gradle.java.home=/usr/lib/jvm/java-17-openjdk-amd64
+org.gradle.jvmargs=-Xmx4g -Dfile.encoding=UTF-8
+kotlin.compiler.execution.strategy=in-process
+kotlin.daemon.jvm.options=-Xmx2g


Please revert all the changes in this file. You can place your local configuration in the file local.properties instead, which is ignore by VCS.

My apologies — I’m not sure when these changes were made and committed. It wasn’t intentional.

bmarty · 2025-10-06T15:16:13Z

...n/kotlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/FloatingVideoService.kt

+import java.io.File
+import androidx.core.net.toUri
+
+class FloatingVideoService : Service(), LifecycleOwner, ViewModelStoreOwner, SavedStateRegistryOwner {


We try to avoid long file. Please split the code into multiple file. The UI can be extracted, it will force the code to be a bit more decoupled.

Also it will allow to add preview of the UI, for instance:

@PreviewsDayNight @Composable internal fun FloatingVideoOverlayPreview() = ElementPreview { FloatingVideoOverlay( // params ) }

The method getVideoUriFromMediaSource could be in a separate file too.

bmarty · 2025-10-06T15:16:38Z

...n/kotlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/FloatingVideoService.kt

+}
+
+@OptIn(UnstableApi::class)
+fun getVideoUriFromMediaSource(mediaSource: MediaSource): Uri {


It would be nicer to use an extension, which also allow to simplify the name:
fun MediaSource.getVideoUri(): Uri {
Using a block like with(url) {} could also simplify the code, but I am not a big fan of having several this in a block.

bmarty · 2025-10-06T15:16:47Z

...n/kotlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/FloatingVideoService.kt

+@OptIn(UnstableApi::class)
+fun getVideoUriFromMediaSource(mediaSource: MediaSource): Uri {
+    return try {
+        val url = mediaSource.url


then you can just remove this line.

bmarty · 2025-10-06T15:23:45Z

...n/kotlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/FloatingVideoService.kt

+fun getVideoUriFromMediaSource(mediaSource: MediaSource): Uri {
+    return try {
+        val url = mediaSource.url
+        Log.d("VideoPlayer", "MediaSource URL: $url")


We use Timber on this project, please do not use Log.

Timber.tag("VideoPlayer").d("MediaSource URL: $url")

Also logging the url should be avoided for privacy reason. The log can be sent by the user to our company, so we avoid logging private data (the url could contains sensitive information)

Done.
and you are right it was there for test.

bmarty · 2025-10-06T15:26:40Z

...n/kotlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/FloatingVideoService.kt

+                    .align(Alignment.TopCenter)
+                    .fillMaxWidth()
+                    .background(
+                        brush = androidx.compose.ui.graphics.Brush.verticalGradient(


please use import (there are several place to fix in this file)

bmarty · 2025-10-06T15:31:07Z

...n/kotlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/FloatingVideoService.kt

+        onClose: () -> Unit,
+        onToggleFullScreen: () -> Unit
+    ) {
+        var currentAspectRatio by remember { mutableStateOf(16f / 9f) }


Please use mutableFloatStateOf

bmarty · 2025-10-06T15:32:01Z

...n/kotlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/FloatingVideoService.kt

+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.IconButton


You must use io.element.android.libraries.designsystem.theme.components.IconButton instead.

bmarty · 2025-10-06T15:40:22Z

...n/kotlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/FloatingVideoService.kt

+import androidx.compose.material.IconButton
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material.icons.filled.Fullscreen


You should use CompoundIcon instead of Icon from material.

bmarty · 2025-10-06T16:07:34Z

...in/kotlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/VideoDataRepository.kt

+                INSTANCE ?: VideoDataRepository().also { INSTANCE = it }
+            }
+        }
+    }


We used DI on this project, so you should remove this companion and let the DI handle the singleton:

@Inject @SingleIn(AppScope::class) class VideoDataRepository {

Then startFloating could have a VideoDataRepository parameter and VideoDataRepository could be injected in FloatingVideoService. You can see how members are injected in the Activites for instance.

…or better readability and maintainability. - Replaced custom UI elements with components from io.element.android.libraries.designsystem.theme.components.

…video

- Disabled minimize action until video is ready to prevent crash - Fixed minimized video size issue after refactoring FloatingVideoService

…ject

…ject. -Created FloatingVideoServiceBindings (inject(service), videoDataRepository()). -Injected VideoDataRepository in FloatingVideoService, used bindings<...>().inject(this) in onCreate, and replaced singleton calls with DI.

…commonStrings

aliIsazadeh · 2025-10-17T15:01:20Z

for play and pause just tap on the video

bmarty

Thanks for the update. More comments!

bmarty · 2025-11-03T15:38:10Z

.../io/element/android/libraries/mediaviewer/impl/floatingvideo/util/VideoUriFromMediaSource.kt

+
+fun MediaSource.getVideoUriFromMediaSource () : Uri{
+    return try {
+        val url = this.url


This line can just be removed.

bmarty · 2025-11-03T15:38:37Z

.../io/element/android/libraries/mediaviewer/impl/floatingvideo/util/VideoUriFromMediaSource.kt

+import timber.log.Timber
+import java.io.File
+
+fun MediaSource.getVideoUriFromMediaSource () : Uri{


Rename to getUri? No need to repeat MediaSource as it's the receiver and also no need to precise Video, it can stay generic.

bmarty · 2025-11-03T15:40:18Z

.../io/element/android/libraries/mediaviewer/impl/floatingvideo/util/VideoUriFromMediaSource.kt

+            }
+            url.startsWith("/") -> {
+                // Local file path, convert to file URI
+                Uri.fromFile(File(url))


Maybe change to

Suggested change

Uri.fromFile(File(url))

File(url).toUri()

bmarty · 2025-11-03T15:57:52Z

...otlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/ui/FloatingVideoOverlay.kt

+    isMaximized : Boolean,
+    windowManager : WindowManager?,
+    windowLayoutParams : WindowManager.LayoutParams,
+    floatingView : View?,


Instead of providing windowManager and floatingView, isMaximized, I'll provide some lambda parameter and handle all the computation in FloatingVideoService.

At the end, the signature should be something like:

fun FloatingVideoOverlay( uri: Uri?, onClose: () -> Unit, onToggleFullScreen: () -> Unit, updateAspectRatio: (Float) -> Unit, movePosition: (Int, Int) -> Unit, modifier: Modifier = Modifier, )

bmarty · 2025-11-03T15:58:19Z

...otlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/ui/FloatingVideoOverlay.kt

+
+
+
+    var resolvedUri: Uri = Uri.EMPTY


This should be remembered

bmarty · 2025-11-03T16:22:23Z

...impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/viewer/MediaViewerNode.kt

-                audioFocus = audioFocus,
-                onBackClick = callback::onDone,
-            )
+            val data = state.listData


This need to be moved below

bmarty · 2025-11-03T16:23:19Z

...impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/viewer/MediaViewerNode.kt

-            )
+            val data = state.listData
+                .getOrNull(state.currentIndex) as? MediaViewerPageData.MediaViewerData
+            Box(modifier = modifier.fillMaxSize()) {


No need to add a Box here I think.

bmarty · 2025-11-03T16:26:08Z

.../io/element/android/libraries/mediaviewer/impl/floatingvideo/FloatingVideoServiceBindings.kt

+@ContributesTo(AppScope::class)
+interface FloatingVideoServiceBindings {
+    fun inject(service: FloatingVideoService)
+    fun videoDataRepository(): VideoDataRepository


This fun can be removed if you handle my other remarks.

bmarty · 2025-11-03T16:27:02Z

...n/kotlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/FloatingVideoService.kt

+    }
+
+    private var currentVideoId: String? = null
+    private var eventId: String? = null


Not used, remove?

bmarty · 2025-11-03T16:29:27Z

...n/kotlin/io/element/android/libraries/mediaviewer/impl/floatingvideo/FloatingVideoService.kt

+        windowLayoutParams.height = height
+        windowLayoutParams.flags = WindowManager.LayoutParams.FLAG_NOT_FOCUSABLE or
+            WindowManager.LayoutParams.FLAG_LAYOUT_NO_LIMITS
+        windowManager?.updateViewLayout(floatingView, windowLayoutParams)


This seems to be done twice (here and below), can you check?

aliIsazadeh · 2025-11-04T16:00:59Z

Thanks for the detailed review. I’ll apply these changes and I really appreciate the explanations.

aliIsazadeh added 4 commits September 27, 2025 00:38

Merge branch 'element-hq:develop' into minimized-video

a111b5e

fixed the bug of video being full size at first

16db3ab

Merge remote-tracking branch 'origin/minimized-video' into minimized-…

bbc5458

…video

aliIsazadeh requested a review from a team as a code owner September 27, 2025 08:56

aliIsazadeh requested review from jmartinesp and removed request for a team September 27, 2025 08:56

github-actions bot added the Z-Community-PR Issue is solved by a community member's PR label Sep 27, 2025

bmarty reviewed Sep 29, 2025

View reviewed changes

bmarty changed the title ~~Feature: Add minimized video service (YouTube-style PiP~~ Feature: Add minimized video service (YouTube-style PiP) Sep 29, 2025

Merge branch 'develop' into minimized-video

0f3fec9

aliIsazadeh added 10 commits September 30, 2025 13:18

-remove unused setMinimize

fe18ef7

-changed minimize buttons text to error_unknown but it need new CommonString -moved service permission and registration from app manifest to mediaViewer manifest

-removed added icons and string and using existing icons and strings

49a765d

-adjusting maximize button size

daf7461

-handling TYPE_PHONE deprivation

Merge branch 'element-hq:develop' into minimized-video

46d226b

-remove extra service declaration of service in app manifest

d07dc1e

-remove extra string of video_playback_error

Merge remote-tracking branch 'origin/minimized-video' into minimized-…

b99e67f

…video

-remove extra import

2f9f56d

-remove extra margin

-remove extra string file

7c13c1f

Merge branch 'develop' into minimized-video

a90c19a

aliIsazadeh requested a review from bmarty October 6, 2025 08:18

bmarty requested changes Oct 6, 2025

View reviewed changes

bmarty reviewed Oct 6, 2025

View reviewed changes

aliIsazadeh added 3 commits October 11, 2025 17:19

-revert changes in gradle.properties and project

6a3cb61

- Broke down large FloatingVideoService into multiple smaller files f…

f91d167

…or better readability and maintainability. - Replaced custom UI elements with components from io.element.android.libraries.designsystem.theme.components.

Merge remote-tracking branch 'origin/minimized-video' into minimized-…

1466e74

…video

aliIsazadeh added 5 commits October 13, 2025 17:01

fix(video): stabilize floating video behavior

b33720c

- Disabled minimize action until video is ready to prevent crash - Fixed minimized video size issue after refactoring FloatingVideoService

-on video completes the minimized video gose away

19defb1

-Toast for display over apps persmission(string needs to be added to …

2cf92d5

…commonStrings

Merge branch 'element-hq:develop' into minimized-video

44105d2

aliIsazadeh requested a review from bmarty October 17, 2025 15:04

Merge branch 'develop' into minimized-video

1978751

bmarty changed the base branch from develop to feature/bma/minimizeVideoPlayer November 3, 2025 08:39

bmarty requested changes Nov 3, 2025

View reviewed changes

Feature: Add minimized video service (YouTube-style PiP) #5423

Are you sure you want to change the base?

Feature: Add minimized video service (YouTube-style PiP) #5423

Conversation

aliIsazadeh commented Sep 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What’s Changed

Why This Matters

Demo

Closes #5421

Notes

Uh oh!

CLAassistant commented Sep 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Sep 27, 2025

Uh oh!

bmarty left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aliIsazadeh Oct 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aliIsazadeh commented Sep 30, 2025

Uh oh!

bmarty left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

aliIsazadeh Oct 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

aliIsazadeh commented Sep 27, 2025 •

edited

Loading

CLAassistant commented Sep 27, 2025 •

edited

Loading

aliIsazadeh Oct 4, 2025 •

edited

Loading

aliIsazadeh Oct 11, 2025 •

edited

Loading