Merge pull request #512 from deckgo/youtube-height

feat(#492): use more space for the slide Youtube

CHANGELOG.md

@@ -17,6 +17,7 @@
 * lazy-img: v1.0.0-rc.2-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/lazy-img/CHANGELOG.md))
 * slide-chart: v1.0.0-rc.2-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/chart/CHANGELOG.md))
 * remote: v1.0.0-rc.5 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/remote/CHANGELOG.md))
+* slide-youtube: v1.0.0-rc.2 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/webcomponents/slides/youtube/CHANGELOG.md))
 
 ### Others
 * backend: v1.0.0-rc.1-1 ([CHANGELOG](https://github.com/deckgo/deckdeckgo/blob/master/backend/CHANGELOG.md))

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

@@ -121,6 +121,9 @@ The following theming options will affect this component if set on its host or p
 | --slide-padding-bottom | 16px | Padding bottom of the all slide |
 | --slide-padding-start | 32px | Padding left of the all slide |
 | --zIndex | 1 | The z-index of the slide |
+| --slide-youtube-margin | 0 0 32px | The margin of the video's container |
+| --slide-youtube-height | calc(100% - 32px) | The height of the video's container |
+| --slide-youtube-overflow | auto | The overflow of the video's container |
 
 ## Methods
 

docs/package.json

@@ -32,7 +32,7 @@
     "@deckdeckgo/slide-split": "^1.0.0-rc.2",
     "@deckdeckgo/slide-title": "^1.0.0-rc.1",
     "@deckdeckgo/slide-video": "^1.0.0-rc.1-1",
-    "@deckdeckgo/slide-youtube": "^1.0.0-rc.1-4",
+    "@deckdeckgo/slide-youtube": "^1.0.0-rc.2",
     "@ionic/core": "^4.11.1",
     "idb-keyval": "^3.2.0",
     "rxjs": "^6.5.3"

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

@@ -181,6 +181,21 @@ export class AppSlideYoutube {
 <td>1</td>
 <td>The z-index of the slide</td>
 </tr>
+<tr>
+<td>--slide-youtube-margin</td>
+<td>0 0 32px</td>
+<td>The margin of the video&#39;s container</td>
+</tr>
+<tr>
+<td>--slide-youtube-height</td>
+<td>calc(100% - 32px)</td>
+<td>The height of the video&#39;s container</td>
+</tr>
+<tr>
+<td>--slide-youtube-overflow</td>
+<td>auto</td>
+<td>The overflow of the video&#39;s container</td>
+</tr>
 </tbody></table>
 <h2 id="app-slide-youtube-methods">Methods</h2>
 <p>The slide &quot;Youtube&quot; offers extra methods to play and pause the Youtube video clip. These methods are notably used by the [DeckDecGo]&#39;s remote control.</p>

remote/package.json

@@ -33,7 +33,7 @@
     "@deckdeckgo/slide-split": "^1.0.0-rc.2",
     "@deckdeckgo/slide-title": "^1.0.0-rc.1",
     "@deckdeckgo/slide-video": "^1.0.0-rc.1-1",
-    "@deckdeckgo/slide-youtube": "^1.0.0-rc.1-4",
+    "@deckdeckgo/slide-youtube": "^1.0.0-rc.2",
     "@deckdeckgo/utils": "^1.0.0-rc.1-2",
     "@ionic/core": "^4.11.3",
     "date-fns": "^2.8.1",

studio/package.json

@@ -32,7 +32,7 @@
     "@deckdeckgo/slide-qrcode": "^1.0.0-rc.2-1",
     "@deckdeckgo/slide-split": "^1.0.0-rc.2",
     "@deckdeckgo/slide-title": "^1.0.0-rc.1",
-    "@deckdeckgo/slide-youtube": "^1.0.0-rc.1-4",
+    "@deckdeckgo/slide-youtube": "^1.0.0-rc.2",
     "@deckdeckgo/utils": "^1.0.0-rc.1-4",
     "@ionic/core": "4.11.3",
     "firebase": "^7.5.0",

webcomponents/slides/youtube/CHANGELOG.md

@@ -1,3 +1,10 @@
+<a name="1.0.0-rc.2"></a>
+# 1.0.0-rc.2 (2019-12-01)
+
+### Features
+
+* use the all element space to display the Youtube video ([#492](https://github.com/deckgo/deckdeckgo/issues/492))
+
 <a name="1.0.0-rc.1-4"></a>
 # 1.0.0-rc.1-4 (2019-11-08)
 

webcomponents/slides/youtube/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deckdeckgo/slide-youtube",
-  "version": "1.0.0-rc.1-4",
+  "version": "1.0.0-rc.2",
   "description": "The Content template is a simple slide which display a title and content aligned to the start of the page of the presentation",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -26,11 +26,11 @@
     "@deckdeckgo/utils": "^1.0.0-rc.1-3"
   },
   "devDependencies": {
-    "@stencil/core": "^1.7.5",
+    "@stencil/core": "^1.8.1",
     "@stencil/postcss": "^1.0.1",
     "@stencil/sass": "^1.1.1",
     "@stencil/utils": "0.0.5",
-    "autoprefixer": "^9.7.1"
+    "autoprefixer": "^9.7.3"
   },
   "repository": {
     "type": "git",

webcomponents/slides/youtube/src/components/slide/deckdeckgo-slide-youtube.scss

@@ -8,14 +8,16 @@ div.deckgo-slide {
 
 div.deckgo-youtube-container {
   width: calc(var(--slide-width) - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px));
-  height: calc(((var(--slide-height) - var(--slide-padding-end, 64px) - var(--slide-padding-start, 64px)) * 9) / 16);
+  height: var(--slide-youtube-height, calc(100% - 32px));
+
+  margin: var(--slide-youtube-margin, 0 0 32px);
+  overflow: var(--slide-youtube-overflow, auto);
 
   display: flex;
   align-items: center;
   justify-content: center;
 
   @media screen and (max-width: 1024px) {
     width: calc(var(--slide-width) - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px));
-    height: calc(((var(--slide-height) - var(--slide-padding-end, 32px) - var(--slide-padding-start, 32px)) * 9) / 16);
   }
 }