Add head-tracked spatial delete confirmation dialog

Author: gdelataillade

Showcases/media_view/app/src/main/AndroidManifest.xml

@@ -64,6 +64,13 @@
       android:exported="true"
       android:launchMode="standard"
       android:theme="@style/Theme.MediaView"
+    />
+        <activity
+      android:name=".app.player.menu.minimized.SpatialDeleteConfirmationActivity"
+      android:allowEmbedded="true"
+      android:exported="true"
+      android:launchMode="standard"
+      android:theme="@style/Theme.MediaView"
     />
         <activity
       android:name=".app.gallery.menu.GalleryMenuActivity"

Showcases/media_view/app/src/main/assets/scenes/Composition.glxf

@@ -1 +1 @@
-{"nodes":[{"extras":{"meta_spatial":{"entity_id":"privacyPopup","components":{"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"keyString":"dimensions","type":"Vector2","value":[0.20000000298023224,0.20000000298023224]}},"com.meta.levinriegner.mediaview.LookAtHead":{"zOffset":{"keyString":"zOffset","type":"Float","value":0.7}},"com.meta.spatial.toolkit.Panel":{"panel":{"keyString":"panel","type":"String","value":"@integer/5"}}},"version":1}},"name":"privacyPopup"},{"extras":{"meta_spatial":{"entity_id":"galleryMenu","components":{"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"keyString":"dimensions","type":"Vector2","value":[0.5,0.10000000149011612]}},"com.meta.spatial.toolkit.Panel":{"panel":{"keyString":"panel","type":"String","value":"@integer/2"}}},"version":1}},"translation":[0,0.2977507710456848,0],"name":"galleryMenu"},{"extras":{"meta_spatial":{"entity_id":"mediaTypesFilter","components":{"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"keyString":"dimensions","type":"Vector2","value":[0.17499999701976776,0.49000000953674316]}},"com.meta.spatial.toolkit.Panel":{"panel":{"keyString":"panel","type":"String","value":"@integer/3"}}},"version":1}},"translation":[0.49000000953674316,0,0],"name":"mediaTypesFilter"},{"extras":{"meta_spatial":{"entity_id":"whatsNew","components":{"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"keyString":"dimensions","type":"Vector2","value":[0.8999999761581421,0.44999998807907104]}},"com.meta.spatial.toolkit.Panel":{"panel":{"keyString":"panel","type":"String","value":"@integer/7"}}},"version":1}},"translation":[0,-0.004070401191711426,0],"name":"whatsNew"},{"extras":{"meta_spatial":{"entity_id":"onboarding","components":{"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"keyString":"dimensions","type":"Vector2","value":[0.8999999761581421,0.44999998807907104]}},"com.meta.spatial.toolkit.Panel":{"panel":{"keyString":"panel","type":"String","value":"@integer/6"}}},"version":1}},"name":"onboarding"},{"extras":{"meta_spatial":{"entity_id":"gallery","components":{"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.Grabbable":{"type":{"keyString":"type","alias":"FACE","type":"GrabbableType","value":0},"maxHeight":{"keyString":"maxHeight","type":"Float","value":3.4028234663852886E38},"minHeight":{"keyString":"minHeight","type":"Float","value":-3.4028234663852886E38},"enabled":{"keyString":"enabled","type":"Boolean","value":true}},"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"keyString":"dimensions","type":"Vector2","value":[0.7799999713897705,0.49000000953674316]}},"com.meta.levinriegner.mediaview.LookAtHead":{"zOffset":{"keyString":"zOffset","type":"Float","value":1.1},"once":{"keyString":"once","type":"Boolean","value":true}},"com.meta.spatial.toolkit.Panel":{"panel":{"keyString":"panel","type":"String","value":"@integer/1"}}},"version":1}},"children":[4,3,2,1],"name":"gallery"}],"scenes":[{"nodes":[5,0]}],"scene":0,"asset":{"minVersion":"2.0","version":"2.0"}}
+{"nodes":[{"name":"privacyPopup","extras":{"meta_spatial":{"components":{"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"value":[0.20000000298023224,0.20000000298023224],"type":"Vector2","keyString":"dimensions"}},"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.Panel":{"panel":{"value":"@integer/5","type":"String","keyString":"panel"}},"com.meta.levinriegner.mediaview.LookAtHead":{"hasLooked":{"value":false,"type":"Boolean","keyString":"hasLooked"},"once":{"value":false,"type":"Boolean","keyString":"once"},"zOffset":{"value":0.7,"type":"Float","keyString":"zOffset"}}},"version":1}}},{"name":"whatsNew","translation":[0,-0.004070401191711426,0],"extras":{"meta_spatial":{"components":{"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"value":[0.8999999761581421,0.44999998807907104],"type":"Vector2","keyString":"dimensions"}},"com.meta.spatial.toolkit.Panel":{"panel":{"value":"@integer/7","type":"String","keyString":"panel"}}},"version":1}}},{"name":"mediaTypesFilter","translation":[0.49000000953674316,0,0],"extras":{"meta_spatial":{"components":{"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"value":[0.17499999701976776,0.49000000953674316],"type":"Vector2","keyString":"dimensions"}},"com.meta.spatial.toolkit.Panel":{"panel":{"value":"@integer/3","type":"String","keyString":"panel"}}},"version":1}}},{"name":"onboarding","extras":{"meta_spatial":{"components":{"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"value":[0.8999999761581421,0.44999998807907104],"type":"Vector2","keyString":"dimensions"}},"com.meta.spatial.toolkit.Panel":{"panel":{"value":"@integer/6","type":"String","keyString":"panel"}}},"version":1}}},{"name":"galleryMenu","translation":[0,0.2977507710456848,0],"extras":{"meta_spatial":{"components":{"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"value":[0.5,0.10000000149011612],"type":"Vector2","keyString":"dimensions"}},"com.meta.spatial.toolkit.Panel":{"panel":{"value":"@integer/2","type":"String","keyString":"panel"}}},"version":1}}},{"name":"spatialDeleteConfirmation","extras":{"meta_spatial":{"components":{"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"value":[0.4000000059604645,0.30000001192092896],"type":"Vector2","keyString":"dimensions"}},"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.Panel":{"panel":{"value":"@integer/8","type":"String","keyString":"panel"}},"com.meta.levinriegner.mediaview.LookAtHead":{"hasLooked":{"value":false,"type":"Boolean","keyString":"hasLooked"},"once":{"value":false,"type":"Boolean","keyString":"once"},"zOffset":{"value":0.7,"type":"Float","keyString":"zOffset"}}},"version":1}}},{"name":"gallery","children":[3,1,2,4],"extras":{"meta_spatial":{"components":{"com.meta.spatial.toolkit.PanelDimensions":{"dimensions":{"value":[0.7799999713897705,0.49000000953674316],"type":"Vector2","keyString":"dimensions"}},"com.meta.spatial.toolkit.Grabbable":{},"com.meta.spatial.toolkit.Visible":{"isVisible":{"value":false,"type":"Boolean","keyString":"isVisible"}},"com.meta.spatial.toolkit.Panel":{"panel":{"value":"@integer/1","type":"String","keyString":"panel"}},"com.meta.levinriegner.mediaview.LookAtHead":{"hasLooked":{"value":false,"type":"Boolean","keyString":"hasLooked"},"once":{"value":true,"type":"Boolean","keyString":"once"},"zOffset":{"value":1.1,"type":"Float","keyString":"zOffset"}}},"version":1}}}],"scenes":[{"name":"","nodes":[5,0]}],"scene":0,"asset":{"experience":false,"copyright":"","version":"2.0","generator":"","minVersion":"2.0"}}

