feat: slide gif per default fullscreen

Author: peterpeterparker

docs/docs/slides/app-slide-gif/app-slide-gif.md

@@ -63,7 +63,7 @@ This component offers the following options which could be set using attributes:
 | -------------------------- |-----------------|-----------------|-----------------|
 | src | string |  | The source url, the src, of the Gif. Could be an embeddable external url or a local one. |
 | alt | string |  | And alt information could be provided for accessibility reason. |
-| fullscreen | number | false | If set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen. |
+| fullscreen | number | true | If set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen. |
 
 ## Theming
 

docs/src/app/pages/docs/slides/app-slide-gif/app-slide-gif.tsx

@@ -94,7 +94,7 @@ export class AppSlideGif {
 <tr>
 <td>fullscreen</td>
 <td>number</td>
-<td>false</td>
+<td>true</td>
 <td>If set to true, the gif width and height will be related to the slide width and height respectively will be fullscreen.</td>
 </tr>
 </tbody></table>

studio/src/app/popovers/editor/app-slide-type/app-slide-type.scss

@@ -76,6 +76,13 @@ app-slide-type {
         font-size: 0.2rem;
       }
     }
+
+    deckgo-slide-gif {
+      p {
+        min-height: inherit;
+        width: inherit;
+      }
+    }
   }
 
   div.swipe {

studio/src/app/popovers/editor/app-slide-type/app-slide-type.tsx

@@ -63,7 +63,7 @@ export class AppSlideType {
                 </deckgo-slide-split>
             </div>
             <div class="item" custom-tappable onClick={() => this.addSlide(SlideTemplate.GIF)}>
-                <deckgo-slide-gif src="./assets/img/example.gif" alt="Slide Gif" fullscreen={true}>
+                <deckgo-slide-gif src="./assets/img/example.gif" alt="Slide Gif">
                     <p slot="footer" style={{"font-size": "var(--font-size-very-small)", padding: "2px", "border-radius": "4px"}}>GIFs</p>
                 </deckgo-slide-gif>
             </div>

studio/src/app/utils/editor-utils.tsx

@@ -121,7 +121,7 @@ export class EditorUtils {
                 {this.DEFAULT_CAPTION}
             </h2>;
 
-            const slide: any = <deckgo-slide-gif src="./assets/img/example.gif" fullscreen={true}>
+            const slide: any = <deckgo-slide-gif src="./assets/img/example.gif">
                 {title}
                 {content}
             </deckgo-slide-gif>;

webcomponents/core/src/components/slides/deckdeckgo-slide-gif/deckdeckgo-slide-gif.tsx

@@ -17,7 +17,7 @@ export class DeckdeckgoSlideGif implements DeckdeckgoSlide {
   @Prop() src: string;
   @Prop() alt: string;
 
-  @Prop() fullscreen: boolean = false;
+  @Prop() fullscreen: boolean = true;
 
   @State() loaded: boolean = false;
 

webcomponents/core/src/index.html

@@ -42,7 +42,7 @@ <h2>David Dal Busco</h2>
     <div slot="social-link"><deckgo-social full-url="https://stackoverflow.com/users/5404186/peter-parker">stackoverflow</deckgo-social></div>
   </deckgo-slide-author>
 
-  <deckgo-slide-gif src="https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif" alt="My title" fullscreen="true">
+  <deckgo-slide-gif src="https://media.giphy.com/media/xUA7baWfTjfHGLZc3e/giphy.gif" alt="My title">
     <h1 slot="title">Gif</h1>
     <h1 slot="header">Hey Sani</h1>
     <h2 slot="footer" style="--background: white; --color: blue;">Cool?</h2>