From b3826dc596926a5582897f1fadb428f8f0b34f20 Mon Sep 17 00:00:00 2001
From: Yoo Dongryul <dony435@naver.com>
Date: Thu, 9 May 2024 17:37:45 +0900
Subject: [PATCH 1/9] Fix YouTube preview shows Video Unavailable

---
 .../src/components/youtube_video/youtube_video.tsx       | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/webapp/channels/src/components/youtube_video/youtube_video.tsx b/webapp/channels/src/components/youtube_video/youtube_video.tsx
index 80a69dbe6c4d8..9cc7621bc6eb7 100644
--- a/webapp/channels/src/components/youtube_video/youtube_video.tsx
+++ b/webapp/channels/src/components/youtube_video/youtube_video.tsx
@@ -49,6 +49,7 @@ export default class YoutubeVideo extends React.PureComponent<Props, State> {
         const {metadata, link} = this.props;
 
         const videoId = getVideoId(link);
+        const videoTitle = metadata?.title || 'unknown';
         const time = handleYoutubeTime(link);
 
         const header = (
@@ -59,7 +60,7 @@ export default class YoutubeVideo extends React.PureComponent<Props, State> {
                         href={this.props.link}
                         location='youtube_video'
                     >
-                        {metadata?.title || 'unknown'}
+                        {videoTitle}
                     </ExternalLink>
                 </span>
             </h4>
@@ -75,6 +76,12 @@ export default class YoutubeVideo extends React.PureComponent<Props, State> {
                     height='360px'
                     frameBorder='0'
                     allowFullScreen={true}
+                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                    referrerpolicy="strict-origin-when-cross-origin"
+                    allowfullscreen=""
+                    title={videoTitle}
+                    sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"
+                    credentialless="true"
                 />
             );
         } else {

From 156264a9d19b69deaabb15b28b73649be8133a44 Mon Sep 17 00:00:00 2001
From: Yoo Dongryul <dony435@naver.com>
Date: Thu, 9 May 2024 17:58:31 +0900
Subject: [PATCH 2/9] Fix typo on iframe property

---
 webapp/channels/src/components/youtube_video/youtube_video.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/channels/src/components/youtube_video/youtube_video.tsx b/webapp/channels/src/components/youtube_video/youtube_video.tsx
index 9cc7621bc6eb7..428395443d170 100644
--- a/webapp/channels/src/components/youtube_video/youtube_video.tsx
+++ b/webapp/channels/src/components/youtube_video/youtube_video.tsx
@@ -77,7 +77,7 @@ export default class YoutubeVideo extends React.PureComponent<Props, State> {
                     frameBorder='0'
                     allowFullScreen={true}
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    referrerpolicy="strict-origin-when-cross-origin"
+                    referrerPolicy="strict-origin-when-cross-origin"
                     allowfullscreen=""
                     title={videoTitle}
                     sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"

From 88e5376dec80ff16ddcdb4cee8650aa44e87bb6a Mon Sep 17 00:00:00 2001
From: Yoo Dongryul <dony435@naver.com>
Date: Thu, 9 May 2024 17:58:57 +0900
Subject: [PATCH 3/9] Remove duplicated property

---
 webapp/channels/src/components/youtube_video/youtube_video.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/webapp/channels/src/components/youtube_video/youtube_video.tsx b/webapp/channels/src/components/youtube_video/youtube_video.tsx
index 428395443d170..018126782b215 100644
--- a/webapp/channels/src/components/youtube_video/youtube_video.tsx
+++ b/webapp/channels/src/components/youtube_video/youtube_video.tsx
@@ -78,7 +78,6 @@ export default class YoutubeVideo extends React.PureComponent<Props, State> {
                     allowFullScreen={true}
                     allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                     referrerPolicy="strict-origin-when-cross-origin"
-                    allowfullscreen=""
                     title={videoTitle}
                     sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"
                     credentialless="true"

From 0f24353ccd3440fcd6a4ff363c06e780562ed6c0 Mon Sep 17 00:00:00 2001
From: Sn-Kinos <dony435@naver.com>
Date: Sun, 9 Jun 2024 21:03:45 +0900
Subject: [PATCH 4/9] fix lint error (double-quotes, unknown property)

---
 .../src/components/youtube_video/youtube_video.tsx         | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/webapp/channels/src/components/youtube_video/youtube_video.tsx b/webapp/channels/src/components/youtube_video/youtube_video.tsx
index 018126782b215..8108544e13ace 100644
--- a/webapp/channels/src/components/youtube_video/youtube_video.tsx
+++ b/webapp/channels/src/components/youtube_video/youtube_video.tsx
@@ -76,11 +76,10 @@ export default class YoutubeVideo extends React.PureComponent<Props, State> {
                     height='360px'
                     frameBorder='0'
                     allowFullScreen={true}
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-                    referrerPolicy="strict-origin-when-cross-origin"
+                    allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+                    referrerPolicy='strict-origin-when-cross-origin'
                     title={videoTitle}
-                    sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"
-                    credentialless="true"
+                    sandbox='allow-scripts allow-same-origin allow-popups allow-presentation'
                 />
             );
         } else {

From 59ea2e1c07816208f40d46dafa4cfa915fabfa30 Mon Sep 17 00:00:00 2001
From: Sn-Kinos <dony435@naver.com>
Date: Sun, 9 Jun 2024 21:23:41 +0900
Subject: [PATCH 5/9] renew snapshot for youtube_video.tsx

---
 .../__snapshots__/youtube_video.test.tsx.snap             | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap b/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
index 7d836faf7adf9..b1f448020de08 100644
--- a/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
+++ b/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`YoutubeVideo should match init snapshot 1`] = `
           <span
             className="video-type"
           >
-            YouTube - 
+            YouTube -
           </span>
           <span
             className="video-title"
@@ -113,7 +113,7 @@ exports[`YoutubeVideo should match snapshot for playing state 1`] = `
       <span
         className="video-type"
       >
-        YouTube - 
+        YouTube -
       </span>
       <span
         className="video-title"
@@ -131,10 +131,14 @@ exports[`YoutubeVideo should match snapshot for playing state 1`] = `
       onClick={[Function]}
     >
       <iframe
+        allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
         allowFullScreen={true}
         frameBorder="0"
         height="360px"
+        referrerPolicy='strict-origin-when-cross-origin'
+        sandbox='allow-scripts allow-same-origin allow-popups allow-presentation'
         src="https://www.youtube.com/embed/xqCoNej8Zxo?autoplay=1&autohide=1&border=0&wmode=opaque&fs=1&enablejsapi=1"
+        title="Youtube title"
         width="480px"
       />
     </div>

From 3cc4e72f7fbdd31f1a50376979cc0c2625a351f8 Mon Sep 17 00:00:00 2001
From: Sn-Kinos <dony435@naver.com>
Date: Sun, 9 Jun 2024 21:57:15 +0900
Subject: [PATCH 6/9] fix double quotes and newline error on snapshot for
 youtube_video.tsx

---
 .../__snapshots__/youtube_video.test.tsx.snap             | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap b/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
index b1f448020de08..6ab7c70dcad9d 100644
--- a/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
+++ b/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
@@ -113,7 +113,7 @@ exports[`YoutubeVideo should match snapshot for playing state 1`] = `
       <span
         className="video-type"
       >
-        YouTube -
+        YouTube - 
       </span>
       <span
         className="video-title"
@@ -131,12 +131,12 @@ exports[`YoutubeVideo should match snapshot for playing state 1`] = `
       onClick={[Function]}
     >
       <iframe
-        allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share'
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
         allowFullScreen={true}
         frameBorder="0"
         height="360px"
-        referrerPolicy='strict-origin-when-cross-origin'
-        sandbox='allow-scripts allow-same-origin allow-popups allow-presentation'
+        referrerPolicy="strict-origin-when-cross-origin"
+        sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"
         src="https://www.youtube.com/embed/xqCoNej8Zxo?autoplay=1&autohide=1&border=0&wmode=opaque&fs=1&enablejsapi=1"
         title="Youtube title"
         width="480px"

From ba2cb8c6ad06a74c1566fcd06705b888382fc56f Mon Sep 17 00:00:00 2001
From: Sn-Kinos <dony435@naver.com>
Date: Sun, 9 Jun 2024 23:17:39 +0900
Subject: [PATCH 7/9] fix blank on snapshot for youtube_video.tsx

---
 .../youtube_video/__snapshots__/youtube_video.test.tsx.snap     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap b/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
index 6ab7c70dcad9d..45d02bd8dfc36 100644
--- a/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
+++ b/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`YoutubeVideo should match init snapshot 1`] = `
           <span
             className="video-type"
           >
-            YouTube -
+            YouTube - 
           </span>
           <span
             className="video-title"

From b5fb7a4076ef73774a0e50157f371516b9d383b2 Mon Sep 17 00:00:00 2001
From: Sn-Kinos <dony435@naver.com>
Date: Fri, 14 Jun 2024 00:12:22 +0900
Subject: [PATCH 8/9] Add YouTube Shorts Embed Preview

---
 .../__snapshots__/youtube_video.test.tsx.snap | 205 ++++++++++++++++++
 .../youtube_video/youtube_video.test.tsx      |  22 ++
 .../youtube_video/youtube_video.tsx           |  36 ++-
 .../channels/src/sass/components/_videos.scss |  45 ++++
 webapp/channels/src/utils/youtube.ts          |   6 +-
 5 files changed, 307 insertions(+), 7 deletions(-)

diff --git a/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap b/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
index 45d02bd8dfc36..2da02f38f24dc 100644
--- a/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
+++ b/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
@@ -1,5 +1,168 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`YoutubeVideo should match init snapshot (Shorts) 1`] = `
+<Provider
+  store={
+    Object {
+      "clearActions": [Function],
+      "dispatch": [Function],
+      "getActions": [Function],
+      "getState": [Function],
+      "replaceReducer": [Function],
+      "subscribe": [Function],
+    }
+  }
+>
+  <YoutubeVideo
+    googleDeveloperKey="googledevkey"
+    hasImageProxy={false}
+    link="https://www.youtube.com/shorts/2oa5WCUpwD8"
+    metadata={
+      Object {
+        "images": Array [
+          Object {
+            "secure_url": "linkForThumbnail",
+            "url": "linkForThumbnail",
+          },
+        ],
+        "title": "Youtube title",
+      }
+    }
+    postId="post_id_1"
+    show={true}
+  >
+    <div
+      className="post__embed-container"
+    >
+      <div>
+        <h4>
+          <span
+            className="video-type"
+          >
+            YouTube Shorts - 
+          </span>
+          <span
+            className="video-title"
+          >
+            <ExternalLink
+              href="https://www.youtube.com/shorts/2oa5WCUpwD8"
+              location="youtube_video"
+            >
+              <a
+                href="https://www.youtube.com/shorts/2oa5WCUpwD8"
+                location="youtube_video"
+                onClick={[Function]}
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                Youtube title
+              </a>
+            </ExternalLink>
+          </span>
+          <WithTooltip
+            id="post_id_1_expand_shorts"
+            placement="right"
+            title="Expand Horizontally"
+          >
+            <OverlayTrigger
+              defaultOverlayShown={false}
+              delay={400}
+              overlay={<Unknown />}
+              placement="right"
+              trigger={
+                Array [
+                  "hover",
+                  "focus",
+                ]
+              }
+            >
+              <OverlayTrigger
+                defaultOverlayShown={false}
+                delay={400}
+                overlay={
+                  <OverlayWrapper
+                    intl={null}
+                  />
+                }
+                placement="right"
+                trigger={
+                  Array [
+                    "hover",
+                    "focus",
+                  ]
+                }
+              >
+                <i
+                  className="video-expand-shorts"
+                  onBlur={[Function]}
+                  onClick={[Function]}
+                  onFocus={[Function]}
+                  onMouseOut={[Function]}
+                  onMouseOver={[Function]}
+                >
+                  <ArrowExpandIcon>
+                    <svg
+                      fill="currentColor"
+                      height="1em"
+                      version="1.1"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z"
+                      />
+                    </svg>
+                  </ArrowExpandIcon>
+                </i>
+              </OverlayTrigger>
+            </OverlayTrigger>
+          </WithTooltip>
+        </h4>
+        <div
+          className="video-div embed-responsive-item video-shorts-div"
+          onClick={[Function]}
+        >
+          <div
+            className="embed-responsive video-div__placeholder"
+          >
+            <div
+              className="video-thumbnail__container"
+            >
+              <Connect(Component)
+                src="linkForThumbnail"
+              >
+                <Memo(ExternalImage)
+                  dispatch={[Function]}
+                  enableSVGs={false}
+                  hasImageProxy={false}
+                  src="linkForThumbnail"
+                >
+                  <img
+                    alt="youtube video thumbnail"
+                    className="video-thumbnail"
+                    src="linkForThumbnail"
+                  />
+                </Memo(ExternalImage)>
+              </Connect(Component)>
+              <div
+                className="block"
+              >
+                <span
+                  className="play-button"
+                >
+                  <span />
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </YoutubeVideo>
+</Provider>
+`;
+
 exports[`YoutubeVideo should match init snapshot 1`] = `
 <Provider
   store={
@@ -104,6 +267,48 @@ exports[`YoutubeVideo should match init snapshot 1`] = `
 </Provider>
 `;
 
+exports[`YoutubeVideo should match snapshot for playing state (Shorts) 1`] = `
+<div
+  className="post__embed-container"
+>
+  <div>
+    <h4>
+      <span
+        className="video-type"
+      >
+        YouTube - 
+      </span>
+      <span
+        className="video-title"
+      >
+        <ExternalLink
+          href="https://www.youtube.com/watch?v=xqCoNej8Zxo"
+          location="youtube_video"
+        >
+          Youtube title
+        </ExternalLink>
+      </span>
+    </h4>
+    <div
+      className="video-div embed-responsive-item"
+      onClick={[Function]}
+    >
+      <iframe
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        allowFullScreen={true}
+        frameBorder="0"
+        height="360px"
+        referrerPolicy="strict-origin-when-cross-origin"
+        sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"
+        src="https://www.youtube.com/embed/xqCoNej8Zxo?autoplay=1&autohide=1&border=0&wmode=opaque&fs=1&enablejsapi=1"
+        title="Youtube title"
+        width="480px"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`YoutubeVideo should match snapshot for playing state 1`] = `
 <div
   className="post__embed-container"
diff --git a/webapp/channels/src/components/youtube_video/youtube_video.test.tsx b/webapp/channels/src/components/youtube_video/youtube_video.test.tsx
index 2ef6552b19ac6..b5a1d3b0b1258 100644
--- a/webapp/channels/src/components/youtube_video/youtube_video.test.tsx
+++ b/webapp/channels/src/components/youtube_video/youtube_video.test.tsx
@@ -79,4 +79,26 @@ describe('YoutubeVideo', () => {
 
         expect(wrapper.find(ExternalImage).prop('src')).toEqual('linkUrl');
     });
+
+    test('should match init snapshot (Shorts)', () => {
+        const store = mockStore(initialState);
+        const props = {
+            ...baseProps,
+            link: 'https://www.youtube.com/shorts/2oa5WCUpwD8',
+        };
+        const wrapper = mount(
+            <Provider store={store}>
+                <YoutubeVideo {...props}/>
+            </Provider>,
+        );
+        expect(wrapper).toMatchSnapshot();
+        expect(wrapper.find(ExternalImage).prop('src')).toEqual('linkForThumbnail');
+        expect(wrapper.find('a').text()).toEqual('Youtube title');
+    });
+
+    test('should match snapshot for playing state (Shorts)', () => {
+        const wrapper = shallow(<YoutubeVideo {...baseProps}/>);
+        wrapper.setState({playing: true});
+        expect(wrapper).toMatchSnapshot();
+    });
 });
diff --git a/webapp/channels/src/components/youtube_video/youtube_video.tsx b/webapp/channels/src/components/youtube_video/youtube_video.tsx
index 8108544e13ace..ec017e7570a23 100644
--- a/webapp/channels/src/components/youtube_video/youtube_video.tsx
+++ b/webapp/channels/src/components/youtube_video/youtube_video.tsx
@@ -1,14 +1,17 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
+import cn from 'classnames';
 import React from 'react';
 
+import {ArrowCollapseIcon, ArrowExpandIcon} from '@mattermost/compass-icons/components';
 import type {OpenGraphMetadata} from '@mattermost/types/posts';
 
 import ExternalImage from 'components/external_image';
 import ExternalLink from 'components/external_link';
+import WithTooltip from 'components/with_tooltip';
 
-import {getVideoId, ytRegex, handleYoutubeTime} from 'utils/youtube';
+import {getIsShortsVideoLink, getVideoId, handleYoutubeTime, ytRegex} from 'utils/youtube';
 
 type Props = {
     postId: string;
@@ -19,6 +22,7 @@ type Props = {
 
 type State = {
     playing: boolean;
+    shortsExpanded: boolean;
 }
 
 export default class YoutubeVideo extends React.PureComponent<Props, State> {
@@ -27,34 +31,40 @@ export default class YoutubeVideo extends React.PureComponent<Props, State> {
 
         this.state = {
             playing: false,
+            shortsExpanded: false,
         };
     }
 
     static getDerivedStateFromProps(props: Props, state: State): State | null {
         if (!props.show && state.playing) {
-            return {playing: false};
+            return {playing: false, shortsExpanded: false};
         }
         return null;
     }
 
     play = () => {
-        this.setState({playing: true});
+        this.setState({...this.state, playing: true});
     };
 
     stop = () => {
-        this.setState({playing: false});
+        this.setState({...this.state, playing: false});
+    };
+
+    toggleExpandShorts = () => {
+        this.setState({...this.state, shortsExpanded: !this.state.shortsExpanded});
     };
 
     render() {
         const {metadata, link} = this.props;
 
         const videoId = getVideoId(link);
+        const isShorts = getIsShortsVideoLink(link);
         const videoTitle = metadata?.title || 'unknown';
         const time = handleYoutubeTime(link);
 
         const header = (
             <h4>
-                <span className='video-type'>{'YouTube - '}</span>
+                <span className='video-type'>{`YouTube ${isShorts ? 'Shorts ' : ''}- `}</span>
                 <span className='video-title'>
                     <ExternalLink
                         href={this.props.link}
@@ -63,6 +73,20 @@ export default class YoutubeVideo extends React.PureComponent<Props, State> {
                         {videoTitle}
                     </ExternalLink>
                 </span>
+                {isShorts && (
+                    <WithTooltip
+                        id={`${this.props.postId}_expand_shorts`}
+                        title={this.state.shortsExpanded ? 'Shrink' : 'Expand Horizontally'}
+                        placement='right'
+                    >
+                        <i
+                            className='video-expand-shorts'
+                            onClick={this.toggleExpandShorts}
+                        >
+                            {this.state.shortsExpanded ? <ArrowCollapseIcon/> : <ArrowExpandIcon/>}
+                        </i>
+                    </WithTooltip>
+                )}
             </h4>
         );
 
@@ -112,7 +136,7 @@ export default class YoutubeVideo extends React.PureComponent<Props, State> {
                 <div>
                     {header}
                     <div
-                        className='video-div embed-responsive-item'
+                        className={cn('video-div', 'embed-responsive-item', this.state.shortsExpanded ? 'video-shorts-expanded' : (isShorts && 'video-shorts-div'))}
                         onClick={this.play}
                     >
                         {content}
diff --git a/webapp/channels/src/sass/components/_videos.scss b/webapp/channels/src/sass/components/_videos.scss
index 6d9ac35dedc5f..0cbc56c96a365 100644
--- a/webapp/channels/src/sass/components/_videos.scss
+++ b/webapp/channels/src/sass/components/_videos.scss
@@ -31,6 +31,36 @@
             margin: -75px 0 0 -100px;
             background-color: alpha-color($black, 0.5);
         }
+
+        &.video-shorts-div {
+            max-width: calc(360px * 560 / 995);
+
+            .block {
+                width: 150px;
+                height: 112px;
+                margin: -56px 0 0 -75px;
+            }
+
+            .play-button {
+                top: 21px;
+                right: 40px;
+                width: 70px;
+                height: 70px;
+                border-radius: 10px;
+
+                span {
+                    top: 7px;
+                    left: 13.75px;
+                    border-top: 24px solid transparent;
+                    border-bottom: 24px solid transparent;
+                    border-left: 40px solid alpha-color($white, 0.4);
+                }
+            }
+        }
+
+        &.video-shorts-expanded {
+            max-width: 405px;
+        }
     }
 
     .video-type {
@@ -45,6 +75,21 @@
         font-size: 15px;
     }
 
+    .video-expand-shorts {
+        padding: 0;
+        margin: 0;
+        margin-left: 6px;
+        display: inline-block;
+        font-size: 15px;
+        opacity: 0.8;
+        cursor: pointer;
+
+        svg {
+            margin-bottom: -2px;
+            transform: rotate(45deg);
+        }
+    }
+
     .play-button {
         position: absolute;
         top: 26px;
diff --git a/webapp/channels/src/utils/youtube.ts b/webapp/channels/src/utils/youtube.ts
index 80e235b19a5a1..a3dac808e5137 100644
--- a/webapp/channels/src/utils/youtube.ts
+++ b/webapp/channels/src/utils/youtube.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-export const ytRegex = /(?:http|https):\/\/(?:www\.|m\.)?(?:(?:youtube\.com\/(?:(?:v\/)|(?:(?:watch|embed\/watch)(?:\/|.*v=))|(?:embed\/)|(?:user\/[^/]+\/u\/[0-9]\/)))|(?:youtu\.be\/))([^#&?]*)/;
+export const ytRegex = /(?:http|https):\/\/(?:www\.|m\.)?(?:(?:youtube\.com\/(?:(?:v\/)|(?:(?:watch|embed\/watch)(?:\/|.*v=))|(?:embed\/)|(?:shorts\/)|(?:user\/[^/]+\/u\/[0-9]\/)))|(?:youtu\.be\/))([^#&?]*)/;
 
 export function handleYoutubeTime(link: string) {
     const timeRegex = /[\\?&](t|time|start|time_continue)=([0-9]+h)?([0-9]+m)?([0-9]+s?)/;
@@ -40,3 +40,7 @@ export function getVideoId(link: string) {
 
     return match[1];
 }
+
+export function getIsShortsVideoLink(link: string) {
+    return link.includes('/shorts/');
+}

From 8f24ebf03b0809da387062daf2ed70a22c273482 Mon Sep 17 00:00:00 2001
From: Sn-Kinos <dony435@naver.com>
Date: Wed, 19 Jun 2024 19:02:58 +0900
Subject: [PATCH 9/9] Revert "Add YouTube Shorts Embed Preview"

This reverts commit b5fb7a4076ef73774a0e50157f371516b9d383b2.
---
 .../__snapshots__/youtube_video.test.tsx.snap | 205 ------------------
 .../youtube_video/youtube_video.test.tsx      |  22 --
 .../youtube_video/youtube_video.tsx           |  36 +--
 .../channels/src/sass/components/_videos.scss |  45 ----
 webapp/channels/src/utils/youtube.ts          |   6 +-
 5 files changed, 7 insertions(+), 307 deletions(-)

diff --git a/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap b/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
index 2da02f38f24dc..45d02bd8dfc36 100644
--- a/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
+++ b/webapp/channels/src/components/youtube_video/__snapshots__/youtube_video.test.tsx.snap
@@ -1,168 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`YoutubeVideo should match init snapshot (Shorts) 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <YoutubeVideo
-    googleDeveloperKey="googledevkey"
-    hasImageProxy={false}
-    link="https://www.youtube.com/shorts/2oa5WCUpwD8"
-    metadata={
-      Object {
-        "images": Array [
-          Object {
-            "secure_url": "linkForThumbnail",
-            "url": "linkForThumbnail",
-          },
-        ],
-        "title": "Youtube title",
-      }
-    }
-    postId="post_id_1"
-    show={true}
-  >
-    <div
-      className="post__embed-container"
-    >
-      <div>
-        <h4>
-          <span
-            className="video-type"
-          >
-            YouTube Shorts - 
-          </span>
-          <span
-            className="video-title"
-          >
-            <ExternalLink
-              href="https://www.youtube.com/shorts/2oa5WCUpwD8"
-              location="youtube_video"
-            >
-              <a
-                href="https://www.youtube.com/shorts/2oa5WCUpwD8"
-                location="youtube_video"
-                onClick={[Function]}
-                rel="noopener noreferrer"
-                target="_blank"
-              >
-                Youtube title
-              </a>
-            </ExternalLink>
-          </span>
-          <WithTooltip
-            id="post_id_1_expand_shorts"
-            placement="right"
-            title="Expand Horizontally"
-          >
-            <OverlayTrigger
-              defaultOverlayShown={false}
-              delay={400}
-              overlay={<Unknown />}
-              placement="right"
-              trigger={
-                Array [
-                  "hover",
-                  "focus",
-                ]
-              }
-            >
-              <OverlayTrigger
-                defaultOverlayShown={false}
-                delay={400}
-                overlay={
-                  <OverlayWrapper
-                    intl={null}
-                  />
-                }
-                placement="right"
-                trigger={
-                  Array [
-                    "hover",
-                    "focus",
-                  ]
-                }
-              >
-                <i
-                  className="video-expand-shorts"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onMouseOut={[Function]}
-                  onMouseOver={[Function]}
-                >
-                  <ArrowExpandIcon>
-                    <svg
-                      fill="currentColor"
-                      height="1em"
-                      version="1.1"
-                      viewBox="0 0 24 24"
-                      width="1em"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M10,21V19H6.41L10.91,14.5L9.5,13.09L5,17.59V14H3V21H10M14.5,10.91L19,6.41V10H21V3H14V5H17.59L13.09,9.5L14.5,10.91Z"
-                      />
-                    </svg>
-                  </ArrowExpandIcon>
-                </i>
-              </OverlayTrigger>
-            </OverlayTrigger>
-          </WithTooltip>
-        </h4>
-        <div
-          className="video-div embed-responsive-item video-shorts-div"
-          onClick={[Function]}
-        >
-          <div
-            className="embed-responsive video-div__placeholder"
-          >
-            <div
-              className="video-thumbnail__container"
-            >
-              <Connect(Component)
-                src="linkForThumbnail"
-              >
-                <Memo(ExternalImage)
-                  dispatch={[Function]}
-                  enableSVGs={false}
-                  hasImageProxy={false}
-                  src="linkForThumbnail"
-                >
-                  <img
-                    alt="youtube video thumbnail"
-                    className="video-thumbnail"
-                    src="linkForThumbnail"
-                  />
-                </Memo(ExternalImage)>
-              </Connect(Component)>
-              <div
-                className="block"
-              >
-                <span
-                  className="play-button"
-                >
-                  <span />
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </YoutubeVideo>
-</Provider>
-`;
-
 exports[`YoutubeVideo should match init snapshot 1`] = `
 <Provider
   store={
@@ -267,48 +104,6 @@ exports[`YoutubeVideo should match init snapshot 1`] = `
 </Provider>
 `;
 
-exports[`YoutubeVideo should match snapshot for playing state (Shorts) 1`] = `
-<div
-  className="post__embed-container"
->
-  <div>
-    <h4>
-      <span
-        className="video-type"
-      >
-        YouTube - 
-      </span>
-      <span
-        className="video-title"
-      >
-        <ExternalLink
-          href="https://www.youtube.com/watch?v=xqCoNej8Zxo"
-          location="youtube_video"
-        >
-          Youtube title
-        </ExternalLink>
-      </span>
-    </h4>
-    <div
-      className="video-div embed-responsive-item"
-      onClick={[Function]}
-    >
-      <iframe
-        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-        allowFullScreen={true}
-        frameBorder="0"
-        height="360px"
-        referrerPolicy="strict-origin-when-cross-origin"
-        sandbox="allow-scripts allow-same-origin allow-popups allow-presentation"
-        src="https://www.youtube.com/embed/xqCoNej8Zxo?autoplay=1&autohide=1&border=0&wmode=opaque&fs=1&enablejsapi=1"
-        title="Youtube title"
-        width="480px"
-      />
-    </div>
-  </div>
-</div>
-`;
-
 exports[`YoutubeVideo should match snapshot for playing state 1`] = `
 <div
   className="post__embed-container"
diff --git a/webapp/channels/src/components/youtube_video/youtube_video.test.tsx b/webapp/channels/src/components/youtube_video/youtube_video.test.tsx
index b5a1d3b0b1258..2ef6552b19ac6 100644
--- a/webapp/channels/src/components/youtube_video/youtube_video.test.tsx
+++ b/webapp/channels/src/components/youtube_video/youtube_video.test.tsx
@@ -79,26 +79,4 @@ describe('YoutubeVideo', () => {
 
         expect(wrapper.find(ExternalImage).prop('src')).toEqual('linkUrl');
     });
-
-    test('should match init snapshot (Shorts)', () => {
-        const store = mockStore(initialState);
-        const props = {
-            ...baseProps,
-            link: 'https://www.youtube.com/shorts/2oa5WCUpwD8',
-        };
-        const wrapper = mount(
-            <Provider store={store}>
-                <YoutubeVideo {...props}/>
-            </Provider>,
-        );
-        expect(wrapper).toMatchSnapshot();
-        expect(wrapper.find(ExternalImage).prop('src')).toEqual('linkForThumbnail');
-        expect(wrapper.find('a').text()).toEqual('Youtube title');
-    });
-
-    test('should match snapshot for playing state (Shorts)', () => {
-        const wrapper = shallow(<YoutubeVideo {...baseProps}/>);
-        wrapper.setState({playing: true});
-        expect(wrapper).toMatchSnapshot();
-    });
 });
diff --git a/webapp/channels/src/components/youtube_video/youtube_video.tsx b/webapp/channels/src/components/youtube_video/youtube_video.tsx
index ec017e7570a23..8108544e13ace 100644
--- a/webapp/channels/src/components/youtube_video/youtube_video.tsx
+++ b/webapp/channels/src/components/youtube_video/youtube_video.tsx
@@ -1,17 +1,14 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-import cn from 'classnames';
 import React from 'react';
 
-import {ArrowCollapseIcon, ArrowExpandIcon} from '@mattermost/compass-icons/components';
 import type {OpenGraphMetadata} from '@mattermost/types/posts';
 
 import ExternalImage from 'components/external_image';
 import ExternalLink from 'components/external_link';
-import WithTooltip from 'components/with_tooltip';
 
-import {getIsShortsVideoLink, getVideoId, handleYoutubeTime, ytRegex} from 'utils/youtube';
+import {getVideoId, ytRegex, handleYoutubeTime} from 'utils/youtube';
 
 type Props = {
     postId: string;
@@ -22,7 +19,6 @@ type Props = {
 
 type State = {
     playing: boolean;
-    shortsExpanded: boolean;
 }
 
 export default class YoutubeVideo extends React.PureComponent<Props, State> {
@@ -31,40 +27,34 @@ export default class YoutubeVideo extends React.PureComponent<Props, State> {
 
         this.state = {
             playing: false,
-            shortsExpanded: false,
         };
     }
 
     static getDerivedStateFromProps(props: Props, state: State): State | null {
         if (!props.show && state.playing) {
-            return {playing: false, shortsExpanded: false};
+            return {playing: false};
         }
         return null;
     }
 
     play = () => {
-        this.setState({...this.state, playing: true});
+        this.setState({playing: true});
     };
 
     stop = () => {
-        this.setState({...this.state, playing: false});
-    };
-
-    toggleExpandShorts = () => {
-        this.setState({...this.state, shortsExpanded: !this.state.shortsExpanded});
+        this.setState({playing: false});
     };
 
     render() {
         const {metadata, link} = this.props;
 
         const videoId = getVideoId(link);
-        const isShorts = getIsShortsVideoLink(link);
         const videoTitle = metadata?.title || 'unknown';
         const time = handleYoutubeTime(link);
 
         const header = (
             <h4>
-                <span className='video-type'>{`YouTube ${isShorts ? 'Shorts ' : ''}- `}</span>
+                <span className='video-type'>{'YouTube - '}</span>
                 <span className='video-title'>
                     <ExternalLink
                         href={this.props.link}
@@ -73,20 +63,6 @@ export default class YoutubeVideo extends React.PureComponent<Props, State> {
                         {videoTitle}
                     </ExternalLink>
                 </span>
-                {isShorts && (
-                    <WithTooltip
-                        id={`${this.props.postId}_expand_shorts`}
-                        title={this.state.shortsExpanded ? 'Shrink' : 'Expand Horizontally'}
-                        placement='right'
-                    >
-                        <i
-                            className='video-expand-shorts'
-                            onClick={this.toggleExpandShorts}
-                        >
-                            {this.state.shortsExpanded ? <ArrowCollapseIcon/> : <ArrowExpandIcon/>}
-                        </i>
-                    </WithTooltip>
-                )}
             </h4>
         );
 
@@ -136,7 +112,7 @@ export default class YoutubeVideo extends React.PureComponent<Props, State> {
                 <div>
                     {header}
                     <div
-                        className={cn('video-div', 'embed-responsive-item', this.state.shortsExpanded ? 'video-shorts-expanded' : (isShorts && 'video-shorts-div'))}
+                        className='video-div embed-responsive-item'
                         onClick={this.play}
                     >
                         {content}
diff --git a/webapp/channels/src/sass/components/_videos.scss b/webapp/channels/src/sass/components/_videos.scss
index 0cbc56c96a365..6d9ac35dedc5f 100644
--- a/webapp/channels/src/sass/components/_videos.scss
+++ b/webapp/channels/src/sass/components/_videos.scss
@@ -31,36 +31,6 @@
             margin: -75px 0 0 -100px;
             background-color: alpha-color($black, 0.5);
         }
-
-        &.video-shorts-div {
-            max-width: calc(360px * 560 / 995);
-
-            .block {
-                width: 150px;
-                height: 112px;
-                margin: -56px 0 0 -75px;
-            }
-
-            .play-button {
-                top: 21px;
-                right: 40px;
-                width: 70px;
-                height: 70px;
-                border-radius: 10px;
-
-                span {
-                    top: 7px;
-                    left: 13.75px;
-                    border-top: 24px solid transparent;
-                    border-bottom: 24px solid transparent;
-                    border-left: 40px solid alpha-color($white, 0.4);
-                }
-            }
-        }
-
-        &.video-shorts-expanded {
-            max-width: 405px;
-        }
     }
 
     .video-type {
@@ -75,21 +45,6 @@
         font-size: 15px;
     }
 
-    .video-expand-shorts {
-        padding: 0;
-        margin: 0;
-        margin-left: 6px;
-        display: inline-block;
-        font-size: 15px;
-        opacity: 0.8;
-        cursor: pointer;
-
-        svg {
-            margin-bottom: -2px;
-            transform: rotate(45deg);
-        }
-    }
-
     .play-button {
         position: absolute;
         top: 26px;
diff --git a/webapp/channels/src/utils/youtube.ts b/webapp/channels/src/utils/youtube.ts
index a3dac808e5137..80e235b19a5a1 100644
--- a/webapp/channels/src/utils/youtube.ts
+++ b/webapp/channels/src/utils/youtube.ts
@@ -1,7 +1,7 @@
 // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
 // See LICENSE.txt for license information.
 
-export const ytRegex = /(?:http|https):\/\/(?:www\.|m\.)?(?:(?:youtube\.com\/(?:(?:v\/)|(?:(?:watch|embed\/watch)(?:\/|.*v=))|(?:embed\/)|(?:shorts\/)|(?:user\/[^/]+\/u\/[0-9]\/)))|(?:youtu\.be\/))([^#&?]*)/;
+export const ytRegex = /(?:http|https):\/\/(?:www\.|m\.)?(?:(?:youtube\.com\/(?:(?:v\/)|(?:(?:watch|embed\/watch)(?:\/|.*v=))|(?:embed\/)|(?:user\/[^/]+\/u\/[0-9]\/)))|(?:youtu\.be\/))([^#&?]*)/;
 
 export function handleYoutubeTime(link: string) {
     const timeRegex = /[\\?&](t|time|start|time_continue)=([0-9]+h)?([0-9]+m)?([0-9]+s?)/;
@@ -40,7 +40,3 @@ export function getVideoId(link: string) {
 
     return match[1];
 }
-
-export function getIsShortsVideoLink(link: string) {
-    return link.includes('/shorts/');
-}