Skip to content

Commit

Permalink
Finalize spotlight implementation for portrait and landscape. Rename …
Browse files Browse the repository at this point in the history 
…ParticipantGrid to ParticipantLayout and add layout types
  • Loading branch information
@aleksandar-apostolov
aleksandar-apostolov committed Oct 26, 2023
1 parent 3cb764d commit 93c8bb1
Show file tree
Hide file tree
Showing 13 changed files with 405 additions and 126 deletions.
71 changes: 67 additions & 4 deletions stream-video-android-compose/api/stream-video-android-compose.api
View file
Original file line number Diff line number Diff line change
Expand Up @@ -824,8 +824,8 @@ public final class io/getstream/video/android/compose/ui/components/call/rendere
public final fun getLambda-4$stream_video_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/video/android/compose/ui/components/call/renderer/ComposableSingletons$ParticipantsGridKt {
public static final field INSTANCE Lio/getstream/video/android/compose/ui/components/call/renderer/ComposableSingletons$ParticipantsGridKt;
public final class io/getstream/video/android/compose/ui/components/call/renderer/ComposableSingletons$ParticipantsLayoutKt {
public static final field INSTANCE Lio/getstream/video/android/compose/ui/components/call/renderer/ComposableSingletons$ParticipantsLayoutKt;
public static field lambda-1 Lkotlin/jvm/functions/Function6;
public static field lambda-2 Lkotlin/jvm/functions/Function2;
public fun <init> ()V
Expand All @@ -849,19 +849,35 @@ public final class io/getstream/video/android/compose/ui/components/call/rendere
public final fun getLambda-1$stream_video_android_compose_release ()Lkotlin/jvm/functions/Function6;
}

public final class io/getstream/video/android/compose/ui/components/call/renderer/ComposableSingletons$ParticipantsSpotlightKt {
public static final field INSTANCE Lio/getstream/video/android/compose/ui/components/call/renderer/ComposableSingletons$ParticipantsSpotlightKt;
public static field lambda-1 Lkotlin/jvm/functions/Function6;
public fun <init> ()V
public final fun getLambda-1$stream_video_android_compose_release ()Lkotlin/jvm/functions/Function6;
}

public final class io/getstream/video/android/compose/ui/components/call/renderer/FloatingParticipantVideoKt {
public static final fun FloatingParticipantVideo-f0nP0aY (Landroidx/compose/foundation/layout/BoxScope;Landroidx/compose/ui/Modifier;Lio/getstream/video/android/core/Call;Lio/getstream/video/android/core/ParticipantState;JLandroidx/compose/ui/Alignment;Lio/getstream/video/android/compose/ui/components/call/renderer/VideoRendererStyle;Lkotlin/jvm/functions/Function3;Landroidx/compose/runtime/Composer;II)V
}

public final class io/getstream/video/android/compose/ui/components/call/renderer/LayoutType : java/lang/Enum {
public static final field DYNAMIC Lio/getstream/video/android/compose/ui/components/call/renderer/LayoutType;
public static final field GRID Lio/getstream/video/android/compose/ui/components/call/renderer/LayoutType;
public static final field SPOTLIGHT Lio/getstream/video/android/compose/ui/components/call/renderer/LayoutType;
public static fun getEntries ()Lkotlin/enums/EnumEntries;
public static fun valueOf (Ljava/lang/String;)Lio/getstream/video/android/compose/ui/components/call/renderer/LayoutType;
public static fun values ()[Lio/getstream/video/android/compose/ui/components/call/renderer/LayoutType;
}

public final class io/getstream/video/android/compose/ui/components/call/renderer/ParticipantVideoKt {
public static final fun ParticipantLabel (Landroidx/compose/foundation/layout/BoxScope;Lio/getstream/video/android/core/Call;Lio/getstream/video/android/core/ParticipantState;Landroidx/compose/ui/Alignment;Lkotlin/jvm/functions/Function3;Landroidx/compose/runtime/Composer;II)V
public static final fun ParticipantLabel (Landroidx/compose/foundation/layout/BoxScope;Ljava/lang/String;Landroidx/compose/ui/Alignment;ZZFLkotlin/jvm/functions/Function3;Landroidx/compose/runtime/Composer;II)V
public static final fun ParticipantVideo (Lio/getstream/video/android/core/Call;Lio/getstream/video/android/core/ParticipantState;Landroidx/compose/ui/Modifier;Lio/getstream/video/android/compose/ui/components/call/renderer/VideoRendererStyle;Lkotlin/jvm/functions/Function4;Lkotlin/jvm/functions/Function4;Lkotlin/jvm/functions/Function3;Lkotlin/jvm/functions/Function4;Landroidx/compose/runtime/Composer;II)V
public static final fun ParticipantVideoRenderer (Lio/getstream/video/android/core/Call;Lio/getstream/video/android/core/ParticipantState;Lkotlin/jvm/functions/Function3;Landroidx/compose/runtime/Composer;II)V
}

public final class io/getstream/video/android/compose/ui/components/call/renderer/ParticipantsGridKt {
public static final fun ParticipantsGrid (Lio/getstream/video/android/core/Call;Landroidx/compose/ui/Modifier;Lio/getstream/video/android/compose/ui/components/call/renderer/VideoRendererStyle;Lkotlin/jvm/functions/Function6;Landroidx/compose/runtime/Composer;II)V
public final class io/getstream/video/android/compose/ui/components/call/renderer/ParticipantsLayoutKt {
public static final fun ParticipantsLayout (Lio/getstream/video/android/core/Call;Landroidx/compose/ui/Modifier;Lio/getstream/video/android/compose/ui/components/call/renderer/VideoRendererStyle;Lio/getstream/video/android/compose/ui/components/call/renderer/LayoutType;Lkotlin/jvm/functions/Function6;Landroidx/compose/runtime/Composer;II)V
}

public final class io/getstream/video/android/compose/ui/components/call/renderer/ParticipantsRegularGridKt {
Expand All @@ -872,6 +888,10 @@ public final class io/getstream/video/android/compose/ui/components/call/rendere
public static final fun ParticipantsScreenSharing (Lio/getstream/video/android/core/Call;Lio/getstream/video/android/core/model/ScreenSharingSession;Landroidx/compose/ui/Modifier;ZLio/getstream/video/android/compose/ui/components/call/renderer/VideoRendererStyle;Lkotlin/jvm/functions/Function6;Landroidx/compose/runtime/Composer;II)V
}

public final class io/getstream/video/android/compose/ui/components/call/renderer/ParticipantsSpotlightKt {
public static final fun ParticipantsSpotlight (Lio/getstream/video/android/core/Call;Landroidx/compose/ui/Modifier;ZLio/getstream/video/android/compose/ui/components/call/renderer/VideoRendererStyle;Lkotlin/jvm/functions/Function6;Landroidx/compose/runtime/Composer;II)V
}

public final class io/getstream/video/android/compose/ui/components/call/renderer/RegularVideoRendererStyle : io/getstream/video/android/compose/ui/components/call/renderer/VideoRendererStyle {
public static final field $stable I
public fun <init> ()V
Expand Down Expand Up @@ -928,6 +948,34 @@ public final class io/getstream/video/android/compose/ui/components/call/rendere
public fun toString ()Ljava/lang/String;
}

public final class io/getstream/video/android/compose/ui/components/call/renderer/SpotlightVideoRendererStyle : io/getstream/video/android/compose/ui/components/call/renderer/VideoRendererStyle {
public static final field $stable I
public fun <init> ()V
public fun <init> (ZZZZZLandroidx/compose/ui/Alignment;ILandroidx/compose/ui/Alignment;)V
public synthetic fun <init> (ZZZZZLandroidx/compose/ui/Alignment;ILandroidx/compose/ui/Alignment;ILkotlin/jvm/internal/DefaultConstructorMarker;)V
public final fun component1 ()Z
public final fun component2 ()Z
public final fun component3 ()Z
public final fun component4 ()Z
public final fun component5 ()Z
public final fun component6 ()Landroidx/compose/ui/Alignment;
public final fun component7 ()I
public final fun component8 ()Landroidx/compose/ui/Alignment;
public final fun copy (ZZZZZLandroidx/compose/ui/Alignment;ILandroidx/compose/ui/Alignment;)Lio/getstream/video/android/compose/ui/components/call/renderer/SpotlightVideoRendererStyle;
public static synthetic fun copy$default (Lio/getstream/video/android/compose/ui/components/call/renderer/SpotlightVideoRendererStyle;ZZZZZLandroidx/compose/ui/Alignment;ILandroidx/compose/ui/Alignment;ILjava/lang/Object;)Lio/getstream/video/android/compose/ui/components/call/renderer/SpotlightVideoRendererStyle;
public fun equals (Ljava/lang/Object;)Z
public fun getLabelPosition ()Landroidx/compose/ui/Alignment;
public fun getReactionDuration ()I
public fun getReactionPosition ()Landroidx/compose/ui/Alignment;
public fun hashCode ()I
public fun isFocused ()Z
public fun isScreenSharing ()Z
public fun isShowingConnectionQualityIndicator ()Z
public fun isShowingParticipantLabel ()Z
public fun isShowingReactions ()Z
public fun toString ()Ljava/lang/String;
}

public abstract class io/getstream/video/android/compose/ui/components/call/renderer/VideoRendererStyle {
public static final field $stable I
public synthetic fun <init> (ZZZZZLandroidx/compose/ui/Alignment;ILandroidx/compose/ui/Alignment;Lkotlin/jvm/internal/DefaultConstructorMarker;)V
Expand Down Expand Up @@ -1039,6 +1087,21 @@ public final class io/getstream/video/android/compose/ui/components/call/rendere
public final fun getLambda-8$stream_video_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/video/android/compose/ui/components/call/renderer/internal/ComposableSingletons$SpotlightVideorendererKt {
public static final field INSTANCE Lio/getstream/video/android/compose/ui/components/call/renderer/internal/ComposableSingletons$SpotlightVideorendererKt;
public static field lambda-1 Lkotlin/jvm/functions/Function6;
public static field lambda-2 Lkotlin/jvm/functions/Function2;
public static field lambda-3 Lkotlin/jvm/functions/Function2;
public static field lambda-4 Lkotlin/jvm/functions/Function2;
public static field lambda-5 Lkotlin/jvm/functions/Function2;
public fun <init> ()V
public final fun getLambda-1$stream_video_android_compose_release ()Lkotlin/jvm/functions/Function6;
public final fun getLambda-2$stream_video_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-3$stream_video_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-4$stream_video_android_compose_release ()Lkotlin/jvm/functions/Function2;
public final fun getLambda-5$stream_video_android_compose_release ()Lkotlin/jvm/functions/Function2;
}

public final class io/getstream/video/android/compose/ui/components/call/renderer/internal/ScreenShareVideoRendererKt {
public static final fun ScreenShareVideoRenderer (Lio/getstream/video/android/core/Call;Lio/getstream/video/android/core/model/ScreenSharingSession;Landroidx/compose/ui/Modifier;Landroidx/compose/ui/Alignment;ZZLandroidx/compose/runtime/Composer;II)V
}
Expand Down
4 changes: 2 additions & 2 deletions ...in/kotlin/io/getstream/video/android/compose/ui/components/call/activecall/CallContent.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ import io.getstream.video.android.compose.ui.components.call.controls.ControlAct
import io.getstream.video.android.compose.ui.components.call.controls.actions.DefaultOnCallActionHandler
import io.getstream.video.android.compose.ui.components.call.diagnostics.CallDiagnosticsContent
import io.getstream.video.android.compose.ui.components.call.renderer.ParticipantVideo
import io.getstream.video.android.compose.ui.components.call.renderer.ParticipantsGrid
import io.getstream.video.android.compose.ui.components.call.renderer.ParticipantsLayout
import io.getstream.video.android.compose.ui.components.call.renderer.RegularVideoRendererStyle
import io.getstream.video.android.compose.ui.components.call.renderer.VideoRendererStyle
import io.getstream.video.android.compose.ui.components.video.VideoRenderer
Expand Down Expand Up @@ -118,7 +118,7 @@ public fun CallContent(
)
},
videoContent: @Composable RowScope.(call: Call) -> Unit = {
ParticipantsGrid(
ParticipantsLayout(
call = call,
modifier = Modifier
.fillMaxSize()
Expand Down
74 changes: 48 additions & 26 deletions ...ponents/call/renderer/ParticipantsGrid.kt → ...nents/call/renderer/ParticipantsLayout.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,11 @@ package io.getstream.video.android.compose.ui.components.call.renderer

import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.platform.LocalInspectionMode
import androidx.compose.ui.tooling.preview.Preview
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import io.getstream.video.android.compose.theme.VideoTheme
Expand All @@ -29,6 +31,17 @@ import io.getstream.video.android.core.ParticipantState
import io.getstream.video.android.mock.StreamMockUtils
import io.getstream.video.android.mock.mockCall

public enum class LayoutType {
/** Automatically choose between Grid and Spotlight based on pinned participants and dominant speaker. */
DYNAMIC,

/** Force a spotlight view, showing the dominant speaker or the first speaker in the list. */
SPOTLIGHT,

/** Always show a grid layout, regardless of pinned participants. */
GRID,
}

/**
* Renders all the participants, based on the number of people in a call and the call state.
* Also takes into account if there are any screen sharing sessions active and adjusts the UI
Expand All @@ -37,13 +50,15 @@ import io.getstream.video.android.mock.mockCall
* @param call The call that contains all the participants state and tracks.
* @param modifier Modifier for styling.
* @param style Defined properties for styling a single video call track.
* @param layoutType The type of layout. [LayoutType], default - [LayoutType.DYNAMIC]
* @param videoRenderer A single video renderer renders each individual participant.
*/
@Composable
public fun ParticipantsGrid(
public fun ParticipantsLayout(
call: Call,
modifier: Modifier = Modifier,
style: VideoRendererStyle = RegularVideoRendererStyle(),
layoutType: LayoutType = LayoutType.DYNAMIC,
videoRenderer: @Composable (
modifier: Modifier,
call: Call,
Expand All @@ -58,32 +73,38 @@ public fun ParticipantsGrid(
)
},
) {
if (LocalInspectionMode.current) {
ParticipantsRegularGrid(
call = call,
modifier = modifier,
)
return
}

val screenSharingSession = call.state.screenSharingSession.collectAsStateWithLifecycle()
val screenSharing = screenSharingSession.value
val spotlight = true // call.state.pinnedParticipants.collectAsStateWithLifecycle()
val pinnedParticipants by call.state.pinnedParticipants.collectAsStateWithLifecycle()
val showSpotlight by remember(pinnedParticipants) {
derivedStateOf {
when (layoutType) {
LayoutType.GRID -> false
LayoutType.SPOTLIGHT -> true
else -> pinnedParticipants.isNotEmpty()
}
}
}

if (spotlight) {
ParticipantsSpotlight(
call = call,
modifier = modifier,
style = style,
videoRenderer = videoRenderer,
)
} else if (screenSharing == null || screenSharing.participant.isLocal) {
ParticipantsRegularGrid(
call = call,
modifier = modifier,
style = style,
videoRenderer = videoRenderer,
)
if (screenSharing == null || screenSharing.participant.isLocal) {
if (showSpotlight) {
ParticipantsSpotlight(
call = call,
modifier = modifier,
style = SpotlightVideoRendererStyle().copy(
isFocused = style.isFocused,
isShowingReactions = style.isShowingReactions,
labelPosition = style.labelPosition,
),
)
} else {
ParticipantsRegularGrid(
call = call,
modifier = modifier,
style = style,
videoRenderer = videoRenderer,
)
}
} else {
ParticipantsScreenSharing(
call = call,
Expand All @@ -104,9 +125,10 @@ public fun ParticipantsGrid(
private fun CallVideoRendererPreview() {
StreamMockUtils.initializeStreamVideo(LocalContext.current)
VideoTheme {
ParticipantsGrid(
ParticipantsLayout(
call = mockCall,
modifier = Modifier.fillMaxWidth(),
layoutType = LayoutType.GRID,
)
}
}
7 changes: 1 addition & 6 deletions ...io/getstream/video/android/compose/ui/components/call/renderer/ParticipantsRegularGrid.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ package io.getstream.video.android.compose.ui.components.call.renderer
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
Expand Down Expand Up @@ -67,11 +66,7 @@ public fun ParticipantsRegularGrid(
) {
var parentSize: IntSize by remember { mutableStateOf(IntSize(0, 0)) }

Box(
modifier = modifier
.background(color = VideoTheme.colors.appBackground)
.padding(VideoTheme.dimens.participantsGridPadding),
) {
Box(modifier = modifier.background(color = VideoTheme.colors.appBackground)) {
val roomParticipants by call.state.participants.collectAsStateWithLifecycle()

if (roomParticipants.isNotEmpty()) {
Expand Down
6 changes: 1 addition & 5 deletions ...n/io/getstream/video/android/compose/ui/components/call/renderer/ParticipantsSpotlight.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,15 +18,13 @@ package io.getstream.video.android.compose.ui.components.call.renderer

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.derivedStateOf
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalConfiguration
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import io.getstream.video.android.compose.theme.VideoTheme
import io.getstream.video.android.compose.ui.components.call.renderer.internal.SpotlightVideoRenderer
import io.getstream.video.android.core.Call
import io.getstream.video.android.core.ParticipantState
Expand Down Expand Up @@ -75,9 +73,7 @@ public fun ParticipantsSpotlight(
}

Box(
modifier = modifier
.fillMaxSize()
.padding(VideoTheme.dimens.participantsGridPadding),
modifier = modifier.fillMaxSize(),
) {
// Either the dominant speaker, or the first participant in the spotlight
SpotlightVideoRenderer(
Expand Down
8 changes: 4 additions & 4 deletions ...tlin/io/getstream/video/android/compose/ui/components/call/renderer/VideoRendererStyle.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ public data class ScreenSharingVideoRendererStyle(
override val isShowingConnectionQualityIndicator: Boolean = false,
override val labelPosition: Alignment = Alignment.BottomStart,
override val reactionDuration: Int = 1000,
override val reactionPosition: Alignment = Alignment.Center,
override val reactionPosition: Alignment = Alignment.TopEnd,

) : VideoRendererStyle(
isFocused,
Expand Down Expand Up @@ -173,13 +173,13 @@ public data class ScreenSharingVideoRendererStyle(
@Stable
public data class SpotlightVideoRendererStyle(
override val isFocused: Boolean = false,
override val isScreenSharing: Boolean = true,
override val isScreenSharing: Boolean = false,
override val isShowingReactions: Boolean = true,
override val isShowingParticipantLabel: Boolean = true,
override val isShowingConnectionQualityIndicator: Boolean = false,
override val isShowingConnectionQualityIndicator: Boolean = true,
override val labelPosition: Alignment = Alignment.BottomStart,
override val reactionDuration: Int = 1000,
override val reactionPosition: Alignment = Alignment.Center,
override val reactionPosition: Alignment = Alignment.TopEnd,

) : VideoRendererStyle(
isFocused,
Expand Down
Loading

0 comments on commit 93c8bb1

Please sign in to comment.