Merge pull request #6 from mero-jung/optimize_gif

optimize gif

README.md

@@ -64,7 +64,7 @@ APK 파일을 다운받아서 수동으로 설치합니다.
 ```
 
 ## 다운로드
-[**APK 파일 다운로드 (v0.2.2)**](https://github.com/Escaper-Park/unofficial_chzzk_android_tv/releases/tag/v0.2.3)
+[**APK 파일 다운로드 (v0.2.3)**](https://github.com/Escaper-Park/unofficial_chzzk_android_tv/releases/tag/v0.2.3)
 
 ### 설치 파일
 - 대부분 v7a로 설치 가능. 설치 불가시 통합버전 또는 사용하시는 CPU 타입에 따라 설치하시면 됩니다. (가능한 v7a로 설치)

lib/src/common/image_extension.dart

@@ -0,0 +1,7 @@
+import 'package:flutter/material.dart';
+
+extension ImageExtension on num {
+  int cacheSize(BuildContext context) {
+    return (this * MediaQuery.of(context).devicePixelRatio).round();
+  }
+}

lib/src/common/widgets/optimized_image.dart

@@ -1,6 +1,7 @@
 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 '../constants/styles.dart';
 
@@ -22,8 +23,7 @@ class OptimizedCachedNetworkImage extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    final double devicePixelRatio = MediaQuery.of(context).devicePixelRatio;
-    final int cacheSize = (imageWidth * devicePixelRatio).round();
+    final int cacheSize = imageWidth.cacheSize(context);
 
     return CachedNetworkImage(
       key: UniqueKey(),
@@ -127,11 +127,12 @@ class OptimizedAssetImage extends StatelessWidget {
   }
 }
 
-class OptimizedGifImage extends StatefulWidget {
+class OptimizedGifImage extends StatelessWidget {
   const OptimizedGifImage({
     super.key,
     required this.imageUrl,
     required this.imageWidth,
+    required this.controller,
     this.imageHeight,
     this.fit = BoxFit.cover,
   });
@@ -140,44 +141,27 @@ class OptimizedGifImage extends StatefulWidget {
   final double imageWidth;
   final double? imageHeight;
   final BoxFit fit;
-
-  @override
-  State<OptimizedGifImage> createState() => _OptimizedGifImageState();
-}
-
-class _OptimizedGifImageState extends State<OptimizedGifImage>
-    with TickerProviderStateMixin {
-  late final GifController controller;
+  final GifController controller;
   final int _fps = 30;
 
-  @override
-  void initState() {
-    controller = GifController(vsync: this);
-    super.initState();
-  }
-
-  @override
-  void dispose() {
-    controller.dispose();
-    super.dispose();
-  }
-
   @override
   Widget build(BuildContext context) {
-    return Gif(
-      controller: controller,
-      fps: _fps,
-      autostart: Autostart.loop,
-      useCache: true,
-      height: widget.imageHeight,
-      width: widget.imageWidth,
-      image: NetworkImage(
-        widget.imageUrl,
-      ),
-      fit: widget.fit,
-      placeholder: (context) => SizedBox(
-        height: widget.imageHeight,
-        width: widget.imageWidth,
+    return RepaintBoundary(
+      child: Gif(
+        controller: controller,
+        fps: _fps,
+        autostart: Autostart.loop,
+        useCache: true,
+        height: imageHeight,
+        width: imageWidth,
+        image: NetworkImage(
+          imageUrl,
+        ),
+        fit: fit,
+        placeholder: (context) => SizedBox(
+          height: imageHeight,
+          width: imageWidth,
+        ),
       ),
     );
   }

lib/src/features/live_streaming/widgets/chat_container.dart

@@ -1,10 +1,11 @@
 import 'package:flutter/material.dart';
+import 'package:gif/gif.dart';
 
 import '../../../common/constants/styles.dart';
 import '../../../common/widgets/optimized_image.dart';
 import '../../chat/model/chat.dart';
 
-class ChatContainer extends StatelessWidget {
+class ChatContainer extends StatefulWidget {
   const ChatContainer({
     super.key,
     required this.chat,
@@ -16,50 +17,71 @@ class ChatContainer extends StatelessWidget {
   final double fontSize;
   final double verticalInterval;
 
+  @override
+  _ChatContainerState createState() => _ChatContainerState();
+}
+
+class _ChatContainerState extends State<ChatContainer>
+    with TickerProviderStateMixin {
+  late final GifController controller;
+
+  @override
+  void initState() {
+    controller = GifController(vsync: this);
+    super.initState();
+  }
+
+  @override
+  void dispose() {
+    controller.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
-    final Color nicknameColor = getNicknameColor(chat.nickname);
+    final Color nicknameColor = getNicknameColor(widget.chat.nickname);
     List<InlineSpan> textSpans = [];
 
-    if (chat.emojis == null) {
+    if (widget.chat.emojis == null) {
       textSpans.add(
         TextSpan(
-          text: chat.msg,
+          text: widget.chat.msg,
           style: TextStyle(
-            fontSize: fontSize,
+            fontSize: widget.fontSize,
           ),
         ),
       );
     }
 
-    if (chat.emojis != null) {
-      chat.msg.splitMapJoin(
+    if (widget.chat.emojis != null) {
+      widget.chat.msg.splitMapJoin(
         RegExp(r'\{:([^}]+):\}'),
         onMatch: (match) {
           final String? emojiKey = match.group(1);
           // Emoji
-          if (chat.emojis!.containsKey(emojiKey)) {
-            final imageUrl = chat.emojis![emojiKey]!;
+          if (widget.chat.emojis!.containsKey(emojiKey)) {
+            final imageUrl = widget.chat.emojis![emojiKey]!;
 
             textSpans.add(WidgetSpan(
               child: imageUrl.contains('.gif')
                   ? OptimizedGifImage(
+                      controller: controller,
                       imageUrl: imageUrl,
-                      imageWidth: fontSize + 5.0,
-                      imageHeight: fontSize + 5.0,
+                      imageWidth: widget.fontSize + 5.0,
+                      imageHeight: widget.fontSize + 5.0,
                     )
                   : OptimizedNetworkImage(
                       imageUrl: imageUrl,
-                      imageWidth: fontSize + 5.0,
-                      imageHeight: fontSize + 5.0,
+                      imageWidth: widget.fontSize + 5.0,
+                      imageHeight: widget.fontSize + 5.0,
                     ),
             ));
           } else {
             textSpans.add(
               TextSpan(
                 text: match.group(0),
                 style: TextStyle(
-                  fontSize: fontSize,
+                  fontSize: widget.fontSize,
                 ),
               ),
             );
@@ -72,7 +94,7 @@ class ChatContainer extends StatelessWidget {
             TextSpan(
               text: nonMatch,
               style: TextStyle(
-                fontSize: fontSize,
+                fontSize: widget.fontSize,
               ),
             ),
           );
@@ -84,15 +106,15 @@ class ChatContainer extends StatelessWidget {
     return Padding(
       padding: EdgeInsets.symmetric(
         horizontal: 5.0,
-        vertical: verticalInterval / 2,
+        vertical: widget.verticalInterval / 2,
       ),
       child: RichText(
         text: TextSpan(
           children: [
             TextSpan(
-              text: chat.nickname,
+              text: widget.chat.nickname,
               style: TextStyle(
-                fontSize: fontSize,
+                fontSize: widget.fontSize,
                 color: nicknameColor,
                 fontWeight: FontWeight.w600,
               ),