Merge pull request #45 from THEOplayer/portrait-example

Add portrait example

docs/examples/index.md

@@ -9,4 +9,5 @@ show_in_nav: true
     -   [Advertisements](./ads.html)
     -   [Styling](./styling.html)
 -   [Custom UI](./custom-ui.html)
--   [Nitflex theme](./nitflex.html)
+    -   [Portrait](./portrait.html)
+    -   [Nitflex theme](./nitflex.html)

docs/examples/portrait.css

@@ -0,0 +1,79 @@
+body {
+    background: #fff;
+}
+
+.material-symbols-rounded {
+    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+}
+
+.container {
+    display: flex;
+    justify-content: center;
+}
+
+.phone {
+    display: block;
+    background: url('../assets/phone-back.png') no-repeat;
+    background-size: contain;
+    box-sizing: border-box;
+    width: 50%;
+    padding: 2.5%;
+    aspect-ratio: 1547 / 3272;
+}
+
+theoplayer-ui,
+theoplayer-ui:not(:defined) {
+    background: transparent;
+    font-family: 'Noto Sans', sans-serif;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+}
+
+theoplayer-ui {
+    --theoplayer-video-border-radius: 10px;
+    --theoplayer-video-object-fit: cover;
+}
+
+.spacer {
+    flex-grow: 1;
+}
+
+.top-chrome {
+    justify-content: flex-end;
+}
+
+.centered-chrome * {
+    --theoplayer-control-height: 48px;
+    --theoplayer-text-content-height: 100%;
+}
+
+.centered-chrome .material-symbols-rounded {
+    font-size: var(--theoplayer-control-height);
+}
+
+.side-chrome {
+    align-self: end;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-end;
+    height: 100%;
+}
+
+.bottom-chrome {
+    display: flex;
+    flex-direction: column;
+}
+
+theoplayer-time-range {
+    --theoplayer-range-padding: 5px;
+}
+
+/*
+ * Hide all controls before first play, except for the center play button
+ */
+theoplayer-ui:not([has-first-play]) .top-chrome,
+theoplayer-ui:not([has-first-play]) .side-chrome,
+theoplayer-ui:not([has-first-play]) .bottom-chrome {
+    display: none !important;
+}

docs/examples/portrait.html

@@ -0,0 +1,45 @@
+---
+layout: example
+title: Portrait UI
+permalink: /examples/portrait-ui
+---
+
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+<link href="portrait.css" rel="stylesheet" />
+<div class="container">
+    <div class="phone">
+        <theoplayer-ui
+            configuration='{"libraryLocation":"https://cdn.theoplayer.com/dash/theoplayer/","license":"{{ site.theoplayer_license }}","allowNativeFullscreen":true}'
+            source='{"sources":"https://cdn.theoplayer.com/video/skating-portrait.mp4"}'
+            device-type="mobile"
+        >
+            <theoplayer-control-bar slot="top-chrome" class="top-chrome">
+                <theoplayer-settings-menu-button menu="settings-menu" mobile-only></theoplayer-settings-menu-button>
+            </theoplayer-control-bar>
+            <theoplayer-loading-indicator slot="centered-loading" no-auto-hide></theoplayer-loading-indicator>
+            <div slot="centered-chrome" class="centered-chrome">
+                <theoplayer-play-button></theoplayer-play-button>
+            </div>
+            <div slot="middle-chrome" class="side-chrome">
+                <theoplayer-mute-button></theoplayer-mute-button>
+                <theoplayer-button><span class="material-symbols-rounded">thumb_up</span></theoplayer-button>
+                <theoplayer-button><span class="material-symbols-rounded">comment</span>️</theoplayer-button>
+                <theoplayer-button>️<span class="material-symbols-rounded">share</span></theoplayer-button>
+            </div>
+            <div class="bottom-chrome">
+                <theoplayer-control-bar>
+                    <theoplayer-time-display></theoplayer-time-display>
+                    <span class="spacer"></span>
+                    <theoplayer-time-display remaining></theoplayer-time-display>
+                </theoplayer-control-bar>
+                <theoplayer-control-bar>
+                    <theoplayer-time-range></theoplayer-time-range>
+                </theoplayer-control-bar>
+            </div>
+            <theoplayer-settings-menu id="settings-menu" slot="menu" hidden></theoplayer-settings-menu>
+            <theoplayer-error-display slot="error"></theoplayer-error-display>
+        </theoplayer-ui>
+    </div>
+</div>
+
+<p style="margin-top: 2em">Video by <a href="https://www.pexels.com/video/the-art-of-skateboarding-2791956/">cottonbro studio</a>.</p>

src/UIContainer.css

@@ -64,6 +64,11 @@
     pointer-events: auto;
 }
 
+[part~='media-layer'] video {
+    border-radius: var(--theoplayer-video-border-radius);
+    object-fit: var(--theoplayer-video-object-fit);
+}
+
 /*
  * Hack: THEOplayer's own linear ad UI is not positioned correctly by default
  * when using the chromeless player.