@meduza/ui-kit-2 1.0.0 → 1.0.2

package/dist/ui-kit-game.css

@@ -2590,6 +2590,10 @@
   height: 100%;
 }
 
+.EmbedBlock-module_proportional__zDPfm .EmbedBlock-module_isDefaultVideo__UTW9Q video {
+  position: static;
+}
+
 .EmbedBlock-module_objectWrap__qpbni img,
 .EmbedBlock-module_objectWrap__qpbni video {
   width: 100%;

package/dist/ui-kit.css

@@ -2590,6 +2590,10 @@
   height: 100%;
 }
 
+.EmbedBlock-module_proportional__zDPfm .EmbedBlock-module_isDefaultVideo__UTW9Q video {
+  position: static;
+}
+
 .EmbedBlock-module_objectWrap__qpbni img,
 .EmbedBlock-module_objectWrap__qpbni video {
   width: 100%;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0",
+  "version": "1.0.2",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",
@@ -15,17 +15,6 @@
   "engines": {
     "node": ">=16"
   },
-  "scripts": {
-    "start": "dts watch --tsconfig ./tsconfig.build.json --mode development",
-    "build": "dts build --tsconfig ./tsconfig.build.json --mode production && node build.sh",
-    "generate": "plop --plopfile generators/index.js",
-    "test": "dts test --passWithNoTests",
-    "test:watch": "dts test --watch",
-    "test:coverage": "dts test --coverage",
-    "lint": "eslint src",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
-  },
   "peerDependencies": {
     "dayjs": "^1.10.3",
     "react": ">=16",
@@ -125,5 +114,16 @@
     "typescript": "^5.1.6",
     "typescript-plugin-css-modules": "^5.0.1",
     "utils": "^0.3.1"
+  },
+  "scripts": {
+    "start": "dts watch --tsconfig ./tsconfig.build.json --mode development",
+    "build": "dts build --tsconfig ./tsconfig.build.json --mode production && node build.sh",
+    "generate": "plop --plopfile generators/index.js",
+    "test": "dts test --passWithNoTests",
+    "test:watch": "dts test --watch",
+    "test:coverage": "dts test --coverage",
+    "lint": "eslint src",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   }
-}
+}

package/src/EmbedBlock/EmbedBlock.module.css

@@ -65,6 +65,10 @@
   height: 100%;
 }
 
+.proportional .isDefaultVideo video {
+  position: static;
+}
+
 .objectWrap img,
 .objectWrap video {
   width: 100%;

package/src/EmbedBlock/EmbedBlock.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/media-has-caption */
 import React, { useState } from 'react'
 import { Image } from '../Image'
 import { Popover } from '../Popover'
@@ -25,11 +26,13 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
       small_url: small,
       large_url: large,
       gif_url: gifUrl,
-      mp4_url: mp4Url
+      mp4_url: mp4Url,
+      video_file_path: videoFileUrl
     }
   },
   styleContext,
-  children
+  children,
+  platform
 }) => {
   const [isPopoverShown, setIsPopoverShown] = useState(false)
   const style: React.CSSProperties = {}
@@ -96,6 +99,20 @@ export const EmbedBlock: React.FC<EmbedBlockProps> = ({
       }
 
       default: {
+        if (platform === 'mirror' && videoFileUrl) {
+          return (
+            <div className={styles.object}>
+              <div
+                className={makeClassName([
+                  [styles.objectWrap, true],
+                  [styles.isDefaultVideo, true]
+                ])}
+              >
+                <video src={videoFileUrl} controls />
+              </div>
+            </div>
+          )
+        }
         return (
           <div className={styles.object}>
             <div

package/src/EmbedBlock/EmbedBlock.types.ts

@@ -11,4 +11,5 @@ export interface EmbedBlockProps {
   styleContext?: string[] | string
   lang?: 'ru' | 'en'
   children?: React.ReactNode
+  platform?: 'website' | 'mirror'
 }

package/src/EmbedBlock/index.tsx

@@ -6,10 +6,13 @@ import { IframeBlock } from './IframeBlock'
 export const EmbedBlockContainer: React.FC<EmbedBlockProps> = ({
   block,
   styleContext,
-  lang
+  lang,
+  platform
 }) => {
   if (block.data && block.data.wrap_with_iframe) {
     return <IframeBlock block={block} styleContext={styleContext} lang={lang} />
   }
-  return <EmbedBlock block={block} styleContext={styleContext} />
+  return (
+    <EmbedBlock block={block} styleContext={styleContext} platform={platform} />
+  )
 }

package/src/RawHtmlBlock/RawHtmlBlock.types.ts

@@ -17,4 +17,5 @@ export interface RawHtmlBlockProps {
   bookmarkAction?: (service: CallToActions, place: string) => void
   lightBox?: LightboxContext | null | undefined
   lang?: 'ru' | 'en'
+  platform?: 'website' | 'mirror'
 }

package/src/RawHtmlBlock/index.tsx

@@ -18,7 +18,8 @@ export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
   isInBookmarks,
   bookmarkAction,
   lightBox,
-  lang
+  lang,
+  platform
 }) => {
   const context = {
     lightBox: lightBox || null
@@ -68,6 +69,7 @@ export const RawHtmlBlock: React.FC<RawHtmlBlockProps> = ({
             isInBookmarks={isInBookmarks}
             bookmarkAction={bookmarkAction}
             lang={lang}
+            platform={platform}
           />
         </BlockProvider>
       )

package/src/RenderBlocks/RenderBlocks.types.ts

@@ -10,4 +10,5 @@ export interface RenderBlocksProps {
   bookmarkAction?: (service: CallToActions, place: string) => void
   lightBox?: LightboxContext | null | undefined
   lang?: 'ru' | 'en'
+  platform?: 'website' | 'mirror'
 }

package/src/RenderBlocks/index.tsx

@@ -27,7 +27,8 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
   isRead,
   isListened,
   bookmarkAction,
-  isInBookmarks
+  isInBookmarks,
+  platform
 }) => {
   switch (block.type) {
     case 'tag': {
@@ -129,6 +130,7 @@ export const RenderBlocks: React.FC<RenderBlocksProps> = ({
           block={block}
           styleContext={styleContext}
           lang={lang}
+          platform={platform}
         />
       )
     case 'grouped':