Flex message update 3 (#744)

* Add Video component

* Add max width and height of a box component

* Add line spacing in a text component

Author: Yang-33

line-bot-model/src/main/java/com/linecorp/bot/model/message/flex/component/Box.java

@@ -78,8 +78,26 @@ public class Box implements FlexComponent {
 
     String width;
 
+    /**
+     * Max width of the box.
+     *
+     * <p>The value should be given in pixels or as a percentage of the width of the parent element.
+     *
+     * @see <a href="https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#box-width">Max width of a box</a>
+     */
+    String maxWidth;
+
     String height;
 
+    /**
+     * Max height of the box.
+     *
+     * <p>The value should be given in pixels or as a percentage of the height of the parent element.
+     *
+     * @see <a href="https://developers.line.biz/en/docs/messaging-api/flex-message-layout/#box-height">Max height of a box</a>
+     */
+    String maxHeight;
+
     String paddingAll;
 
     String paddingTop;

line-bot-model/src/main/java/com/linecorp/bot/model/message/flex/component/FlexComponent.java

@@ -30,6 +30,7 @@
         @JsonSubTypes.Type(Button.class),
         @JsonSubTypes.Type(Icon.class),
         @JsonSubTypes.Type(Spacer.class),
+        @JsonSubTypes.Type(Video.class),
 })
 @JsonTypeInfo(
         use = JsonTypeInfo.Id.NAME,

line-bot-model/src/main/java/com/linecorp/bot/model/message/flex/component/Text.java

@@ -86,6 +86,15 @@ public enum TextDecoration {
 
     Boolean wrap;
 
+    /**
+     * Line spacing in a wrapping text.
+     *
+     * <p>Specify a positive integer or decimal number that ends in px. The lineSpacing property doesn't apply
+     * to the top of the start line and the bottom of the last line.
+     * @see <a href="https://developers.line.biz/en/docs/messaging-api/flex-message-elements/#text-line-spacing">Increase the line spacing in a text</a>
+     */
+    String lineSpacing;
+
     String margin;
 
     FlexPosition position;

line-bot-model/src/main/java/com/linecorp/bot/model/message/flex/component/Video.java

@@ -0,0 +1,151 @@
+/*
+ * Copyright 2022 LINE Corporation
+ *
+ * LINE Corporation licenses this file to you under the Apache License,
+ * version 2.0 (the "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at:
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations
+ * under the License.
+ */
+
+package com.linecorp.bot.model.message.flex.component;
+
+import java.net.URI;
+import java.text.DecimalFormat;
+import java.util.function.Supplier;
+
+import javax.annotation.Nullable;
+
+import com.fasterxml.jackson.annotation.JsonInclude;
+import com.fasterxml.jackson.annotation.JsonInclude.Include;
+import com.fasterxml.jackson.annotation.JsonTypeName;
+import com.fasterxml.jackson.databind.annotation.JsonDeserialize;
+import com.fasterxml.jackson.databind.annotation.JsonPOJOBuilder;
+
+import com.linecorp.bot.model.action.Action;
+
+import lombok.AllArgsConstructor;
+import lombok.Builder;
+import lombok.Getter;
+import lombok.NonNull;
+import lombok.Value;
+
+/**
+ * The following conditions must be met to use the video component.
+ *
+ * <ul>
+ * <li>The video component is specified directly under the hero block</li>
+ * <li>kilo, mega or giga is specified as the value of the size property of the bubble</li>
+ * <li>The bubble is not the child element of a carousel</li>
+ * </ul>
+ */
+@JsonTypeName("video")
+@JsonInclude(Include.NON_NULL)
+@Value
+@Builder(toBuilder = true)
+@JsonDeserialize(builder = Video.VideoBuilder.class)
+public class Video implements FlexComponent {
+    @AllArgsConstructor
+    @Getter
+    public enum VideoAspectRatio {
+        R1TO1("1:1"),
+        R20TO13("20:13"),
+        R1_91TO1("1.91:1"),
+        R4TO3("4:3"),
+        R16TO9("16:9"),
+        R2TO1("2:1"),
+        R3TO1("3:1"),
+        R3TO4("3:4"),
+        R9TO16("9:16"),
+        R1TO2("1:2"),
+        R1TO3("1:3"),
+        R1_51TO1("1.51:1");
+
+        private final String ratio;
+    }
+
+    /**
+     * Video file URL. (Max character limit: 2000)
+     *
+     * <ul>
+     * <li>Protocol: HTTPS (TLS 1.2 or later)</li>
+     * <li>Video format: mp4</li>
+     * <li>Max file size: 200 MB</li>
+     * </ul>
+     */
+    @NonNull
+    URI url;
+
+    /**
+     * Preview image URL. (Max character limit: 2000)
+     *
+     * <ul>
+     * <li>Protocol: HTTPS (TLS 1.2 or later)</li>
+     * <li>Image format: JPEG or PNG</li>
+     * <li>Maximum file size: 1 MB</li>
+     * </ul>
+     */
+    @NonNull
+    URI previewUrl;
+
+    /**
+     * Alternative content.
+     *
+     * <p>The alternative content will be displayed on the screen of a user device that is using a
+     * version of LINE that doesn't support the video component. Specify a {@link Box} or an {@link Image}.
+     */
+    @NonNull
+    FlexComponent altContent;
+
+    /**
+     * Aspect ratio of the video.
+     *
+     * <p>{@code width:height} format. Specify the value of {@code width} and {@code height} in the range from
+     * 1 to 100000. However, you can't set {@code height} to a value that is more than three times the value of
+     * {@code width}. The default value is {@code 1:1}.
+     */
+    @Nullable
+    String aspectRatio;
+
+    /**
+     * URI {@link Action}.
+     */
+    @Nullable
+    Action action;
+
+    @JsonPOJOBuilder(withPrefix = "")
+    public static class VideoBuilder {
+        private static final Supplier<DecimalFormat> RATIO_FORMAT = () -> new DecimalFormat("0.#####");
+
+        /**
+         * Specify aspect ratio by keyword.
+         */
+        public VideoBuilder aspectRatio(VideoAspectRatio aspectRatio) {
+            this.aspectRatio = aspectRatio.getRatio();
+            return this;
+        }
+
+        /**
+         * Specify custom aspect ratio.
+         */
+        public VideoBuilder aspectRatio(String aspectRatio) {
+            this.aspectRatio = aspectRatio;
+            return this;
+        }
+
+        /**
+         * Specify custom aspect ratio. The width and height are rounded up to 5 decimal places.
+         */
+        public VideoBuilder aspectRatio(double width, double height) {
+            final DecimalFormat fmt = RATIO_FORMAT.get();
+            aspectRatio = fmt.format(width) + ':' + fmt.format(height);
+            return this;
+        }
+    }
+}

line-bot-model/src/test/java/com/linecorp/bot/model/message/flex/component/AspectRatioFormatTest.java

@@ -19,6 +19,7 @@
 import static org.assertj.core.api.Assertions.assertThat;
 import static org.junit.jupiter.params.provider.Arguments.arguments;
 
+import java.net.URI;
 import java.util.stream.Stream;
 
 import org.junit.jupiter.params.ParameterizedTest;
@@ -51,14 +52,32 @@ public void test(double width, double height, String result) {
         assertThat(image.getAspectRatio()).isEqualTo(result);
     }
 
+    @ParameterizedTest
+    @MethodSource("testSource")
+    public void video_aspectRatio(double width, double height, String result) throws Exception {
+        final Image altImage =
+                new ImageBuilder()
+                        .aspectRatio(width, height)
+                        .build();
+
+        final Video video =
+                new Video.VideoBuilder()
+                        .aspectRatio(width, height)
+                        .url(new URI("https://example.com/video.mp4"))
+                        .previewUrl(new URI("https://example.com/picture.png"))
+                        .altContent(altImage)
+                        .build();
+        assertThat(video.getAspectRatio()).isEqualTo(result);
+    }
+
     @ParameterizedTest
     @MethodSource("testSource")
     public void icon(double width, double height, String result) {
-        final Icon image =
+        final Icon icon =
                 new IconBuilder()
                         .aspectRatio(width, height)
                         .build();
-        assertThat(image.getAspectRatio()).isEqualTo(result);
+        assertThat(icon.getAspectRatio()).isEqualTo(result);
     }
 
     public static Stream<Arguments> testSource() {

line-bot-model/src/test/resources/flex/reconstruction/TODOapp.json

@@ -223,7 +223,8 @@
                 "text": "Buy milk and lettuce before class",
                 "color": "#8C8C8C",
                 "size": "sm",
-                "wrap": true
+                "wrap": true,
+                "lineSpacing": "20px"
               }
             ],
             "flex": 1

line-bot-model/src/test/resources/flex/reconstruction/Transit.json

@@ -50,7 +50,8 @@
     "backgroundColor": "#0367D3",
     "spacing": "md",
     "height": "154px",
-    "paddingTop": "22px"
+    "paddingTop": "22px",
+    "maxWidth": "100%"
   },
   "body": {
     "type": "box",
@@ -91,7 +92,8 @@
                 "height": "12px",
                 "width": "12px",
                 "borderColor": "#EF454D",
-                "borderWidth": "2px"
+                "borderWidth": "2px",
+                "maxHeight": "11px"
               },
               {
                 "type": "filler"

line-bot-model/src/test/resources/flex/reconstruction/VideoContent.json

@@ -0,0 +1,17 @@
+{
+  "type": "bubble",
+  "size": "kilo",
+  "hero": {
+    "type": "video",
+    "url": "https://example.com/video.mp4",
+    "previewUrl": "https://example.com/video_preview.jpg",
+    "altContent": {
+      "type": "image",
+      "size": "full",
+      "aspectRatio": "20:13",
+      "aspectMode": "cover",
+      "url": "https://example.com/image.jpg"
+    },
+    "aspectRatio": "20:13"
+  }
+}