chore(ui/control): optimize and restructure templates for controls

package.json

@@ -59,8 +59,7 @@
     "test:unit": "haste-playable test --mocha",
     "pretest:playback": "haste-playable clean && npm run bundle:playback-test && npm run bundle:playback-test-with-adapters",
     "test:playback": "haste-playable test --karma dev-env/karma.conf.js && haste-playable test --karma dev-env/karma-with-adapters.conf.js",
-    "precommit": "lint-staged",
-    "prepush": "npm run test:unit && npm run test:node && npm run documentation:gitadd",
+    "precommit": "lint-staged && npm run documentation:gitadd",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook"
   },

src/modules/ui/controls/download/download.view.ts

@@ -4,7 +4,7 @@ import View from '../../core/view';
 import { IView } from '../../core/types';
 
 import { ITooltipReference } from '../../core/tooltip/types';
-import { buttonTemplate } from './templates';
+import { controlTemplate } from './templates';
 
 import htmlToElement from '../../core/htmlToElement';
 import getElementByHook from '../../core/getElementByHook';
@@ -38,7 +38,7 @@ class DownloadView extends View<IDownloadViewStyles>
     this._textMap = textMap;
 
     this._$rootElement = htmlToElement(
-      buttonTemplate({
+      controlTemplate({
         styles: this.styleNames,
         themeStyles: this.themeStyles,
         texts: {

src/modules/ui/controls/download/templates/control.dot

@@ -0,0 +1,13 @@
+<div class="${props.styles.buttonWrapper}">
+  <button class="${props.styles.downloadButton} ${props.styles.controlButton}" data-playable-hook="download-button" aria-label="${props.texts.label}" type="button" tabindex="0">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" class="${props.styles.icon_small}" width="100%">
+      <g fill-rule="evenodd" class="${props.themeStyles.downloadSvgFill}">
+        <path d="M6 18h14v2H6v-2zm3.586-8.328L13 13.025v2.708l-4.828-4.647 1.414-1.414zM13 13.123l3.618-3.655 1.414 1.414L13 15.749v-2.626z"/>
+        <path d="M12 6h2v8l-1 2-1-2V6z"/>
+      </g>
+    </svg>
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35" class="${props.styles.icon_big}" width="100%">
+      <path d="M16.5 17.586V7h2v10.825L23.571 13l1.414 1.414-7.085 6.743-.329.328-7.071-7.07L11.914 13l4.586 4.586zM5.5 26h24v2h-24v-2z" fill-rule="evenodd"/>
+    </svg>
+  </button>
+</div>

src/modules/ui/controls/download/templates/index.ts

@@ -1 +1 @@
-export { default as buttonTemplate } from './button.dot';
+export { default as controlTemplate } from './control.dot';

src/modules/ui/controls/full-screen/full-screen.scss

@@ -15,7 +15,7 @@
   height: 26px;
   min-height: 26px;
 
-  transition: transform 0.2s;
+  transition: transform .2s;
 
   @include query(in-full-screen()) {
     width: 35px;
@@ -26,9 +26,25 @@
     transform: scale(1.18);
   }
 
+  .enterIcon {
+    display: block;
+  }
+
+  .exitIcon {
+    display: none;
+  }
+
   &.inFullScreen {
     &:hover {
-      transform: scale(0.8);
+      transform: scale(.8);
+    }
+
+    .enterIcon {
+      display: none;
+    }
+
+    .exitIcon {
+      display: block;
     }
   }
 }

src/modules/ui/controls/full-screen/full-screen.view.ts

@@ -4,11 +4,7 @@ import View from '../../core/view';
 import { IView } from '../../core/types';
 
 import { ITooltipReference } from '../../core/tooltip/types';
-import {
-  controlTemplate,
-  enterFullScreenIconTemplate,
-  exitFullScreenIconTemplate,
-} from './templates';
+import { controlTemplate } from './templates';
 
 import htmlToElement from '../../core/htmlToElement';
 import getElementByHook from '../../core/getElementByHook';
@@ -44,6 +40,7 @@ class FullScreenView extends View<IFullScreenViewStyles>
     this._$rootElement = htmlToElement(
       controlTemplate({
         styles: this.styleNames,
+        themeStyles: this.themeStyles,
         texts: {
           label: this._textMap.get(TextLabel.ENTER_FULL_SCREEN_LABEL),
         },
@@ -93,10 +90,6 @@ class FullScreenView extends View<IFullScreenViewStyles>
       this._$toggleFullScreenControl.classList.add(
         this.styleNames.inFullScreen,
       );
-      this._$toggleFullScreenControl.innerHTML = exitFullScreenIconTemplate({
-        styles: this.styleNames,
-        themeStyles: this.themeStyles,
-      });
       this._$toggleFullScreenControl.setAttribute(
         'aria-label',
         this._textMap.get(TextLabel.EXIT_FULL_SCREEN_LABEL),
@@ -109,10 +102,6 @@ class FullScreenView extends View<IFullScreenViewStyles>
       this._$toggleFullScreenControl.classList.remove(
         this.styleNames.inFullScreen,
       );
-      this._$toggleFullScreenControl.innerHTML = enterFullScreenIconTemplate({
-        styles: this.styleNames,
-        themeStyles: this.themeStyles,
-      });
       this._$toggleFullScreenControl.setAttribute(
         'aria-label',
         this._textMap.get(TextLabel.ENTER_FULL_SCREEN_LABEL),

src/modules/ui/controls/full-screen/templates/control.dot

@@ -4,5 +4,12 @@
           data-playable-hook="full-screen-button"
           aria-label="${props.texts.label}"
           type="button"
-          tabindex="0"/>
+          tabindex="0">
+    <svg class="${props.styles.enterIcon}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" preserveAspectRatio="xMidYMin slice" width="100%">
+      <path class="${props.themeStyles.fullScreenSvgFill}" fill-rule="evenodd" d="M8 16H6v4h4v-2H8v-2zM6 7v3h2V8h2V6H6v1zm14-1h-4v2h2v2h2V6zm-2 12h-2v2h4v-4h-2v2z"/>
+    </svg>
+    <svg class="${props.styles.exitIcon}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35" preserveAspectRatio="xMidYMin slice" width="100%">
+      <path class="${props.themeStyles.fullScreenSvgFill}" fill-rule="evenodd" d="M11 28h2v-6H7v2h4v4zm2-21h-2v4H7v2h6V7zm9 6h6v-2h-4V7h-2v6zm2 11h4v-2h-6v6h2v-4z"/>
+    </svg>
+  </button>
 </div>

src/modules/ui/controls/full-screen/templates/index.ts

@@ -1,7 +1 @@
-export {
-  default as enterFullScreenIconTemplate,
-} from './enterFullScreenIcon.dot';
-export {
-  default as exitFullScreenIconTemplate,
-} from './exitFullScreenIcon.dot';
 export { default as controlTemplate } from './control.dot';

src/modules/ui/controls/full-screen/types.ts

@@ -5,6 +5,8 @@ import { ITextMap } from '../../../text-map/types';
 type IFullScreenViewStyles = {
   fullScreenControl: string;
   fullScreenToggle: string;
+  enterIcon: string;
+  exitIcon: string;
   icon: string;
   inFullScreen: string;
   hidden: string;

src/modules/ui/controls/logo/templates/logo-button.dot

@@ -1,23 +1,8 @@
-<button class="${props.styles.logoButton} ${props.styles.controlButton}"
-        aria-label="${props.texts.label}"
-        type="button"
-        tabindex="0">
-  <svg xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 26 26"
-        class="${props.styles.icon_small}"
-        preserveAspectRatio="xMidYMin slice"
-        width="100%">
-    <path fill-rule="evenodd"
-          class="${props.themeStyles.logoButtonSvgFill}"
-          d="M 8 20 L 6 20 L 6 6 L 10 6 L 10 8 L 8 8 L 8 18 L 18 18 L 18 16 L 20 16 L 20 20 L 8 20 Z M 18 9.485 L 13.414 14.071 L 12 12.657 L 16.657 8 L 15.004 8 L 15.004 6 L 20 6 L 20 11.005 L 18 11.005 L 18 9.485 Z"/>
+<button class="${props.styles.logoButton} ${props.styles.controlButton}" aria-label="${props.texts.label}" type="button" tabindex="0">
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" class="${props.styles.icon_small}" preserveAspectRatio="xMidYMin slice" width="100%">
+    <path fill-rule="evenodd" class="${props.themeStyles.logoButtonSvgFill}" d="M8 20H6V6h4v2H8v10h10v-2h2v4H8zM18 9.485l-4.586 4.586L12 12.657 16.657 8h-1.653V6H20v5.005h-2v-1.52z"/>
   </svg>
-  <svg xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 35 35"
-        class="${props.styles.icon_big}"
-        preserveAspectRatio="xMidYMin slice"
-        width="100%">
-    <path fill-rule="evenodd"
-          class="${props.themeStyles.logoButtonSvgFill}"
-          d="M 9 28 L 7 28 L 7 7 L 14.071 7 L 14.071 9 L 9 9 L 9 26 L 26 26 L 26 21 L 28 21 L 28 28 L 9 28 Z M 26 10.02 L 17.414 18.607 L 16 17.192 L 24.192 9 L 22.008 9 L 22.008 7 L 28 7 L 28 13.012 L 26 13.012 L 26 10.02 Z"/>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 35" class="${props.styles.icon_big}" preserveAspectRatio="xMidYMin slice" width="100%">
+    <path fill-rule="evenodd" class="${props.themeStyles.logoButtonSvgFill}" d="M9 28H7V7h7.071v2H9v17h17v-5h2v7H9zm17-17.98l-8.586 8.587L16 17.192 24.192 9h-2.184V7H28v6.012h-2V10.02z"/>
   </svg>
 </button>

src/modules/ui/controls/picture-in-picture/picture-in-picture.scss

@@ -32,6 +32,14 @@
     }
   }
 
+  .enterIcon {
+    display: block;
+  }
+
+  .exitIcon {
+    display: none;
+  }
+
   .icon_small {
     display: block;
   }
@@ -48,5 +56,13 @@
     &:hover {
       transform: scale(.8);
     }
+
+    .enterIcon {
+      display: none;
+    }
+
+    .exitIcon {
+      display: block;
+    }
   }
 }

src/modules/ui/controls/picture-in-picture/picture-in-picture.view.ts

@@ -4,11 +4,7 @@ import View from '../../core/view';
 import { IView } from '../../core/types';
 
 import { ITooltipReference } from '../../core/tooltip/types';
-import {
-  controlTemplate,
-  enterPictureInPictureIconTemplate,
-  exitPictureInPictureIconTemplate,
-} from './templates';
+import { controlTemplate } from './templates';
 
 import htmlToElement from '../../core/htmlToElement';
 import getElementByHook from '../../core/getElementByHook';
@@ -44,6 +40,7 @@ class PictureInPictureView extends View<IPictureInPictureViewStyles>
     this._$rootElement = htmlToElement(
       controlTemplate({
         styles: this.styleNames,
+        themeStyles: this.themeStyles,
         texts: {
           label: this._textMap.get(TextLabel.ENTER_PICTURE_IN_PICTURE_LABEL),
         },
@@ -89,13 +86,7 @@ class PictureInPictureView extends View<IPictureInPictureViewStyles>
   setPictureInPictureState(isPictureInPicture: boolean) {
     if (isPictureInPicture) {
       this._$togglePictureInPictureControl.classList.add(
-        this.styleNames.pictureInPicture,
-      );
-      this._$togglePictureInPictureControl.innerHTML = exitPictureInPictureIconTemplate(
-        {
-          styles: this.styleNames,
-          themeStyles: this.themeStyles,
-        },
+        this.styleNames.inPictureInPicture,
       );
       this._$togglePictureInPictureControl.setAttribute(
         'aria-label',
@@ -107,22 +98,15 @@ class PictureInPictureView extends View<IPictureInPictureViewStyles>
       );
     } else {
       this._$togglePictureInPictureControl.classList.remove(
-        this.styleNames.pictureInPicture,
+        this.styleNames.inPictureInPicture,
       );
       this._$togglePictureInPictureControl.setAttribute(
         'aria-label',
         this._textMap.get(TextLabel.ENTER_PICTURE_IN_PICTURE_LABEL),
       );
-
       this._tooltipReference.setText(
         this._textMap.get(TextLabel.ENTER_PICTURE_IN_PICTURE_TOOLTIP),
       );
-      this._$togglePictureInPictureControl.innerHTML = enterPictureInPictureIconTemplate(
-        {
-          styles: this.styleNames,
-          themeStyles: this.themeStyles,
-        },
-      );
     }
   }
 

src/modules/ui/controls/picture-in-picture/templates/control.dot

@@ -5,5 +5,38 @@
           data-playable-hook="picture-in-picture-control"
           aria-label="${props.texts.label}"
           type="button"
-          tabindex="0"/>
+          tabindex="0">
+    <div class="${props.styles.enterIcon}">
+      <svg class="${props.styles.icon_small}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" preserveAspectRatio="xMidYMin slice" width="100%">
+        <g fill-rule="evenodd" class="${props.themeStyles.pictureInPictureSvgFill}">
+        <path d="M11 19H5V6h15v5h-2V8H7v9h4v2z"/>
+        <path d="M13 13h9v8h-9v-8zm2 2v4h5v-4h-5z"/>
+        </g>
+      </svg>
+      <svg class="${props.styles.icon_big}" viewBox="0 0 35 35" version="1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice" width="100%">
+        <g fill-rule="evenodd" class="${props.themeStyles.pictureInPictureSvgFill}">
+        <path d="M14 26H5V7h22v7h-2V9H7v15h7v2z"/>
+        <path d="M17 17h12v11H17V17zm2 2v7h8v-7h-8z"/>
+        </g>
+      </svg>
+    </div>
+    <div class="${props.styles.exitIcon}">
+      <svg class="${props.styles.icon_small}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 26" preserveAspectRatio="xMidYMin slice" width="100%">
+        <g fill-rule="evenodd" class="${props.themeStyles.pictureInPictureSvgFill}">
+          <path d="M12 19H5V6h15v5h-2V8H7v9h5v2z"/>
+          <path d="M21 15h-7v-2h7v2z"/>
+          <path d="M16 20v-7h-2v7h2z"/>
+          <path d="M21.279 18.95l-1.415 1.414-4.95-4.95L16.329 14l4.95 4.95z"/>
+        </g>
+      </svg>
+      <svg class="${props.styles.icon_big}" viewBox="0 0 35 35" version="1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMin slice" width="100%">
+        <g fill-rule="evenodd" class="${props.themeStyles.pictureInPictureSvgFill}">
+          <path d="M17 26H5V7h22v9h-2V9H7v15h10v2z"/>
+          <path d="M28 21h-8v-2h8v2z"/>
+          <path d="M22 27v-8h-2v8h2z"/>
+          <path d="M29 27l-1 1-7-6 2-2 6 7z"/>
+        </g>
+      </svg>
+    </div>
+  </button>
 </div>