From 539a07bb87c8ac5e9acbee0d1d6354f320e1b2e2 Mon Sep 17 00:00:00 2001 From: EscaperPark Date: Sat, 11 May 2024 11:07:50 +0900 Subject: [PATCH] gif performance, chat ui --- README.md | 19 ++--- lib/src/common/constants/app_version.dart | 2 +- .../widgets/circle_avatar_profile_image.dart | 1 + lib/src/common/widgets/optimized_image.dart | 2 +- .../live/widgets/live_channel_info.dart | 1 + .../widgets/chat_container.dart | 39 +++++---- .../widgets/live_chat_stream.dart | 3 + .../image_cache}/image_extension.dart | 0 .../video_player/live_network_video.dart | 5 +- .../live_stream_chat_position_controls.dart | 5 +- ...e_stream_chat_settings_value_controls.dart | 82 ++++++++++--------- 11 files changed, 85 insertions(+), 74 deletions(-) rename lib/src/{common => utils/image_cache}/image_extension.dart (100%) diff --git a/README.md b/README.md index 909a627..7106f02 100644 --- a/README.md +++ b/README.md @@ -7,21 +7,20 @@ ![홈즐겨찾기](./images/01.png) ![카테고리](./images/03.png) -![카테고리라이브](./images/04.png) ## 업데이트 -### v0.2.3 +### v0.2.4 +- Gif 이모티콘이 다수 올라올 때 프로그램이 종료되는 현상 수정 (Thanks to @[mero-jung](https://github.com/mero-jung)) +- 채팅창 UI 수정 + +### ~v0.2.3 - 화질 개선을 위해 Low Latency HLS에서 HLS로 변경 - 홈 화면 팔로우, 인기 채널 불러오기 에러 수정 - VOD 시간 탐색시 키 누르고 있으면 계속 이동 - -### v0.2.2 - 채널 동영상에서 연령 인증 동영상이 재생되지 않는 현상 수정 -- gif 이모티콘 성능 최적화, 채팅이 가끔 나오지 않는 현상 수정 +- 채팅이 가끔 나오지 않는 현상 수정 - 전체 라이브 페이지 추가 (홈 화면 상단 -> 전체 라이브) - 기타 기능 및 버그 수정 - -### v0.2.1 - HeadlessWebView로 로그인이 진행되지 않는 분들을 위해 WebView 로그인을 추가했습니다. 가상 키보드에 문제가 있으신 분도 WebView 로그인을 사용해주세요. (설정 -> WebView 로그인) ## 패치노트 - v0.2 @@ -31,9 +30,6 @@ ### 4. 라이브 시청 중 탐색 기능(인기, 팔로우, 카테고리) 추가 - 라이브 시청 중 위 방향 키패드를 누르면 탐색 창이 나타납니다. ### 5. 기타 업데이트 -- 차단 목록이 나타나지 않습니다. -- 로그인 시 성인 인증 채널의 썸네일이 나옵니다. -- 로그인 시 키보드 입력 오류를 피하기 위해 두 화면을 거쳐서 로그인 합니다. (아이디 입력 페이지, 비밀번호 입력 페이지) ## 개발자의 말 - 로그인 버튼 클릭 후 동작이 없으면 **모바일 네이버 앱 알림**을 확인해주세요(2단계 인증). 그래도 진행되지 않는다면 아이디 비밀번호를 다시 확인해주세요. (취소 후 다시 시도) @@ -42,7 +38,6 @@ [**U+tv리모컨앱 정보**](https://www.lguplus.com/iptv/main-feature/000PPT0036), [**U+tv리모컨앱 iOS**](https://apps.apple.com/kr/app/u-tv-%EB%A6%AC%EB%AA%A8%EC%BB%A8%EC%95%B1/id1637815745), [**U+tv리모컨앱 Android**](https://play.google.com/store/apps/details?id=com.lguplus.remocon&hl=ko&gl=US) -![로그인](./images/06.png) ## 설치 방법 APK 파일을 다운받아서 수동으로 설치합니다. @@ -64,7 +59,7 @@ APK 파일을 다운받아서 수동으로 설치합니다. ``` ## 다운로드 -[**APK 파일 다운로드 (v0.2.3)**](https://github.com/Escaper-Park/unofficial_chzzk_android_tv/releases/tag/v0.2.3) +[**APK 파일 다운로드 (v0.2.4)**](https://github.com/Escaper-Park/unofficial_chzzk_android_tv/releases/tag/v0.2.4) ### 설치 파일 - 대부분 v7a로 설치 가능. 설치 불가시 통합버전 또는 사용하시는 CPU 타입에 따라 설치하시면 됩니다. (가능한 v7a로 설치) diff --git a/lib/src/common/constants/app_version.dart b/lib/src/common/constants/app_version.dart index 7612ba9..86c5919 100644 --- a/lib/src/common/constants/app_version.dart +++ b/lib/src/common/constants/app_version.dart @@ -1,3 +1,3 @@ class AppVersion { - static const String version = 'v0.2.3'; + static const String version = 'v0.2.4'; } diff --git a/lib/src/common/widgets/circle_avatar_profile_image.dart b/lib/src/common/widgets/circle_avatar_profile_image.dart index 7cd87dc..d5d02d1 100644 --- a/lib/src/common/widgets/circle_avatar_profile_image.dart +++ b/lib/src/common/widgets/circle_avatar_profile_image.dart @@ -36,6 +36,7 @@ class CircleAvatarProfileImage extends StatelessWidget { width: 2.0, ), ), + child: const Center(child: Text('TEST')), ) : OptimizedCachedNetworkImage( imageUrl: profileImageUrl!, diff --git a/lib/src/common/widgets/optimized_image.dart b/lib/src/common/widgets/optimized_image.dart index 3ef32a3..3ca4ede 100644 --- a/lib/src/common/widgets/optimized_image.dart +++ b/lib/src/common/widgets/optimized_image.dart @@ -1,8 +1,8 @@ import 'package:cached_network_image/cached_network_image.dart'; import 'package:flutter/material.dart'; import 'package:gif/gif.dart'; -import 'package:unofficial_chzzk_android_tv/src/common/image_extension.dart'; +import '../../../src/utils/image_cache/image_extension.dart'; import '../constants/styles.dart'; class OptimizedCachedNetworkImage extends StatelessWidget { diff --git a/lib/src/features/live/widgets/live_channel_info.dart b/lib/src/features/live/widgets/live_channel_info.dart index d042dd4..1b6b7ff 100644 --- a/lib/src/features/live/widgets/live_channel_info.dart +++ b/lib/src/features/live/widgets/live_channel_info.dart @@ -29,6 +29,7 @@ class LiveChannelInfo extends StatelessWidget { width: 30.0, child: CircleAvatarProfileImage( profileImageUrl: liveDetail.channel.channelImageUrl, + hasBorder: liveDetail.channel.openLive ?? false, ), ), const SizedBox(width: 15.0), diff --git a/lib/src/features/live_streaming/widgets/chat_container.dart b/lib/src/features/live_streaming/widgets/chat_container.dart index ad9a880..03e107f 100644 --- a/lib/src/features/live_streaming/widgets/chat_container.dart +++ b/lib/src/features/live_streaming/widgets/chat_container.dart @@ -3,6 +3,7 @@ import 'package:gif/gif.dart'; import '../../../common/constants/styles.dart'; import '../../../common/widgets/optimized_image.dart'; +import '../../../common/widgets/rounded_container.dart'; import '../../chat/model/chat.dart'; class ChatContainer extends StatefulWidget { @@ -11,14 +12,16 @@ class ChatContainer extends StatefulWidget { required this.chat, required this.fontSize, required this.verticalInterval, + required this.opacity, }); final Chat chat; final double fontSize; final double verticalInterval; + final double opacity; @override - _ChatContainerState createState() => _ChatContainerState(); + State createState() => _ChatContainerState(); } class _ChatContainerState extends State @@ -108,22 +111,26 @@ class _ChatContainerState extends State horizontal: 5.0, vertical: widget.verticalInterval / 2, ), - child: RichText( - text: TextSpan( - children: [ - TextSpan( - text: widget.chat.nickname, - style: TextStyle( - fontSize: widget.fontSize, - color: nicknameColor, - fontWeight: FontWeight.w600, + child: RoundedContainer( + backgroundColor: AppColors.blackColor.withOpacity(widget.opacity), + padding: const EdgeInsets.all(5.0), + child: RichText( + text: TextSpan( + children: [ + TextSpan( + text: widget.chat.nickname, + style: TextStyle( + fontSize: widget.fontSize, + color: nicknameColor, + fontWeight: FontWeight.w600, + ), ), - ), - const WidgetSpan( - child: SizedBox(width: 5.0), - ), - ...textSpans, - ], + const WidgetSpan( + child: SizedBox(width: 5.0), + ), + ...textSpans, + ], + ), ), ), ); diff --git a/lib/src/features/live_streaming/widgets/live_chat_stream.dart b/lib/src/features/live_streaming/widgets/live_chat_stream.dart index 7bd97cb..fd59ca9 100644 --- a/lib/src/features/live_streaming/widgets/live_chat_stream.dart +++ b/lib/src/features/live_streaming/widgets/live_chat_stream.dart @@ -12,11 +12,13 @@ class LiveChatStream extends ConsumerWidget { required this.liveDetail, required this.fontSize, required this.verticalInterval, + this.opacity = 0.0, }); final LiveDetail liveDetail; final double fontSize; final double verticalInterval; + final double opacity; @override Widget build(BuildContext context, WidgetRef ref) { @@ -40,6 +42,7 @@ class LiveChatStream extends ConsumerWidget { chat: chat, fontSize: fontSize, verticalInterval: verticalInterval, + opacity: opacity, ); }, ), diff --git a/lib/src/common/image_extension.dart b/lib/src/utils/image_cache/image_extension.dart similarity index 100% rename from lib/src/common/image_extension.dart rename to lib/src/utils/image_cache/image_extension.dart diff --git a/lib/src/utils/video_player/live_network_video.dart b/lib/src/utils/video_player/live_network_video.dart index 570b1d5..fcb5025 100644 --- a/lib/src/utils/video_player/live_network_video.dart +++ b/lib/src/utils/video_player/live_network_video.dart @@ -6,7 +6,6 @@ import 'package:chewie/chewie.dart'; import 'package:video_player/video_player.dart'; import 'package:wakelock_plus/wakelock_plus.dart'; -import '../../common/constants/styles.dart'; import '../../features/chat/controller/chat_controller.dart'; import '../../features/chat/controller/chat_settings_controller.dart'; import '../../features/chat/model/chat_settings.dart'; @@ -190,14 +189,14 @@ class _NetworkVideoState extends ConsumerState Align( alignment: ChatPositionData .chatPositionsData[chatPositionIndex].alignment, - child: Container( - color: AppColors.blackColor.withOpacity(opacity), + child: SizedBox( width: maxWidth * chatContainerWidth * 0.01, height: maxHeight * chatContainerHeight * 0.01, child: LiveChatStream( liveDetail: widget.liveDetail, fontSize: chatFontSize, verticalInterval: verticalInterval, + opacity: opacity, ), ), ), diff --git a/lib/src/utils/video_player/widgets/live/chat/live_stream_chat_position_controls.dart b/lib/src/utils/video_player/widgets/live/chat/live_stream_chat_position_controls.dart index 40f95e6..7c688e1 100644 --- a/lib/src/utils/video_player/widgets/live/chat/live_stream_chat_position_controls.dart +++ b/lib/src/utils/video_player/widgets/live/chat/live_stream_chat_position_controls.dart @@ -34,7 +34,10 @@ class LiveStreamChatPositionControls extends ConsumerWidget { mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, children: [ - const HeaderText(text: '채팅창 위치'), + const HeaderText( + text: '채팅창 위치', + fontSize: 16.0, + ), Expanded( child: Row( children: [ diff --git a/lib/src/utils/video_player/widgets/live/chat/live_stream_chat_settings_value_controls.dart b/lib/src/utils/video_player/widgets/live/chat/live_stream_chat_settings_value_controls.dart index 634cff8..fcb7b32 100644 --- a/lib/src/utils/video_player/widgets/live/chat/live_stream_chat_settings_value_controls.dart +++ b/lib/src/utils/video_player/widgets/live/chat/live_stream_chat_settings_value_controls.dart @@ -202,8 +202,8 @@ class _ChatSettingControl extends ConsumerWidget { @override Widget build(BuildContext context, WidgetRef ref) { - return Padding( - padding: const EdgeInsets.symmetric(horizontal: 10.0), + return SizedBox( + height: 120.0, child: Column( mainAxisAlignment: MainAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start, @@ -212,46 +212,48 @@ class _ChatSettingControl extends ConsumerWidget { text: headerText, fontSize: 16.0, ), - Row( - mainAxisAlignment: MainAxisAlignment.start, - children: [ - SizedBox( - width: 45.0, - child: Text( - value, - style: const TextStyle( - fontSize: 16.0, - color: AppColors.whiteColor, - fontWeight: FontWeight.w600, + Expanded( + child: Row( + mainAxisAlignment: MainAxisAlignment.start, + children: [ + SizedBox( + width: 50.0, + child: Text( + value, + style: const TextStyle( + fontSize: 16.0, + color: AppColors.whiteColor, + fontWeight: FontWeight.w600, + ), ), ), - ), - const SizedBox(width: 10.0), - ControlIcon( - iconData: Icons.arrow_upward_rounded, - onPressed: () { - ref - .read(controlOverlayTimerProvider.notifier) - .showOverlayAndStartTimer( - videoFocusNode: videoFocusNode, - overlayType: OverlayType.chatSettings); - onPressedUp(); - }, - ), - const SizedBox(width: 5.0), - ControlIcon( - iconData: Icons.arrow_downward_rounded, - onPressed: () { - ref - .read(controlOverlayTimerProvider.notifier) - .showOverlayAndStartTimer( - videoFocusNode: videoFocusNode, - overlayType: OverlayType.chatSettings); - - onPressedDown(); - }, - ), - ], + const SizedBox(width: 10.0), + ControlIcon( + iconData: Icons.arrow_upward_rounded, + onPressed: () { + ref + .read(controlOverlayTimerProvider.notifier) + .showOverlayAndStartTimer( + videoFocusNode: videoFocusNode, + overlayType: OverlayType.chatSettings); + onPressedUp(); + }, + ), + const SizedBox(width: 5.0), + ControlIcon( + iconData: Icons.arrow_downward_rounded, + onPressed: () { + ref + .read(controlOverlayTimerProvider.notifier) + .showOverlayAndStartTimer( + videoFocusNode: videoFocusNode, + overlayType: OverlayType.chatSettings); + + onPressedDown(); + }, + ), + ], + ), ), ], ),