Showcases/media_view/app/src/main/java/com/meta/levinriegner/mediaview/app/events/AppEvent.kt

@@ -24,6 +24,8 @@ sealed class MediaPlayerEvent : AppEvent() {
   data class Deleted(val mediaId: Long) : MediaPlayerEvent()
 
   data object CloseAll : MediaPlayerEvent()
+
+  data class ShowDeleteConfirmation(val mediaModel: com.meta.levinriegner.mediaview.data.gallery.model.MediaModel) : MediaPlayerEvent()
 }
 
 sealed class NavigationEvent : AppEvent() {

Showcases/media_view/app/src/main/java/com/meta/levinriegner/mediaview/app/gallery/menu/GalleryMenuViewModel.kt

@@ -20,5 +20,6 @@ constructor(
   fun closeAll() {
     eventBus.post(MediaPlayerEvent.CloseAll)
     panelDelegate.closeAllMedia()
+    panelDelegate.hideSpatialDeleteConfirmation()
   }
 }

Showcases/media_view/app/src/main/java/com/meta/levinriegner/mediaview/app/immersive/GLXFConstants.kt

@@ -14,4 +14,5 @@ object GLXFConstants {
   const val NODE_NAME_GALLERY_MENU = "galleryMenu"
   const val NODE_NAME_ONBOARDING = "onboarding"
   const val NODE_NAME_WHATS_NEW = "whatsNew"
+  const val NODE_NAME_SPATIAL_DELETE_CONFIRMATION = "spatialDeleteConfirmation"
 }

Showcases/media_view/app/src/main/java/com/meta/levinriegner/mediaview/app/immersive/ImmersiveActivity.kt

@@ -11,6 +11,7 @@ import com.meta.levinriegner.mediaview.app.immersive.entity.EnvironmentEntities
 import com.meta.levinriegner.mediaview.app.immersive.entity.PanelTransformations
 import com.meta.levinriegner.mediaview.app.immersive.system.LookAtHeadSystem
 import com.meta.levinriegner.mediaview.app.panel.PanelDelegate
+import com.meta.levinriegner.mediaview.app.events.EventBus
 import com.meta.levinriegner.mediaview.data.gallery.model.MediaModel
 import com.meta.spatial.core.Entity
 import com.meta.spatial.core.SpatialFeature
@@ -24,21 +25,24 @@ import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.asStateFlow
 import kotlinx.coroutines.launch
 import timber.log.Timber
+import dagger.hilt.EntryPoint
+import dagger.hilt.EntryPoints
+import dagger.hilt.InstallIn
+import dagger.hilt.components.SingletonComponent
 
 class ImmersiveActivity : ComponentAppSystemActivity(), PanelDelegate {
 
+  @EntryPoint
+  @InstallIn(SingletonComponent::class)
+  interface EventBusEntryPoint {
+    fun provideEventBus(): EventBus
+  }
+
   companion object {
     const val MAX_OPEN_MEDIA = 3
   }
 
-  // Dependencies
-  private val panelManager: PanelManager by lazy {
-    PanelManager(
-        PanelTransformations(EnvironmentEntities(), systemManager),
-        scene,
-        spatialContext,
-    )
-  }
+  private lateinit var panelManager: PanelManager
 
   // State
   private var _openMedia =
@@ -57,11 +61,29 @@ class ImmersiveActivity : ComponentAppSystemActivity(), PanelDelegate {
   }
 
   override fun registerPanels(): List<PanelRegistration> {
+    // Initialize panelManager if not already initialized
+    if (!::panelManager.isInitialized) {
+      initializePanelManager()
+    }
     return panelManager.providePanelRegistrations()
   }
 
+  private fun initializePanelManager() {
+    // Get EventBus through EntryPoint using application context
+    val eventBus = EntryPoints.get(applicationContext, EventBusEntryPoint::class.java).provideEventBus()
+    
+    // Initialize panelManager
+    panelManager = PanelManager(
+        PanelTransformations(EnvironmentEntities(), systemManager),
+        scene,
+        spatialContext,
+        eventBus,
+    )
+  }
+
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
+    
     // Disable Locomotion
     systemManager.unregisterSystem<LocomotionSystem>()
     // Register elements
@@ -195,6 +217,16 @@ class ImmersiveActivity : ComponentAppSystemActivity(), PanelDelegate {
     Timber.i("Toggling Whats New. Show: $show")
     panelManager.toggleWhatsNew(show)
   }
+
+  override fun showSpatialDeleteConfirmation(mediaModel: MediaModel) {
+    Timber.i("Showing spatial delete confirmation for media: ${mediaModel.id}")
+    panelManager.showSpatialDeleteConfirmation(mediaModel)
+  }
+
+  override fun hideSpatialDeleteConfirmation() {
+    Timber.i("Hiding spatial delete confirmation")
+    panelManager.hideSpatialDeleteConfirmation()
+  }
   // endregion
 
 }

Showcases/media_view/app/src/main/java/com/meta/levinriegner/mediaview/app/immersive/PanelManager.kt

@@ -2,7 +2,6 @@
 
 package com.meta.levinriegner.mediaview.app.immersive
 
-import android.content.Intent
 import android.os.Handler
 import android.os.Looper
 import com.meta.levinriegner.mediaview.BuildConfig
@@ -17,6 +16,7 @@ import com.meta.levinriegner.mediaview.app.onboarding.OnboardingActivity
 import com.meta.levinriegner.mediaview.app.player.PlayerActivity
 import com.meta.levinriegner.mediaview.app.player.menu.immersive.ImmersiveMenuActivity
 import com.meta.levinriegner.mediaview.app.player.menu.minimized.MinimizedMenuActivity
+import com.meta.levinriegner.mediaview.app.player.menu.minimized.SpatialDeleteConfirmationActivity
 import com.meta.levinriegner.mediaview.app.privacy.PrivacyPolicyActivity
 import com.meta.levinriegner.mediaview.app.shared.model.maximizedBottomCenterPanelVector3
 import com.meta.levinriegner.mediaview.app.shared.model.maximizedPanelConfigOptions
@@ -54,12 +54,16 @@ import com.meta.spatial.toolkit.Transform
 import com.meta.spatial.toolkit.TransformParent
 import com.meta.spatial.toolkit.Visible
 import com.meta.spatial.toolkit.createPanelEntity
+import android.content.Intent
+import com.meta.levinriegner.mediaview.app.events.EventBus
+import com.meta.levinriegner.mediaview.app.events.MediaPlayerEvent
 import timber.log.Timber
 
 class PanelManager(
     private val panelTransformations: PanelTransformations,
     private val scene: Scene,
     private val spatialContext: SpatialContext,
+    private val eventBus: com.meta.levinriegner.mediaview.app.events.EventBus,
 ) {
   private val zIndexMenu = 99
 
@@ -85,6 +89,9 @@ class PanelManager(
             PanelCreator(PanelRegistrationIds.PRIVACY_POLICY) { ent ->
               createPrivacyPolicyPanel(ent)
             },
+            PanelCreator(PanelRegistrationIds.SPATIAL_DELETE_CONFIRMATION) { ent ->
+              createSpatialDeleteConfirmationPanel(ent)
+            },
         )
 
     panelRegistrations.forEach { panelRegistration ->
@@ -250,6 +257,17 @@ class PanelManager(
     return PanelSceneObject(scene, spatialContext, PrivacyPolicyActivity::class.java, ent, config)
   }
 
+  private fun createSpatialDeleteConfirmationPanel(ent: Entity): PanelSceneObject {
+    val config =
+        PanelConfigOptions(
+            enableLayer = true,
+            enableTransparent = false,
+            includeGlass = false,
+        )
+
+    return PanelSceneObject(scene, spatialContext, SpatialDeleteConfirmationActivity::class.java, ent, config)
+  }
+
   private fun createPlayerPanel(ent: Entity, mediaModel: MediaModel): PanelSceneObject {
     val config = mediaModel.minimizedPanelConfigOptions()
 
@@ -631,6 +649,29 @@ class PanelManager(
     panel.entity.setComponent(Transform(Pose(Vector3(-0.09f, 0f, -0.04f), Quaternion(0f, 0f, 0f))))
   }
 
+  fun showSpatialDeleteConfirmation(mediaModel: MediaModel) {
+    val panel = getComposition().tryGetNodeByName(GLXFConstants.NODE_NAME_SPATIAL_DELETE_CONFIRMATION)
+    if (panel?.entity == null) {
+      return
+    }
+
+    // Position the dialog in front of the user's head with LookAtHead component
+    panel.entity.setComponent(com.meta.levinriegner.mediaview.LookAtHead(zOffset = 0.7f, once = false))
+    panel.entity.setComponent(Visible(true))
+
+    // Post event to pass MediaModel to the static panel
+    eventBus.post(MediaPlayerEvent.ShowDeleteConfirmation(mediaModel))
+  }
+
+  fun hideSpatialDeleteConfirmation() {
+    val panel = getComposition().tryGetNodeByName(GLXFConstants.NODE_NAME_SPATIAL_DELETE_CONFIRMATION)
+    if (panel?.entity == null) {
+      return
+    }
+
+    panel.entity.setComponent(Visible(false))
+  }
+
   fun debugPrintNodes() {
     if (!BuildConfig.DEBUG) return
     Timber.i("Printing all nodes...")

Showcases/media_view/app/src/main/java/com/meta/levinriegner/mediaview/app/immersive/panel/PanelRegistrationIds.kt

@@ -10,6 +10,7 @@ object PanelRegistrationIds {
   const val PRIVACY_POLICY = 5
   const val ONBOARDING = 6
   const val WHATS_NEW = 7
+  const val SPATIAL_DELETE_CONFIRMATION = 8
 
   private const val MEDIA_PREFIX = "00"
   private const val MEDIA_POPUP_PREFIX = "11"

Showcases/media_view/app/src/main/java/com/meta/levinriegner/mediaview/app/panel/PanelDelegate.kt

@@ -26,4 +26,8 @@ interface PanelDelegate {
   fun toggleOnboarding(show: Boolean)
 
   fun toggleWhatsNew(show: Boolean)
+
+  fun showSpatialDeleteConfirmation(mediaModel: MediaModel)
+
+  fun hideSpatialDeleteConfirmation()
 }

Showcases/media_view/app/src/main/java/com/meta/levinriegner/mediaview/app/player/menu/minimized/MinimizedMenuActivity.kt

@@ -2,18 +2,25 @@
 
 package com.meta.levinriegner.mediaview.app.player.menu.minimized
 
+import android.content.Intent
 import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.activity.viewModels
 import com.meta.levinriegner.mediaview.app.shared.theme.MediaViewTheme
+import com.meta.levinriegner.mediaview.app.events.EventBus
+import com.meta.levinriegner.mediaview.app.events.MediaPlayerEvent
 import dagger.hilt.android.AndroidEntryPoint
+import javax.inject.Inject
 
 @AndroidEntryPoint
 class MinimizedMenuActivity : ComponentActivity() {
 
   private val viewModel by viewModels<MinimizedMenuViewModel>()
+  
+  @Inject
+  lateinit var eventBus: EventBus
 
   override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
@@ -31,8 +38,7 @@ class MinimizedMenuActivity : ComponentActivity() {
               finish()
             },
             onDelete = {
-              viewModel.delete()
-              finish()
+              viewModel.showSpatialDeleteConfirmation()
             },
         )
       }