Merge branch 'master' into promises

openplayerjs · Oct 4, 2021 · 06f7abe · 06f7abe
2 parents c8ba2db + 0b97c80
commit 06f7abe
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@
 [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social)](https://twitter.com/intent/tweet?text=Support%20OpenPlayerJS%20by%20giving%20the%20project%20a%20start%20at%20&url=https://www.openplayerjs.com&hashtags=openplayerjs,mediaplayer,vpaid,opensourcerocks,streaming)
 [![Coverage Status](https://coveralls.io/repos/github/openplayerjs/openplayerjs/badge.svg?branch=master)](https://coveralls.io/github/openplayerjs/openplayerjs?branch=master)
 [![JSDelivr](https://data.jsdelivr.com/v1/package/npm/openplayerjs/badge)](https://www.jsdelivr.com/package/npm/openplayerjs)
-[![CircleCI](https://circleci.com/gh/openplayerjs/openplayerjs/tree/unit-tests.svg?style=svg)](https://circleci.com/gh/openplayerjs/openplayerjs/tree/unit-tests)
+[![CircleCI](https://circleci.com/gh/openplayerjs/openplayerjs/tree/master.svg?style=svg)](https://circleci.com/gh/openplayerjs/openplayerjs/tree/master)
 
 This is a media player that uses all the goods of HTML5 video/audio elements to play the most popular media in MP4/MP3, HLS and M(PEG)-DASH, and also has the ability to play VMAP, VAST and VPAID ads.
 
@@ -89,29 +89,38 @@ If you want to unleash the power of OpenPlayerJS, learn more about OpenPlayerJS
 
 If you need a reference on how to use OpenPlayerJS in some of the most common scenarios, check the following links:
 
-1. [No configuration (only DOM classes)](https://codepen.io/rafa8626/pen/WaNxNB)
-2. [Minimal configuration](https://codepen.io/rafa8626/pen/BqazxX)
-3. [Using `fill` mode](https://codepen.io/rafa8626/pen/xxZXQoO)
-4. [Using `fit` mode](https://codepen.io/rafa8626/pen/abmboKV)
-5. [Using Ads (linear and non-linear samples)](https://codepen.io/rafa8626/pen/vVYKav)
-6. [🆕 - Updating Ads and clickable Ad element](https://codepen.io/rafa8626/pen/OJmEzXw)
-7. [Removing controls and using `preload="none"`](https://codepen.io/rafa8626/pen/OJyMwxX)
-8. [Add source after initialization (useful for AJAX)](https://codepen.io/rafa8626/pen/YzzgJrK)
-9. [Fully customized audio player](https://codepen.io/rafa8626/pen/ExPLVRE)
-10. [Playing HLS streaming with DRM (Encryption)](https://codepen.io/rafa8626/pen/QZWEVy)
-11. [M(PEG)-DASH with Ads](https://codepen.io/rafa8626/pen/Xxjmra)
-12. [Basic playlist (video and audio)](https://codepen.io/rafa8626/pen/GRREQpX)
-13. [Ads playlist (multiple URLs)](https://codepen.io/rafa8626/pen/wvvxbMN)
-14. [Retrieve data from audio streaming (HLS)](https://codepen.io/rafa8626/pen/abbjrBW)
-15. [YouTube video (using plugin)](https://codepen.io/rafa8626/pen/wvvOYpg)
-16. [Seamless transitions using custom control](https://codepen.io/rafa8626/pen/oNXmEza)
-17. [OpenPlayerJS with React](https://codepen.io/rafa8626/pen/GRrVLMB)
-18. [OpenPlayerJS with Next.js](https://codesandbox.io/s/vigorous-almeida-71gln)
-19. [OpenPlayerJS with Vue.js](https://codepen.io/rafa8626/pen/JjWPLeo)
-20. [Using `Levels` and setting width/height](https://codepen.io/rafa8626/pen/ExxXvZx)
-21. [Trigger Ad manually](https://codepen.io/rafa8626/pen/abZNgoY)
-22. [Use FLV source (only modern browsers and Android, not iOS)](https://codepen.io/rafa8626/pen/QWEZPaZ)
-23. [Using hls.js p2p plugin](https://codepen.io/rafa8626/pen/PoPLMxo)
+### Beginners
+
+- [No configuration (only DOM classes)](https://codepen.io/rafa8626/pen/WaNxNB)
+- [Minimal configuration](https://codepen.io/rafa8626/pen/BqazxX)
+- [Using `fill` mode](https://codepen.io/rafa8626/pen/xxZXQoO)
+- [Using `fit` mode](https://codepen.io/rafa8626/pen/abmboKV)
+- [Using Ads (linear and non-linear samples)](https://codepen.io/rafa8626/pen/vVYKav)
+- [Removing controls and using `preload="none"`](https://codepen.io/rafa8626/pen/OJyMwxX)
+- [Using `Levels` and setting width/height](https://codepen.io/rafa8626/pen/ExxXvZx)
+- [Use FLV source (only modern browsers and Android, not iOS)](https://codepen.io/rafa8626/pen/QWEZPaZ)
+- [OpenPlayerJS with React](https://codepen.io/rafa8626/pen/GRrVLMB)
+- [OpenPlayerJS with Next.js](https://codesandbox.io/s/vigorous-almeida-71gln)
+- [OpenPlayerJS with Vue.js](https://codepen.io/rafa8626/pen/JjWPLeo)
+- [YouTube video (using plugin)](https://codepen.io/rafa8626/pen/wvvOYpg)
+- [Using hls.js p2p plugin](https://codepen.io/rafa8626/pen/PoPLMxo)
+
+### Intermediate
+
+- [Add source after initialization](https://codepen.io/rafa8626/pen/YzzgJrK)
+- [Playing HLS streaming with DRM (Encryption)](https://codepen.io/rafa8626/pen/QZWEVy)
+- [M(PEG)-DASH with Ads](https://codepen.io/rafa8626/pen/Xxjmra)
+- [Ads playlist (multiple URLs)](https://codepen.io/rafa8626/pen/wvvxbMN)
+
+### Advanced
+
+- [🆕 - Updating source and Ads for dynamic content loading](https://codepen.io/rafa8626/pen/gORJWVz)
+- [🆕 - Updating Ads and clickable Ad element](https://codepen.io/rafa8626/pen/OJmEzXw)
+- [Trigger Ad manually](https://codepen.io/rafa8626/pen/abZNgoY)
+- [Fully customized audio player](https://codepen.io/rafa8626/pen/ExPLVRE)
+- [Basic playlist (video and audio)](https://codepen.io/rafa8626/pen/GRREQpX)
+- [Retrieve data from audio streaming (HLS)](https://codepen.io/rafa8626/pen/abbjrBW)
+- [Seamless transitions between media using custom control](https://codepen.io/rafa8626/pen/oNXmEza)
 
 ## Built With
 

diff --git a/dist/esm/media/ads.js b/dist/esm/media/ads.js
@@ -78,6 +78,7 @@ class Ads {
         __classPrivateFieldSet(this, _Ads_media, player.getMedia(), "f");
         __classPrivateFieldSet(this, _Ads_element, player.getElement(), "f");
         __classPrivateFieldSet(this, _Ads_autoStart, autoStart || false, "f");
+        __classPrivateFieldSet(this, _Ads_adsMuted, player.getElement().muted, "f");
         __classPrivateFieldSet(this, _Ads_autoStartMuted, autoStartMuted || false, "f");
         __classPrivateFieldSet(this, _Ads_adsOptions, Object.assign(Object.assign({}, defaultOpts), options), "f");
         if (options) {

diff --git a/dist/openplayer.css b/dist/openplayer.css
@@ -290,7 +290,7 @@
     -webkit-user-select: none;
         -ms-user-select: none;
             user-select: none;
-    will-change: width,height;
+    will-change: width, height;
     z-index: 4;
 }
 .op-player__audio .op-settings {
@@ -460,7 +460,16 @@
 }
 .op-controls .op-controls__progress--seek.loading {
     animation: progress 2s linear infinite;
-    background: linear-gradient(-45deg, rgba(255, 255, 255, .3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, .3) 75%, transparent 75%, transparent);
+    background: linear-gradient(
+        -45deg,
+        rgba(255, 255, 255, .3) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, .3) 50%,
+        rgba(255, 255, 255, .3) 75%,
+        transparent 75%,
+        transparent
+    );
     background-repeat: repeat-x;
     background-size: 25px 25px;
 }
@@ -569,7 +578,7 @@
     pointer-events: none;
 }
 .op-ads--active .op-controls .op-controls__progress--played {
-    color:#fecb2f;
+    color: #fecb2f;
 }
 .op-ads--active .op-controls .op-controls__progress--buffer {
     color: transparent;
@@ -643,7 +652,7 @@
 }
 .op-controls__tooltip:before,
 .op-controls__tooltip:after {
-    content:'';
+    content: '';
     height: 0;
     left: 0;
     margin: 0 auto;
@@ -766,7 +775,7 @@
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-top: 10px solid rgba(28, 28, 28, .9);
-    content:'';
+    content: '';
     height: 0;
     left: 0;
     margin: 0 auto;
@@ -778,7 +787,7 @@
 
 /* WebVTT cues */
 ::cue {
-    color:#ccc;
+    color: #ccc;
 }
 video:-webkit-media-text-track-display {
     top: -15%;
@@ -797,7 +806,7 @@ video:-webkit-media-text-track-display {
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-top: 10px solid rgba(28, 28, 28, .9);
-    content:'';
+    content: '';
     height: 0;
     left: 0;
     margin: 0 auto;
@@ -858,6 +867,10 @@ video:-webkit-media-text-track-display {
     z-index: 2147483647;
 }
 
+.op-player__audio .op-ads {
+    display: none;
+}
+
 /* === Focus =================== */
 .op-player:focus,
 .op-player__play:focus,

diff --git a/dist/openplayer.js b/dist/openplayer.js
@@ -10820,6 +10820,8 @@ var ads_Ads = function () {
 
     ads_classPrivateFieldSet(this, _Ads_autoStart, autoStart || false, "f");
 
+    ads_classPrivateFieldSet(this, _Ads_adsMuted, player.getElement().muted, "f");
+
     ads_classPrivateFieldSet(this, _Ads_autoStartMuted, autoStartMuted || false, "f");
 
     ads_classPrivateFieldSet(this, _Ads_adsOptions, Object.assign(Object.assign({}, defaultOpts), options), "f");

diff --git a/dist/openplayer.min.css b/dist/openplayer.min.css
diff --git a/dist/openplayer.min.js b/dist/openplayer.min.js
diff --git a/src/css/player.css b/src/css/player.css
@@ -283,7 +283,7 @@
     text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
     transition: right 0.2s ease;
     user-select: none;
-    will-change: width,height;
+    will-change: width, height;
     z-index: 4;
 }
 .op-player__audio .op-settings {
@@ -449,7 +449,16 @@
 }
 .op-controls .op-controls__progress--seek.loading {
     animation: progress 2s linear infinite;
-    background: linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
+    background: linear-gradient(
+        -45deg,
+        rgba(255, 255, 255, 0.3) 25%,
+        transparent 25%,
+        transparent 50%,
+        rgba(255, 255, 255, 0.3) 50%,
+        rgba(255, 255, 255, 0.3) 75%,
+        transparent 75%,
+        transparent
+    );
     background-repeat: repeat-x;
     background-size: 25px 25px;
 }
@@ -558,7 +567,7 @@
     pointer-events: none;
 }
 .op-ads--active .op-controls .op-controls__progress--played {
-    color:#fecb2f;
+    color: #fecb2f;
 }
 .op-ads--active .op-controls .op-controls__progress--buffer {
     color: transparent;
@@ -631,7 +640,7 @@
 }
 .op-controls__tooltip:before,
 .op-controls__tooltip:after {
-    content:'';
+    content: '';
     height: 0;
     left: 0;
     margin: 0 auto;
@@ -753,7 +762,7 @@
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-top: 10px solid rgba(28, 28, 28, 0.9);
-    content:'';
+    content: '';
     height: 0;
     left: 0;
     margin: 0 auto;
@@ -765,7 +774,7 @@
 
 /* WebVTT cues */
 ::cue {
-    color:#ccc;
+    color: #ccc;
 }
 video:-webkit-media-text-track-display {
     top: -15%;
@@ -784,7 +793,7 @@ video:-webkit-media-text-track-display {
     border-left: 10px solid transparent;
     border-right: 10px solid transparent;
     border-top: 10px solid rgba(28, 28, 28, 0.9);
-    content:'';
+    content: '';
     height: 0;
     left: 0;
     margin: 0 auto;
@@ -845,6 +854,10 @@ video:-webkit-media-text-track-display {
     z-index: 2147483647;
 }
 
+.op-player__audio .op-ads {
+    display: none;
+}
+
 /* === Focus =================== */
 .op-player:focus,
 .op-player__play:focus,

diff --git a/src/js/media/ads.ts b/src/js/media/ads.ts
@@ -323,6 +323,7 @@ class Ads {
         this.#media = player.getMedia();
         this.#element = player.getElement();
         this.#autoStart = autoStart || false;
+        this.#adsMuted = player.getElement().muted;
         this.#autoStartMuted = autoStartMuted || false;
         this.#adsOptions = { ...defaultOpts, ...options };
         if (options) {