player.style - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

package.json

 {
   "name": "player.style",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "description": "A fresh collection of media player themes for every use case!",
@@ -33,2 +33,3 @@ "author": "@muxinc",
   "dependencies": {
+    "@player.style/demuxed-2022": "^0.0.6",
     "@player.style/microvideo": "0.0.5",
@@ -35,0 +36,0 @@ "@player.style/minimal": "0.0.5",

themes/yt/dist/media-theme.js

@@ -109,2 +109,47 @@ /*
       }
+
+      media-captions-button {
+        width: 44px;
+        height: 44px;
+        padding: 0;
+      }
+
+      /* Hide captions button when no subtitles are available */
+      media-captions-button:not([mediasubtitleslist]) svg {
+        opacity: 0.3;
+      }
+
+      media-captions-button svg {
+        width: 44px;
+        min-width: 44px;
+        height: 44px;
+        padding: 0;
+      }
+
+      media-captions-button[mediasubtitleslist]:after {
+        content: "";
+        display: block;
+        position: absolute;
+        width: 0;
+        height: 3px;
+        border-radius: 3px;
+        background-color: #f00;
+        bottom: 6px;
+
+        transition: left 0.1s cubic-bezier(0, 0, 0.2, 1),
+          width 0.1s cubic-bezier(0, 0, 0.2, 1);
+      }
+
+      media-captions-button[mediasubtitleslist][aria-checked="true"]:after {
+        width: 24px;
+        transition: left 0.25s cubic-bezier(0, 0, 0.2, 1),
+          width 0.25s cubic-bezier(0, 0, 0.2, 1);
+      }
+
+      .svg-shadow {
+        stroke: #000;
+        stroke-opacity: 0.15;
+        stroke-width: 2px;
+        fill: none;
+      }
     </style>
@@ -127,2 +172,21 @@
         <span class="control-spacer"></span>
+        <media-captions-button>
+          <svg
+            slot="icon"
+            width="36"
+            height="36"
+            viewBox="0 0 36 36"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <use class="svg-shadow" xlink:href="#cc-icon"></use>
+            <path
+              id="cc-icon"
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M9 13.4124C9 12.0801 10.0801 11 11.4124 11H24.5876C25.9199 11 27 12.0801 27 13.4124V22.5876C27 23.9199 25.9199 25 24.5876 25H11.4124C10.0801 25 9 23.9199 9 22.5876V13.4124ZM11.5979 16.0334C11.5979 15.4185 12.0964 14.92 12.7113 14.92H15.866C16.4809 14.92 16.9794 15.4185 16.9794 16.0334V19.9666C16.9794 20.5815 16.4809 21.08 15.866 21.08H12.7113C12.0964 21.08 11.5979 20.5815 11.5979 19.9666V16.0334ZM13.268 16.4133H15.3093V16.9733H16.9794V19.0267H15.3093V19.5867H13.268V16.4133ZM19.9485 14.92C19.3335 14.92 18.8351 15.4185 18.8351 16.0334V19.9666C18.8351 20.5815 19.3335 21.08 19.9485 21.08H23.1031C23.718 21.08 24.2165 20.5815 24.2165 19.9666V16.0334C24.2165 15.4185 23.718 14.92 23.1031 14.92H19.9485ZM22.5464 16.4133H20.5052V19.5867H22.5464V19.0267H24.2165V16.9733H22.5464V16.4133Z"
+              fill="#FBFBFB"
+            />
+          </svg>
+        </media-captions-button>
         <media-playback-rate-button></media-playback-rate-button>
@@ -129,0 +193,0 @@ <media-pip-button></media-pip-button>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

142021

increased by34.78%

Number of package files

30

increased by30.43%

Lines of code

1698

increased by34.98%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + [e-mail]/demuxed-2022@^0.0.6

• + [e-mail]/demuxed-2022@0.0.6(transitive)