\n \n \n Although this app and its predecessor appear similar, their implementation is a lot more different than it would seem. \n<\/p>\n \n Each app makes use of the Dual View<\/a> Companion Pane<\/a> pattern, as well as Exoplayer<\/a> for its video. How you implement Exoplayer into your app will make or break the experience. \n<\/p>\n \n Disclaimer: failing to follow these dos and don’ts may lead to the unfortunate passing of keyboards, mice, and even monitors as you throw your head wildly into objects out of frustration. You have been warned… \n<\/p>\n \n One of the most important parts of embedding Exoplayer into your application is to allow it to work alongside the Compose Lifecycle<\/a>, rather than the Activity Lifecyle<\/a> as you previously might have configured.\n<\/p>\n \n Because Exoplayer is embedded into a Composable as opposed to a View, attempting to follow the Activity Lifecycle rather than the Compose Lifecycle will result in adverse behaviors such as:\n<\/p>\n \n Yeah yeah, hindsight is 20 20. This is an obvious choice now, but one I did NOT make when I started this project. Which leads me to our dos and don’ts.\n<\/p>\n \n Because Activity lifecycles do not connect to their associated Composable lifecycles, when the Exoplayer that is embedded deep into a Composable recomposes, the callbacks that reset the Exoplayer will NOT be called and the Exoplayer will descend into the behaviors mentioned above. \n<\/p>\n So, if we don\u2019t manage the state of the Exoplayer with normal Activity callbacks, how do we manage it?\n<\/p>\n \n Good question, we do that with States<\/a> and Side Effects<\/a>.\n<\/p>\n \n Namely, we save all the goodies, such as the current position of the video, into a state object. The currentPosition value that we save is the position in time of the video. We remember the position by calling remembersavable to save the value on recomposition. After that, we can then monitor and handle the changes in the composition of the Composable the Exoplayer is embedded into with DisposedEffect<\/a>.\n<\/p>\n \n DisposedEffect allows us to set its key1 field to the AndroidView that houses our Exoplayer. Once that View changes, DisposedEffect will run whatever is in its effect field. Currently I do not have anything set to that field, but it could be used to pause the video player or set it to some other time. Nevertheless, the important thing is that when the composable is removed from the <\/a>UI, we manage the release of the video player using the onDispose function. This removes any issue of multiple streams of video playing at once, but also allows for us to safely start up the video player once the composable re-enters the UI. \n<\/p>\n \n One of the more interesting techniques that were used here was setting the full screen. Beforehand, we would have to set the size or bounds of the composable or view to fit the entire screen, then adjust it back to its original when we exit fullscreen. How I carried out full screen HERE however was a little different. I mainly made use of the panemode in TwoPaneLayout, which is an orientation mode that sets how pane1 will span over multiple screens. \n<\/p>\n \n Set your \n Other than that, go wild. The app here, if you are unfamiliar with its View clone, depicts how one might build a video app with a chat alongside it. But given the fact that you can embed a video in this way, you can simply treat the video as a composable and toss it around your app. One idea I had originally was using more of the weight functionality in the TwoPaneLayout<\/a> UI component, adding a gesture to the chat where it will modify the weights of each composable, and allow for users to swipe the chat in and out of View.\n<\/p>\n \n On the other hand, the calculator is a more Jetpack Compose styling type example. The calculator functions as you would think it does. However, unlike other apps, to access the more advanced equations, the user must put the device in dual mode. \n<\/p>\n \n We also call our calculator sample \u201cDyAdd,\u201d Dyad for the duo synonym, and Add because, well, Addition. \n<\/p>\n \n \n \n As you can see, only basic functionality is available with this app when it is in single portrait mode, and even less functionality is available in single landscape.\n<\/p>\n \n With the shift over to dual mode, not only does the user get to access the more advanced equations, but the ticker tape also moves locations. \n<\/p>\n \n \n \n You will also notice that with the configuration change, the ticker tape goes from displaying the most recent calculation on the bottom to displaying on the top.\n<\/p>\n \n I accomplish this by following the Extended Canvas<\/a> pattern and using TwoPaneLayout.<\/a>\n<\/p>\n \n I then pass in the WindowState<\/a> to each page, allowing for each page to determine which Composables to call depending on the orientation of the device. \n This is a really easy way to set up your Jetpack Compose app to have dynamic and interesting ways to let users experience your app. You really can go as deep as you want with this thing, even with this example you could drill the WindowState down to each grid component and re-order how they look. I simply gave each grid a column count to change how many columns were shown.\n<\/p>\n \n But you could also just pass the WindowState here and rearrange the ordering of the buttons to, say, have all the trig functions right next to each other or move all the number buttons next to or inside another grid. The sky is your limit with this stuff. \n<\/p>\n \n If you\u2019re interested in checking out the source code for these projects, feel free to mosey on over here.<\/a>\n<\/p>\n \n Happy Coding \ud83d\ude0a\n<\/p>\n \n If you have any questions or would like to tell us about your dual-screen applications, use the\u00a0feedback forum<\/a>\u00a0or message us on Twitter\u00a0@surfaceduodev<\/a>.\u00a0\n<\/p>\n![\"Video](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/06\/intern-video-single-1.png\")
<\/a>![\"Image](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/06\/intern-video-dual-1024x814.png\")
<\/a>My \u201cExoplayer in Jetpack Compose\u201d Experience<\/a><\/h2>\n<\/p>\n
\n
Do:<\/h3>\n
@Composable\r\nfun Video(modifier: Modifier, currentPosition: Long, updatePosition: (Long) -> Unit) {\r\n val context = LocalContext.current\r\n val mediaItem =\r\n MediaItem.fromUri(\"https:\/\/storage.googleapis.com\/exoplayer-test-media-0\/BigBuckBunny_320x180.mp4\")\r\n\r\n val player = remember {\r\n ExoPlayer.Builder(context).build().apply {\r\n this.setMediaItem(mediaItem)\r\n this.playWhenReady = true\r\n this.prepare()\r\n }\r\n }\r\n\r\n DisposableEffect(\r\n key1 = AndroidView(\r\n modifier = modifier,\r\n factory = {\r\n StyledPlayerView(context).apply {\r\n this.player = player\r\n setShowPreviousButton(false)\r\n setShowNextButton(false)\r\n }\r\n },\r\n update = {\r\n player.seekTo(currentPosition)\r\n }\r\n )\r\n ) {\r\n onDispose {\r\n updatePosition(player.currentPosition)\r\n player.release()\r\n }\r\n }\r\n}<\/pre>\nDon\u2019t:<\/h3>\n
\r\n MainActivity.kt\r\n\r\n...\r\n\r\noverride fun onCreate(savedInstanceState: Bundle?) {\r\n super.onCreate(savedInstanceState)\r\n player = ExoPlayer.Builder(this<\/a>).build()\r\n setContent {\r\n\r\n MainPage(..., player = player)\r\n\r\n...\r\n\r\noverride fun onStart() {\r\n super.onStart()\r\n val mediaItem =\r\n MediaItem.fromUri(\"https:\/\/storage.googleapis.com\/exoplayer-test-media-0\/BigBuckBunny_320x180.mp4\")\r\n player.setMediaItem(mediaItem)\r\n player.prepare()\r\n }\r\n\r\n companion object {\r\n const val STATE_PLAY_WHEN_READY = \"playerPlayWhenReady\"\r\n const val STATE_CURRENT_POSITION = \"playerPlaybackPosition\"\r\n }\r\n\r\n override fun onRestoreInstanceState(savedInstanceState: Bundle) {\r\n super.onRestoreInstanceState(savedInstanceState)\r\n\r\n player.playWhenReady = savedInstanceState.getBoolean(STATE_PLAY_WHEN_READY)\r\n player.seekTo(savedInstanceState.getLong(STATE_CURRENT_POSITION))\r\n player.prepare()\r\n }<\/pre>\nVideoPage.kt\r\n\r\n@Composable\r\nfun Video(modifier: Modifier, player: ExoPlayer) {\r\n val context = LocalContext.current\r\n AndroidView(\r\n modifier = modifier,\r\n factory = {\r\n StyledPlayerView(context).apply {\r\n this.player = player\r\n setShowPreviousButton(false)\r\n setShowNextButton(false)\r\n }\r\n }\r\n )\r\n}<\/pre>\n\n
panemode<\/code> to get different orientations, or dynamically set it to allow for the screen to be fullscreen.\n<\/p>\nval paneMode = if (isFullScreen) TwoPaneMode.VerticalSingle else TwoPaneMode.TwoPane\r\n\r\nTwoPaneLayout(\r\n paneMode = paneMode,\r\n pane1 = {\r\n if (isFullScreen) {\r\n VideoPage(...)\r\n...<\/pre>\nCalculator<\/h2>\n
![\"Calculator](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/06\/intern-calc-single.png\")
<\/a>![\"Calculator](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/06\/intern-calc-single-wide.png\")
<\/a>![\"Calculator](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/06\/intern-calc-dual.png\")
<\/a>![\"Calculator](\"https:\/\/devblogs.microsoft.com\/surface-duo\/wp-content\/uploads\/sites\/53\/2022\/06\/intern-calc-tall.png\")
<\/a>@Composable\r\nfun MainPage(windowState: WindowState) {\r\n TwoPaneLayout(\r\n pane1 = { BasicCalculatorPage(windowState = windowState) },\r\n pane2 = { AdvancedCalculatorPage(windowState = windowState) }\r\n )\r\n}<\/pre>\nBasicCalculatorPage<\/code> and AdvancedCalculatorPage<\/code> represent the different UIs showing in each pane.\n<\/p>\n@Composable\r\nfun BasicCalculatorPage(windowState: WindowState) {\r\n if (windowState.isSinglePortrait() || windowState.isDualPortrait()) {\r\n BasicCalculatorWithHistory()\r\n } else {\r\n BasicCalculator()\r\n }\r\n}\r\n\r\n@Composable\r\nfun AdvancedCalculatorPage(windowState: WindowState) {\r\n if (windowState.isDualLandscape()) {\r\n AdvancedCalculatorWithHistory()\r\n } else {\r\n AdvancedCalculator()\r\n }\r\n}<\/pre>\n @Composable\r\n fun AdvancedEquationGrid(columnCount: Int, modifier: Modifier = Modifier) {\r\n LazyVerticalGrid(\r\n cells = GridCells.Fixed(columnCount),\r\n\r\n...<\/pre>\n\n Resources and feedback\n<\/h2>\n