From 3393f5a9523474b14e868fd1174900bac2c333d7 Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <max.slipenko@gmail.com>
Date: Fri, 11 Feb 2022 15:38:16 +0300
Subject: [PATCH 01/13] fix netlify component

---
 src/NetlifyForm/NetlifyForm.js | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/NetlifyForm/NetlifyForm.js b/src/NetlifyForm/NetlifyForm.js
index 197ced2a..f71bb0c7 100644
--- a/src/NetlifyForm/NetlifyForm.js
+++ b/src/NetlifyForm/NetlifyForm.js
@@ -4,6 +4,8 @@ import { Box, Text, Input } from '@quarkly/widgets';
 import { useOverrides } from '@quarkly/components';
 import { overrides, propInfo, defaultProps } from './props';
 import { useForm, withForm } from '../Form/context';
+import ComponentNotice from '../ComponentNotice';
+import { isEmptyChildren } from '../utils';
 
 const Form = atomize.form();
 
@@ -66,6 +68,9 @@ const NetlifyForm = ({ formName, successMessage, errorMessage, ...props }) => {
                         defaultValue={formName}
                     />
                     {children}
+                    {isEmptyChildren(children) && (
+                        <ComponentNotice message="Drag Input, Textarea, Checkbox or RadioGroup component here" />
+                    )}
                     {error && (
                         <Text {...override('Text', 'Error Text')}>
                             {errorMessage}

From 5f318a82d67ce60f40560b966856084ce84b27d5 Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <max.slipenko@gmail.com>
Date: Fri, 11 Feb 2022 15:45:11 +0300
Subject: [PATCH 02/13] fix MailChimp component

---
 src/MailChimp/MailChimp.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/MailChimp/MailChimp.js b/src/MailChimp/MailChimp.js
index e4115728..6de01b34 100644
--- a/src/MailChimp/MailChimp.js
+++ b/src/MailChimp/MailChimp.js
@@ -57,7 +57,7 @@ const MailChimp = ({ url, ...props }) => {
     );
 
     return (
-        <Box width={400} {...rest}>
+        <Box {...rest}>
             {!url ? (
                 <ComponentNotice message="Add your Form URL in the Props panel" />
             ) : (
@@ -70,7 +70,10 @@ const MailChimp = ({ url, ...props }) => {
                         >
                             {children}
                             {isEmptyChildren(children) && (
-                                <Placeholder message="Drop form components here" />
+                                <Placeholder
+                                    message="Drop form components here"
+                                    width="100%"
+                                />
                             )}
                         </Form>
                     )}

From f09ad525a60a2e2ac62b0c92aa94ae78026eb18d Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <max.slipenko@gmail.com>
Date: Fri, 11 Feb 2022 16:39:41 +0300
Subject: [PATCH 03/13] fix BgImageParallax

---
 src/BgImageParallax.js | 16 ++++++++++++++--
 1 file changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/BgImageParallax.js b/src/BgImageParallax.js
index aee53e25..969a697b 100644
--- a/src/BgImageParallax.js
+++ b/src/BgImageParallax.js
@@ -3,6 +3,7 @@ import React, { useCallback, useMemo, useEffect, useRef } from 'react';
 import atomize from '@quarkly/atomize';
 import { useOverrides } from '@quarkly/components';
 import { Box } from '@quarkly/widgets';
+import ComponentNotice from './ComponentNotice';
 
 const overrides = {
     Bground: {
@@ -132,13 +133,24 @@ const BgImageParallax = ({
     });
 
     return (
-        <Box position="relative" overflow="hidden" {...rest} ref={wrapperRef}>
+        <Box
+            position="relative"
+            overflow="hidden"
+            min-height="32px"
+            {...rest}
+            ref={wrapperRef}
+        >
             <Bground
                 ref={bgroundRef}
                 background={`transparent url(${imageURL}) ${imagePosition} top/${imageSize} ${imageRepeat}`}
                 {...override('Bground')}
             />
-            <Content {...override('Content')}>{children}</Content>
+            <Content {...override('Content')}>
+                {children}
+                {!imageURL && (
+                    <ComponentNotice message="Add Image in the Props panel" />
+                )}
+            </Content>
         </Box>
     );
 };

From 0c8bbd948b269b529917fbaf135324a0d4f1be7f Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <max.slipenko@gmail.com>
Date: Fri, 11 Feb 2022 16:55:59 +0300
Subject: [PATCH 04/13] fix BeforeAfterImage

---
 src/BeforeAfterImage.js | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/BeforeAfterImage.js b/src/BeforeAfterImage.js
index 0baf825c..ddd46b6f 100644
--- a/src/BeforeAfterImage.js
+++ b/src/BeforeAfterImage.js
@@ -210,7 +210,11 @@ const BeforeAfterImage = ({
                     }}
                 >
                     <Image {...override('Image', 'Before Image')} />
-                    <Text {...override('Label', 'Before Label')} />
+                    <Text
+                        {...override('Label', 'Before Label', {
+                            defaultKey: 'Before Label',
+                        })}
+                    />
                 </Box>
                 <Box
                     {...imageStyles}
@@ -224,7 +228,11 @@ const BeforeAfterImage = ({
                     }}
                 >
                     <Image {...override('Image', 'After Image')} />
-                    <Text {...override('Label', 'After Label')} />
+                    <Text
+                        {...override('Label', 'After Label', {
+                            defaultKey: 'After Label',
+                        })}
+                    />
                 </Box>
                 <Box
                     min-width="0px"

From a103d8882d2fd2eea7fc9c62e4b99f564c4523de Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <max.slipenko@gmail.com>
Date: Fri, 11 Feb 2022 18:03:45 +0300
Subject: [PATCH 05/13] fix Vimeo component

---
 preview/docs/Vimeo.md | 6 ++++++
 src/Vimeo.js          | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/preview/docs/Vimeo.md b/preview/docs/Vimeo.md
index db998bfa..5c2bb196 100644
--- a/preview/docs/Vimeo.md
+++ b/preview/docs/Vimeo.md
@@ -8,6 +8,12 @@ Use this component to add the Vimeo video player.
 2.  Specify the `Video link or ID` on the Props panel
 3.  See how it works in the preview mode
 
+### Setting up the video player
+
+Some video player settings are supported for Plus or PRO accounts.
+
+Learn more: [Supported Player Parameters](https://help.vimeo.com/hc/en-us/articles/360001494447-Using-Player-Parameters#h_01FNYA7F7GKWE17XDQJPMBC058)
+
 ### Playing in the background
 
 If the `Play in the background` prop is enabled, the video will be played in the background. In this case, all the controls are hidden, automatic playback is enabled, and the video loops.
diff --git a/src/Vimeo.js b/src/Vimeo.js
index 174e47c1..ff69082b 100644
--- a/src/Vimeo.js
+++ b/src/Vimeo.js
@@ -58,7 +58,7 @@ const VimeoComponent = ({
 
     const dStart = useDebounce(parseFloat(start), 1000);
 
-    const key = `vimeo-${video}${muted}${controls}${playBackground}${showByline}${dStart}${autoplay}${showTitle}${responsive}`;
+    const key = `vimeo-${video}${muted}${controls}${playBackground}${showByline}${dStart}${autoplay}${showPortrait}${showTitle}${responsive}`;
 
     return (
         <Wrapper

From 8f1f49d91d80b0a79bad9d651d892c5381927694 Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <max.slipenko@gmail.com>
Date: Fri, 11 Feb 2022 18:20:07 +0300
Subject: [PATCH 06/13] fix formspree component

---
 src/Formspree.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/Formspree.js b/src/Formspree.js
index 62c0e257..da016fbb 100644
--- a/src/Formspree.js
+++ b/src/Formspree.js
@@ -1,8 +1,10 @@
 import React, { useState, useEffect, useCallback } from 'react';
 import atomize from '@quarkly/atomize';
-import { Text, Link, Strong } from '@quarkly/widgets';
+import { Text, Strong } from '@quarkly/widgets';
 import { useForm, withForm } from './Form/context';
 
+const AbsoluteLink = atomize.a();
+
 const NoEndPoint = atomize.div`
 	padding: 16px 32px;
 	border: 2px solid;
@@ -86,7 +88,7 @@ const Formspree = (props) => {
             <Wrapper {...rest}>
                 <NoEndPoint>
                     Create a form on{' '}
-                    <Link
+                    <AbsoluteLink
                         color="currentColor"
                         text-decoration="underline"
                         target="_blank"
@@ -94,7 +96,7 @@ const Formspree = (props) => {
                         href="https://formspree.io/"
                     >
                         formspree.io
-                    </Link>{' '}
+                    </AbsoluteLink>{' '}
                     and fill in the <Strong>endpoint</Strong> field on the{' '}
                     <Strong>props panel</Strong>
                 </NoEndPoint>

From 655dd79fd4c30960f81cad8e734a491625adb458 Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <maxim@slipenko.com>
Date: Tue, 29 Mar 2022 20:45:40 +0300
Subject: [PATCH 07/13] add Button override

---
 src/Collapse/Collapse.js | 11 ++++++++++-
 1 file changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/Collapse/Collapse.js b/src/Collapse/Collapse.js
index f3503196..2b6f5f05 100644
--- a/src/Collapse/Collapse.js
+++ b/src/Collapse/Collapse.js
@@ -96,6 +96,10 @@ const Collapse = ({
         ref.current.addEventListener('transitionend', handle);
     }, [animFunction, collapsedHeight, destination, duration, handle, mode]);
 
+    const buttonOveride = `Button ${
+        isOpen !== isCollapsing ? ':open' : ':close'
+    }`;
+
     return (
         <Box
             padding="8px"
@@ -103,7 +107,12 @@ const Collapse = ({
             border-radius="4px"
             {...rest}
         >
-            <Button {...override('Button')} onClick={toggleOpen} />
+            <Button
+                {...override('Button', buttonOveride, {
+                    defaultKey: buttonOveride,
+                })}
+                onClick={toggleOpen}
+            />
             <Box
                 ref={ref}
                 {...override(

From 606ca1d25a281c8e541ef027b154fe91285d7c50 Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <maxim@slipenko.com>
Date: Tue, 29 Mar 2022 23:24:48 +0300
Subject: [PATCH 08/13] update CardFlip

---
 src/CardFlip/CardFlip.js | 64 +++++++++++++++++++++++++++-------------
 1 file changed, 44 insertions(+), 20 deletions(-)

diff --git a/src/CardFlip/CardFlip.js b/src/CardFlip/CardFlip.js
index 1e34489d..04a1a650 100644
--- a/src/CardFlip/CardFlip.js
+++ b/src/CardFlip/CardFlip.js
@@ -1,7 +1,7 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useState, useEffect, useRef } from 'react';
 import { useOverrides } from '@quarkly/components';
-import { Box, Image } from '@quarkly/widgets';
-import { parseTime } from '../utils';
+import { Box, Placeholder } from '@quarkly/widgets';
+import { isEmptyChildren, parseTime } from '../utils';
 
 const overrides = {
     'Card Flip Content': {
@@ -37,17 +37,6 @@ const overrides = {
             position: 'absolute',
         },
     },
-    'Card Flip Item Face': {
-        kind: 'Box',
-    },
-    'Card Flip Item Back': {
-        kind: 'Box',
-        props: {
-            padding: '24px 16px',
-            background: '--color-lightD2',
-            'box-sizing': 'border-box',
-        },
-    },
 };
 
 const flipStyles = {
@@ -83,26 +72,50 @@ const CardFlip = ({
     isFlippedProp,
     ...props
 }) => {
-    const { override, children, rest } = useOverrides(props, overrides);
+    const { override, ChildPlaceholder, rest } = useOverrides(props, overrides);
 
     const [isFlipped, setFlipped] = useState(isFlippedProp);
+    const [isFlipEnd, setFlipEnd] = useState(true);
 
     const flipTrigger = flipTriggerProp === 'click';
 
     const flipDuration = parseTime(flipDurationProp);
 
     const onClickFlip = useCallback(() => {
-        if (flipTrigger) setFlipped((prevFlipped) => !prevFlipped);
+        if (flipTrigger) {
+            setFlipped((prevFlipped) => !prevFlipped);
+            setFlipEnd(false);
+        }
     }, [flipTrigger]);
 
     const onHoverFlip = useCallback(() => {
-        if (!flipTrigger) setFlipped((prevFlipped) => !prevFlipped);
+        if (!flipTrigger) {
+            setFlipped((prevFlipped) => !prevFlipped);
+            setFlipEnd(false);
+        }
     }, [flipTrigger]);
 
     useEffect(() => {
         setFlipped(isFlippedProp);
     }, [isFlippedProp]);
 
+    const boxRef = useRef();
+
+    useEffect(() => {
+        if (!boxRef.current) return;
+        const box = boxRef.current;
+
+        const handle = () => {
+            setFlipEnd(true);
+        };
+
+        box.addEventListener('transitionend', handle);
+
+        return () => {
+            box.removeEventListener('transitionend', handle);
+        };
+    }, []);
+
     return (
         <Box
             height={aspectRatioProp === 'auto' ? '500px' : 'auto'}
@@ -116,6 +129,7 @@ const CardFlip = ({
             {...rest}
         >
             <Box
+                ref={boxRef}
                 transition={`transform ${flipDuration}ms ${timingFunctionProp}`}
                 {...override('Card Flip Content')}
                 {...(isFlipped && flipStyles[flipDirectionProp])}
@@ -126,14 +140,24 @@ const CardFlip = ({
                 }
                 height={aspectRatioProp !== 'auto' ? '0' : '100%'}
             >
-                <Box {...override(`Card Flip Item`, `Card Flip Item Face`)}>
-                    <Image {...override('Card Flip Image')} />
+                <Box
+                    display={isFlipped && isFlipEnd && 'none'}
+                    {...override(`Card Flip Item`, `Card Flip Item Face`)}
+                >
+                    <ChildPlaceholder slot={'Card Flip Item Face'} />
+                    {isEmptyChildren(
+                        override('Card Flip Item Face').children
+                    ) && <Placeholder message="Drop content here" />}
                 </Box>
                 <Box
+                    display={!isFlipped && isFlipEnd && 'none'}
                     {...override(`Card Flip Item`, `Card Flip Item Back`)}
                     {...flipStyles[flipDirectionProp]}
                 >
-                    {children}
+                    <ChildPlaceholder slot={'Card Flip Item Back'} />
+                    {isEmptyChildren(
+                        override('Card Flip Item Back').children
+                    ) && <Placeholder message="Drop content here" />}
                 </Box>
             </Box>
         </Box>

From 4f0cf0e38f05c3969c3f837d2935704e22271637 Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <maxim@slipenko.com>
Date: Tue, 29 Mar 2022 23:31:55 +0300
Subject: [PATCH 09/13] bump @quarkly/components version

---
 package-lock.json | 8 ++++----
 package.json      | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index d4f55677..04e446c4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -3318,12 +3318,12 @@
       }
     },
     "@quarkly/components": {
-      "version": "0.2.50",
-      "resolved": "https://registry.npmjs.org/@quarkly/components/-/components-0.2.50.tgz",
-      "integrity": "sha512-BqwjUvgZKLm40LwjsXrVm6A0ItI3u0F/jsWzQ3MHjKX3vtNOivHDpMjcxk/IHBdWUefyCsnB7FrY3eDslOT3fg==",
+      "version": "0.2.68",
+      "resolved": "https://registry.npmjs.org/@quarkly/components/-/components-0.2.68.tgz",
+      "integrity": "sha512-o/IomgsEaISr1P6EdCDsUZFMSo8FLR4PTbsbxz4j9yRUdse1ZoW3/a4pIFtOoZrcas73PpD3glYQ+BohoP4dKw==",
       "dev": true,
       "requires": {
-        "@quarkly/widgets": "^0.2.50",
+        "@quarkly/widgets": "^0.2.68",
         "@reach/router": "^1.3.4"
       }
     },
diff --git a/package.json b/package.json
index 647bf76b..d0756393 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-react": "^7.13.13",
     "@quarkly/atomize": "^1.0.8",
-    "@quarkly/components": "^0.2.50",
+    "@quarkly/components": "^0.2.68",
     "@quarkly/sdk": "^0.5.4",
     "@quarkly/theme": "^0.1.3",
     "@quarkly/widgets": "^0.2.68",

From 5af9e923cbce5ba589ca47c643d9e046bdf90c31 Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <maxim@slipenko.com>
Date: Thu, 31 Mar 2022 12:28:58 +0300
Subject: [PATCH 10/13] fix Lottie

---
 src/Lottie/Lottie.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/Lottie/Lottie.js b/src/Lottie/Lottie.js
index a9405dbe..230a8692 100644
--- a/src/Lottie/Lottie.js
+++ b/src/Lottie/Lottie.js
@@ -96,7 +96,6 @@ const Lottie = ({
     return (
         <Box
             ref={ref}
-            margin="0 auto"
             outline="none"
             overflow="hidden"
             position={renderer === 'html' && 'relative'}

From f1cf8c1b9b76e2f517c3665cab923d909a291654 Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <maxim@slipenko.com>
Date: Wed, 6 Apr 2022 12:50:08 +0300
Subject: [PATCH 11/13] fix Picture component

---
 preview/docs/Picture.md    |  2 +-
 preview/docs/ru/Picture.md |  2 +-
 src/Picture.js             | 59 ++++++++++++++++----------------------
 3 files changed, 26 insertions(+), 37 deletions(-)

diff --git a/preview/docs/Picture.md b/preview/docs/Picture.md
index c9aa2670..99eb678e 100644
--- a/preview/docs/Picture.md
+++ b/preview/docs/Picture.md
@@ -4,7 +4,7 @@ This container component provides an optimized image version for different scree
 
 ## ⚙️ Usage
 
-Add the component to the page, than add an Image and/or Source components (optionally) to it, and see how it works in the preview mode.
+Add the component to the page, than add an Source components (optionally) to it, and see how it works in the preview mode.
 
 ## 🗓 Changelog
 
diff --git a/preview/docs/ru/Picture.md b/preview/docs/ru/Picture.md
index eaa5e011..075a011b 100644
--- a/preview/docs/ru/Picture.md
+++ b/preview/docs/ru/Picture.md
@@ -4,7 +4,7 @@
 
 ## ⚙️ Использование
 
-Добавьте компонент на страницу, поместите в него компоненты `Image` и `Source` (опционально), затем посмотрите как он работает в режиме превью.
+Добавьте компонент на страницу, поместите в него компоненты `Source` (опционально), затем посмотрите как он работает в режиме превью.
 
 ## 🗓 Changelog
 
diff --git a/src/Picture.js b/src/Picture.js
index c1e5c04d..c0674739 100644
--- a/src/Picture.js
+++ b/src/Picture.js
@@ -1,55 +1,43 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React from 'react';
 import atomize from '@quarkly/atomize';
 import { useOverrides } from '@quarkly/components';
-
-import ComponentNotice from './ComponentNotice';
+import { Image } from '@quarkly/widgets';
 
 const overrides = {
     'Picture Tag': {
         kind: 'Picture Tag',
         props: {
-            width: '100%',
-            height: 'auto',
+            display: 'inline-block',
+        },
+    },
+    Image: {
+        kind: 'Image',
+        props: {
+            src:
+                'https://images.unsplash.com/photo-1454496522488-7a8e488e8606?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&w=200',
         },
     },
 };
 
 const Picture = atomize.picture();
 const Wrapper = atomize.div();
-const Content = atomize.div();
 
-const PictureComponent = ({ children, ...props }) => {
-    const { override, rest } = useOverrides(props, overrides);
-
-    const [isEmpty, setEmpty] = useState(false);
-    const contentRef = useRef(null);
-
-    useEffect(() => {
-        setEmpty(contentRef.current?.innerHTML === '<!--child placeholder-->');
-    }, [children]);
+const PictureComponent = (props) => {
+    const { override, children, rest } = useOverrides(props, overrides);
 
     return (
-        <Wrapper {...rest}>
-            <Picture {...override('Picture Tag')} display={isEmpty && 'none'}>
-                <Content ref={contentRef}>
-                    {React.Children.map(
-                        children,
-                        (child) =>
-                            React.isValidElement(child) &&
-                            React.cloneElement(child, {
-                                container: 'picture',
-                            })
-                    )}
-                </Content>
+        <Wrapper display="inline-block" font-size="0" {...rest}>
+            <Picture {...override('Picture Tag')}>
+                <Image {...override('Image')} />
+                {React.Children.map(
+                    children,
+                    (child) =>
+                        React.isValidElement(child) &&
+                        React.cloneElement(child, {
+                            container: 'picture',
+                        })
+                )}
             </Picture>
-
-            {isEmpty && (
-                <ComponentNotice
-                    message={
-                        'Drag the Image and Source components here (optional)'
-                    }
-                />
-            )}
         </Wrapper>
     );
 };
@@ -62,4 +50,5 @@ export default atomize(PictureComponent)({
         ru:
             'Контейнер для обеспечения оптимальной версии изображения для различных размеров экрана',
     },
+    overrides,
 });

From 4476b74d49132960393547a47813a295034bd9a0 Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <maxim@slipenko.com>
Date: Wed, 6 Apr 2022 15:19:25 +0300
Subject: [PATCH 12/13] fix Picture and Source

---
 src/Picture.js | 2 +-
 src/Source.js  | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/Picture.js b/src/Picture.js
index c0674739..7f0fd152 100644
--- a/src/Picture.js
+++ b/src/Picture.js
@@ -28,7 +28,6 @@ const PictureComponent = (props) => {
     return (
         <Wrapper display="inline-block" font-size="0" {...rest}>
             <Picture {...override('Picture Tag')}>
-                <Image {...override('Image')} />
                 {React.Children.map(
                     children,
                     (child) =>
@@ -37,6 +36,7 @@ const PictureComponent = (props) => {
                             container: 'picture',
                         })
                 )}
+                <Image {...override('Image')} />
             </Picture>
         </Wrapper>
     );
diff --git a/src/Source.js b/src/Source.js
index 809de3fc..d471b113 100644
--- a/src/Source.js
+++ b/src/Source.js
@@ -20,7 +20,7 @@ const SourceComponent = ({
 }) => {
     let type = '';
 
-    if (container !== 'picture') {
+    if (container === 'picture') {
         type = `${typeMedia || ''}${
             typeMedia && codecs ? `; codecs='${codecs}'` : ''
         }`;
@@ -34,8 +34,8 @@ const SourceComponent = ({
             src={src}
             srcSet={srcSet}
             type={type}
-            media={container !== 'picture' ? mediaInput || mediaSelect : ''}
-            sizes={container !== 'picture' ? sizes : ''}
+            media={container === 'picture' ? mediaInput || mediaSelect : ''}
+            sizes={container === 'picture' ? sizes : ''}
         />
     ) : (
         <ComponentNotice

From 4c376c317e06ed1b4f783a6257674590bd41f96d Mon Sep 17 00:00:00 2001
From: Maxim Slipenko <maxim@slipenko.com>
Date: Wed, 6 Apr 2022 15:22:01 +0300
Subject: [PATCH 13/13] fix Source type prop

---
 src/Source.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/Source.js b/src/Source.js
index d471b113..f249a1be 100644
--- a/src/Source.js
+++ b/src/Source.js
@@ -20,7 +20,7 @@ const SourceComponent = ({
 }) => {
     let type = '';
 
-    if (container === 'picture') {
+    if (container !== 'picture') {
         type = `${typeMedia || ''}${
             typeMedia && codecs ? `; codecs='${codecs}'` : ''
         }`;