diff --git a/AppScope/resources/base/element/string.json b/AppScope/resources/base/element/string.json index 1f3a3c7bfd75df721fa2f39427119ddc135a01ae..187ef5b3a17dea91514272d9e5b55e807d7b518c 100644 --- a/AppScope/resources/base/element/string.json +++ b/AppScope/resources/base/element/string.json @@ -2,7 +2,7 @@ "string": [ { "name": "app_name", - "value": "inputText" + "value": "DistributedView" } ] } diff --git a/README.en.md b/README.en.md new file mode 100644 index 0000000000000000000000000000000000000000..09dd9c2f775248f82d0913c5bc0bef9fcda71482 --- /dev/null +++ b/README.en.md @@ -0,0 +1,75 @@ +# App Continuation + +### Overview + +A distributed video player with a live video playback interface is developed in ArkTS. This sample shows how to use the distributed video player to: + + - Implement seamless video playback transition between devices, selecting the most suitable device to play the video. + - Allow bullet comments to be edited and sent from a mobile phone when the video is played on a tablet. + +### Preview +![dia_EN.gif](./screenshots/devices/dia.en.gif) + +**How to Use** + +1. Log in with the same HUAWEI ID on your phone and tablet, and enable Wi-Fi and Bluetooth on both devices. It is recommended that both devices be connected to the same LAN to improve the data transmission speed. +2. Install the distributed video player on both devices. +3. Swipe to browse videos on your phone and start the distributed video player on your tablet. +4. Touch the phone input button on the tablet to invoke the content on the phone. Then, view the video on the tablet. + + +### Project Directory + +``` +├──entry/src/main/ets // Code +│ ├──common +│ │ └──Constants.ets // Common constants +│ ├──entryability +│ │ └──EntryAbility.ets // Entry ability +│ ├──inputability +│ │ └──InoutAbility.ets // APIs for editing text on the phone. +│ ├──model +│ │ ├──LiveData.ets // Data related to live video. +│ │ └──LiveDataModel.ets // Live video data model. +│ ├──pages +│ │ ├──CommentPage.ets // Bullet screen +│ │ ├──InputPage.ets // Page for editing the comments on the phone +│ │ └──LivePage.ets // Video playback page +│ └──utils +│ ├──Logger.ets // Logger +│ └──WindowUtil.ets // Window utility +└──entry/src/main/resource // Static resources of the app +``` + +### How to Implement +1. Request the ohos.permission.DISTRIBUTED_DATASYNC permission for the app. + + Add **ohos.permission.DISTRIBUTED_DATASYNC** to the **requestPermissions** field. + +2. Request user authorization through a dialog when the app is launched for the first time. The app can obtain the corresponding permission only after the user manually grants the authorization. + + In the **entry/src/entryability/EntryAbility.ets** file, implement the function in the **EntryAbility** class so that a dialog is displayed to request user authorization when the app is used for the first time. + +3. Obtain the device ID of the target device. + +4. Set the target component parameters on the initiator, and call **startAbilityForResult()** to start the target UIAbility. + + **data** in the asynchronous callback is used to receive the information returned by the target UIAbility to the initiator UIAbility after the target UIAbility terminates itself. + +5. After the UIAbility mission on the target device is complete, call **terminateSelfWithResult()** to return the data to the initiator UIAbility. + +6. The initiator UIAbility receives the information returned by the target UIAbility and processes the information. + +### Required Permissions + +ohos.permission.DISTRIBUTED_DATASYNC + +### Constraints + +1. The sample app is supported only on Huawei phones running the standard system. + +2. The HarmonyOS version must be HarmonyOS NEXT Developer Beta1 or later. + +3. The DevEco Studio version must be DevEco Studio NEXT Developer Beta1 or later. + +4. The HarmonyOS SDK version must be HarmonyOS NEXT Developer Beta1 SDK or later. diff --git a/README.md b/README.md index 211e176ce53a990626b68b9ccd0e81da007d650c..9bb3396f9d04d1d09f325bbe2865b60309cf1bed 100644 --- a/README.md +++ b/README.md @@ -5,7 +5,7 @@ 基于ArkTS扩展的声明式开发范式编程语言编写的一个分布式视频播放器，主要包括一个直播视频播放界面，实现视频播放时可以从一台设备迁移到另一台设备继续运行，来选择更合适的设备继续执行播放功能以及PAD视频播放时协同调用手机编辑发送弹幕功能。 ### 效果预览 -![dia.gif](screenshots%2Fdevices%2Fdia.gif) +![dia.gif](./screenshots/devices/dia.gif) **使用说明** @@ -14,7 +14,6 @@ 3. 滑动浏览手机端视频，打开平板端应用 4. 点击平板端手机输入按钮，调起手机端输入内容，提交后平板端查看 - ### 工程目录 ``` @@ -25,16 +24,14 @@ │ │ └──EntryAbility.ets // 程序入口类 │ ├──inputability │ │ └──InoutAbility.ets // 手机文本编辑入口类 -│ ├──mock -│ │ └──LiveDataModel.ets // 直播视频相关数据 │ ├──model +│ │ ├──LiveData.ets // 直播视频相关数据 │ │ └──LiveDataModel.ets // 直播视频类 │ ├──pages │ │ ├──CommentPage.ets // 弹幕显示界面 -│ │ ├──Index.ets // 主界面 │ │ ├──InputPage.ets // 手机评论编辑界面 │ │ └──LivePage.ets // 视频播放界面 -│ └──pages +│ └──utils │ ├──Logger.ets // 日志类 │ └──WindowUtil.ets // 界面控制类 └──entry/src/main/resource // 应用静态资源目录 diff --git a/entry/src/main/ets/pages/LivePage.ets b/entry/src/main/ets/pages/LivePage.ets index da189a38794b38ace7a3b94689cc5ae607bd0970..2f717d3962ad838de96ff8f74bead5d0e4d7bed6 100644 --- a/entry/src/main/ets/pages/LivePage.ets +++ b/entry/src/main/ets/pages/LivePage.ets @@ -40,7 +40,7 @@ class commentInfo { @Entry @Component struct LivePage { - @StorageLink("activeLive") activeLive: number = 0; + @StorageLink('activeLive') activeLive: number = 0; @State active: number = this.activeLive; @State liveInfoList: Array = LiveData; @State liveList: LiveInfoDataModel[] = []; @@ -54,6 +54,7 @@ struct LivePage { }] }; @State isPhone: boolean = false; + videoController: VideoController = new VideoController(); listenerIsPhone = mediaquery.matchMediaSync('(orientation:landscape)'); onPortrait(mediaQueryResult: mediaquery.MediaQueryResult) { @@ -67,12 +68,16 @@ struct LivePage { Logger.info(this.activeLive.toString(), this.active.toString()); } + onPageShow(): void { + this.videoController.start(); + } + build() { Swiper() { ForEach(this.liveInfoList, (item: LiveInfoDataModel, index) => { Stack() { if (this.active === index) { - Video({ src: item.uri }) + Video({ src: item.uri, controller: this.videoController }) .autoPlay(true) .loop(true) .controls(false) @@ -133,7 +138,12 @@ struct LivePage { Blank() Row() { - Image($r('app.media.activated')) + Button($r('app.string.follow')) + .padding({ + left: 0, + right: 0 + }) + .fontSize(12) .height($r('app.integer.comm_btn_height5')) .width($r('app.integer.comm_btn_width5')) } diff --git a/entry/src/main/resources/base/element/string.json b/entry/src/main/resources/base/element/string.json index 0af307ec7c5ac230dc344d8afb76c079a71d97f4..2aba8f08256e2d7fde878529a72238c554acb8e0 100644 --- a/entry/src/main/resources/base/element/string.json +++ b/entry/src/main/resources/base/element/string.json @@ -12,13 +12,9 @@ "name": "EntryAbility_label", "value": "DistributedView" }, - { - "name": "app_name", - "value": "StageSample" - }, { "name": "watch", - "value": "观看" + "value": "views" }, { "name": "first_author", @@ -74,11 +70,7 @@ }, { "name": "talk_something", - "value": "聊点什么吧~~" - }, - { - "name": "in_live", - "value": "直播中" + "value": "Let's talk about something~~" }, { "name": "InputAbility_desc", @@ -96,6 +88,10 @@ "name": "input_submit", "value": "提交" }, + { + "name": "follow", + "value": "Follow" + }, { "name": "reason_distributed_datasync", "value": "Allow the app to exchange data between different devices in application continuation scenarios" diff --git a/entry/src/main/resources/en_US/element/string.json b/entry/src/main/resources/en_US/element/string.json index ffc6487c7f5a8d804b011aaee6ed023cfb553de0..2aba8f08256e2d7fde878529a72238c554acb8e0 100644 --- a/entry/src/main/resources/en_US/element/string.json +++ b/entry/src/main/resources/en_US/element/string.json @@ -12,6 +12,66 @@ "name": "EntryAbility_label", "value": "DistributedView" }, + { + "name": "watch", + "value": "views" + }, + { + "name": "first_author", + "value": "旅游文化推荐大使" + }, + { + "name": "first_one_name", + "value": "林小杰" + }, + { + "name": "first_one_comment", + "value": "HDC2024，我来了！" + }, + { + "name": "first_two_name", + "value": "刘小华" + }, + { + "name": "first_two_comment", + "value": "HarmonyOS，加油，go go go！" + }, + { + "name": "first_three_name", + "value": "吴小京" + }, + { + "name": "first_three_comment", + "value": "一起冲，我看这架势，继续冲！" + }, + { + "name": "first_four_name", + "value": "周小伦" + }, + { + "name": "first_four_comment", + "value": "期待在HDC2024看到鸿蒙的新版本！" + }, + { + "name": "first_five_name", + "value": "张小友" + }, + { + "name": "first_five_comment", + "value": "张小友在线支持一波~。" + }, + { + "name": "two_author", + "value": "美丽杭州西湖之声" + }, + { + "name": "three_author", + "value": "加油，我的中国" + }, + { + "name": "talk_something", + "value": "Let's talk about something~~" + }, { "name": "InputAbility_desc", "value": "description" @@ -20,6 +80,18 @@ "name": "InputAbility_label", "value": "label" }, + { + "name": "iPhone_input", + "value": "手机输入" + }, + { + "name": "input_submit", + "value": "提交" + }, + { + "name": "follow", + "value": "Follow" + }, { "name": "reason_distributed_datasync", "value": "Allow the app to exchange data between different devices in application continuation scenarios" diff --git a/entry/src/main/resources/zh_CN/element/string.json b/entry/src/main/resources/zh_CN/element/string.json index bd42f2c7c348cc708fc5fe6b0efc45e6f7eef5a8..9f027f4e68c2d6704ddf83cb2c06d275513a47de 100644 --- a/entry/src/main/resources/zh_CN/element/string.json +++ b/entry/src/main/resources/zh_CN/element/string.json @@ -12,6 +12,66 @@ "name": "EntryAbility_label", "value": "应用接续" }, + { + "name": "watch", + "value": "观看" + }, + { + "name": "first_author", + "value": "旅游文化推荐大使" + }, + { + "name": "first_one_name", + "value": "林小杰" + }, + { + "name": "first_one_comment", + "value": "HDC2024，我来了！" + }, + { + "name": "first_two_name", + "value": "刘小华" + }, + { + "name": "first_two_comment", + "value": "HarmonyOS，加油，go go go！" + }, + { + "name": "first_three_name", + "value": "吴小京" + }, + { + "name": "first_three_comment", + "value": "一起冲，我看这架势，继续冲！" + }, + { + "name": "first_four_name", + "value": "周小伦" + }, + { + "name": "first_four_comment", + "value": "期待在HDC2024看到鸿蒙的新版本！" + }, + { + "name": "first_five_name", + "value": "张小友" + }, + { + "name": "first_five_comment", + "value": "张小友在线支持一波~。" + }, + { + "name": "two_author", + "value": "美丽杭州西湖之声" + }, + { + "name": "three_author", + "value": "加油，我的中国" + }, + { + "name": "talk_something", + "value": "聊点什么吧~~" + }, { "name": "InputAbility_desc", "value": "description" @@ -20,6 +80,18 @@ "name": "InputAbility_label", "value": "label" }, + { + "name": "iPhone_input", + "value": "手机输入" + }, + { + "name": "input_submit", + "value": "提交" + }, + { + "name": "follow", + "value": "关注" + }, { "name": "reason_distributed_datasync", "value": "允许应用在应用接续场景中不同设备间的交换数据" diff --git a/screenshots/devices/dia.en.gif b/screenshots/devices/dia.en.gif new file mode 100644 index 0000000000000000000000000000000000000000..81ea3b0584630bd38bb8173a25db22c048ff6883 Binary files /dev/null and b/screenshots/devices/dia.en.gif differ diff --git a/screenshots/devices/dia.gif b/screenshots/devices/dia.gif index beb63c4e655b92b648a1545cb0569207f6a10e76..43fe85e957be96d57785025e50f119630789a347 100644 Binary files a/screenshots/devices/dia.gif and b/screenshots/devices/dia.gif differ