@latest-thinking/lt-player 1.1.0-r → 1.1.0-t

package/examples/samples/vtt/Sobolev-Anton-Subtitles-20230518_0.vtt

@@ -0,0 +1,352 @@
+WEBVTT
+
+00:00:10.510 --> 00:00:15.850
+These days, no matter where you go online, whether you spend time on social networks
+
+00:00:16.030 --> 00:00:21.775
+or read your favorite online magazines or newspapers, you get bombarded by thousands of ads.
+
+00:00:21.775 --> 00:00:28.270
+Millions of websites such as digital media websites monetize their content by running ads.
+
+00:00:28.270 --> 00:00:31.540
+Some of these ads can be quite valuable for consumers,
+
+00:00:31.540 --> 00:00:36.632
+but the overwhelming volume of these ads can quickly become disturbing.
+
+00:00:36.632 --> 00:00:39.812
+This is the place where ad blockers, simple software programs,
+
+00:00:39.812 --> 00:00:45.002
+come into play in order to prevent ads from being displayed to users.
+
+00:00:45.002 --> 00:00:48.602
+The adoption of ad blockers is becoming more widespread.
+
+00:00:48.602 --> 00:00:52.862
+Recent surveys have shown that 40% of internet users in Germany
+
+00:00:53.372 --> 00:00:59.373
+and 35% of internet users in the US have installed ad blockers on their desktop devices.
+
+00:00:59.373 --> 00:01:01.835
+So how do ad blockers make money?
+
+00:01:01.835 --> 00:01:07.205
+So among different methods of how ad blockers can generate revenues, they often use so-called whitelisting.
+
+00:01:07.205 --> 00:01:13.596
+Under whitelisting, publishers are allowed to show their ads to the consumers.
+
+00:01:13.596 --> 00:01:20.421
+For instance, Adblock Plus, a dominant ad blocker in Germany with 95% market share,
+
+00:01:20.421 --> 00:01:27.981
+asks publishers for 30% of their additional advertising revenue if they want to become whitelisted.
+
+00:01:27.981 --> 00:01:31.806
+While ad blockers can be widely appreciated by users,
+
+00:01:31.806 --> 00:01:38.499
+they pose a serious threat to publishers who rely on ad financing.
+
+00:01:38.499 --> 00:01:44.889
+Additionally, ad blockers affect the way advertisers place their ads in the advertising market,
+
+00:01:44.889 --> 00:01:49.929
+and this in turn affects how advertisers compete with each other in the product market
+
+00:01:50.109 --> 00:01:53.439
+when they sell their final products to consumers.
+
+00:01:53.439 --> 00:01:58.709
+In our study, we explore the strategic and welfare effects of ad blocking.
+
+00:01:58.709 --> 00:02:01.770
+We are interested in the following questions.
+
+00:02:01.770 --> 00:02:06.720
+First of all, who is benefiting and who is losing from the presence of ad blockers?
+
+00:02:06.720 --> 00:02:13.553
+What is the impact of ad blocking on the advertising market and on the product market?
+
+00:02:13.553 --> 00:02:16.012
+We're trying to answer these questions in our study.
+
+00:02:20.144 --> 00:02:22.124
+To investigate these questions,
+
+00:02:22.124 --> 00:02:28.844
+we're building a theoretical model that reconciles the key ingredients of advertising and product markets.
+
+00:02:28.844 --> 00:02:35.594
+The main challenge for us is that we're essentially faced with a complex environment with multiple layers of strategic
+
+00:02:35.624 --> 00:02:36.674
+players.
+
+00:02:36.674 --> 00:02:42.374
+I will provide the simplest framework that helps to think about that environment
+
+00:02:42.854 --> 00:02:46.694
+and introduce all the key players step by step.
+
+00:02:46.694 --> 00:02:55.034
+The supply side of the advertising market is represented by two publishers that bundle their content with advertising.
+
+00:02:55.034 --> 00:03:03.155
+We assume that these publishers are ad funded in the sense that they provide the content to consumers for free
+
+00:03:03.515 --> 00:03:07.985
+and sell advertising slots to the advertisers.
+
+00:03:07.985 --> 00:03:11.195
+We assume that consumers visit both publishers
+
+00:03:11.495 --> 00:03:18.275
+and advertisers can reach consumers by buying ad slots at any of the publishers.
+
+00:03:18.275 --> 00:03:25.295
+It's reasonable to think that if a publisher displays multiple ads to a consumer that these ads become less effective.
+
+00:03:25.295 --> 00:03:29.405
+This could be, for instance, due to the limited attention on the consumer side.
+
+00:03:29.405 --> 00:03:35.975
+Therefore, we assume that each publisher has only one slot to be sold to an advertiser.
+
+00:03:35.975 --> 00:03:42.785
+This, in turn, creates competition between advertisers for the attention of consumers.
+
+00:03:42.785 --> 00:03:47.992
+If one advertiser occupies one ad slot, this slot cannot be taken by the rival advertiser.
+
+00:03:47.992 --> 00:03:51.310
+If competition for consumer attention is extremely high,
+
+00:03:51.310 --> 00:03:57.400
+then advertisers might want to foreclose their rivals by buying both ad slots
+
+00:03:57.520 --> 00:04:01.330
+and gaining the monopolistic position in the product market.
+
+00:04:01.330 --> 00:04:08.580
+Now, with this framework in hand, we can analyze what happens when the ad blocker enters the advertising market.
+
+00:04:12.671 --> 00:04:17.091
+We show that if the product market is highly competitive,
+
+00:04:17.091 --> 00:04:22.911
+then advertisers will fiercely compete in the advertising market.
+
+00:04:22.911 --> 00:04:23.841
+Therefore,
+
+00:04:23.841 --> 00:04:32.601
+advertisers might find it optimal to foreclose their rivals by buying both ad slots on both publishers in order to get
+
+00:04:32.691 --> 00:04:36.351
+and capture the monopoly profits in the product market.
+
+00:04:36.351 --> 00:04:39.651
+If the competition in the product market is low,
+
+00:04:39.651 --> 00:04:44.331
+then there is no threat from the rival advertisers in the product market
+
+00:04:44.361 --> 00:04:51.461
+and therefore they buy only one ad slot in the advertising market in order to get access to consumers.
+
+00:04:51.461 --> 00:04:55.920
+Then, having this nice framework in hand, we explore the strategic
+
+00:04:55.950 --> 00:05:01.170
+and welfare effects of ad blockers entry into the advertising industry.
+
+00:05:01.170 --> 00:05:09.180
+Suppose now that the ad blocker enters the market and some of the consumers install software of this ad blocker.
+
+00:05:09.180 --> 00:05:15.390
+We assume that the ad blocker provides whitelisting opportunities for publishers.
+
+00:05:15.390 --> 00:05:17.730
+If a publisher buys whitelisting,
+
+00:05:17.730 --> 00:05:25.350
+then the advertiser who buys an ad slot from that publisher can get access to consumers who have previously installed
+
+00:05:25.410 --> 00:05:26.700
+the ad blocker.
+
+00:05:26.700 --> 00:05:34.590
+Our key finding reveals that the ad blocker might find it optimal to exclusively sell whitelisting only to one
+
+00:05:34.890 --> 00:05:35.730
+publisher.
+
+00:05:35.730 --> 00:05:42.330
+Then, if the product market is highly competitive, then just as in the case without the ad blocker,
+
+00:05:42.330 --> 00:05:48.360
+advertisers will try to buy both ad slots in order to foreclose the rival advertisers.
+
+00:05:48.360 --> 00:05:53.190
+In this case, the ad blocker doesn't change the competitiveness of the product market
+
+00:05:53.490 --> 00:05:58.110
+and only extracts some surplus from the whitelisted publisher and the advertiser.
+
+00:05:58.110 --> 00:06:05.130
+Otherwise, if competition in the product market is low, then each advertiser is going to buy only one ad slot.
+
+00:06:05.130 --> 00:06:13.260
+The crucial difference with the case without an ad blocker is that now the advertiser who buys an ad slot from the
+
+00:06:13.260 --> 00:06:18.730
+whitelisted publisher is going to get monopoly access to the consumers who have installed the ad blocker.
+
+00:06:18.730 --> 00:06:23.580
+This, as a result, would soften the competition between the advertisers.
+
+00:06:23.580 --> 00:06:29.910
+Therefore, in this case, we can conclude that the ad blocker softens competition in the product market
+
+00:06:30.240 --> 00:06:34.140
+and extracts some surplus not only from the whitelisted publishers and the advertisers,
+
+00:06:34.140 --> 00:06:38.670
+but also from the final consumers who buy the product in the product market.
+
+00:06:42.834 --> 00:06:50.376
+We think that our results are relevant because they can be applied to many markets in which the adoption of ad blockers
+
+00:06:50.390 --> 00:06:51.680
+rapidly grows.
+
+00:06:51.680 --> 00:06:56.090
+There's empirical evidence that ad blocking reduces publishers’ revenue
+
+00:06:56.450 --> 00:07:00.320
+and the number of consumer visits to publisher websites.
+
+00:07:00.320 --> 00:07:07.760
+Moreover, there's empirical evidence showing that ad blocking reduces the ad spending of online advertisers.
+
+00:07:07.760 --> 00:07:12.590
+This confirms the importance of taking into account both the advertising and product markets.
+
+00:07:12.590 --> 00:07:14.390
+So in our study,
+
+00:07:14.390 --> 00:07:20.630
+we advocate for comprehensive analysis of both of these markets in order to evaluate the welfare effects of ad
+
+00:07:20.660 --> 00:07:21.610
+blockers’ entry.
+
+00:07:21.610 --> 00:07:26.150
+Second, our results are relevant because they can be applied in a great number of debates
+
+00:07:26.600 --> 00:07:31.880
+and discussions in Germany about the competitive effects of ad blockers.
+
+00:07:31.880 --> 00:07:41.105
+In Germany, among other publishers, Axel Springer was not very happy about the idea of paying to Adblock Plus,
+
+00:07:41.105 --> 00:07:49.310
+a dominant ad blocker in Germany that first blocks the ads in order to later unblock them,
+
+00:07:49.310 --> 00:07:57.110
+in exchange for a license fee. Unsurprisingly, many publishers call this business practice highway robbery.
+
+00:07:57.110 --> 00:08:04.100
+Since 2014, Axel Springer has been trying to legally confront Adblock Plus without success.
+
+00:08:04.100 --> 00:08:11.480
+In 2019, the Federal Supreme Court of Germany declared that both of the practices, ad blocking and whitelisting,
+
+00:08:11.480 --> 00:08:18.860
+are permissible. Other cases against Adlock Plus were resolved in favor of the ad blocker.
+
+00:08:18.860 --> 00:08:22.850
+Our research demonstrates that ad blockers setting high prices
+
+00:08:22.910 --> 00:08:29.510
+and providing exclusive whitelisting to publishers can undermine competition in the product market.
+
+00:08:29.510 --> 00:08:34.160
+This eventually leads to higher prices that advertisers pay in the advertising market
+
+00:08:34.610 --> 00:08:39.740
+and also to high prices that consumers pay for products in the product market.
+
+00:08:39.740 --> 00:08:43.532
+These arguments are new and haven't been previously explored.
+
+00:08:47.711 --> 00:08:51.761
+We believe that our results are relevant and useful for antitrust authorities
+
+00:08:52.451 --> 00:08:57.941
+and can help them to evaluate the competitive effects of ad blocking and whitelisting.
+
+00:08:57.941 --> 00:09:01.481
+But there are some other considerations that have to be taken into account.
+
+00:09:01.481 --> 00:09:01.811
+First,
+
+00:09:01.811 --> 00:09:10.151
+it is important to study the strategic response of publishers that react to the widespread adoption of ad blockers.
+
+00:09:10.151 --> 00:09:17.861
+We observed that some of the publishers may improve the ad experience of consumers by reducing their ad load.
+
+00:09:17.861 --> 00:09:23.921
+For instance, they may employ more careful selection of ads to be displayed to the users.
+
+00:09:23.921 --> 00:09:30.911
+Some of the publishers tried to fight back against the ad blockers by detecting those consumers who have installed the
+
+00:09:30.941 --> 00:09:35.681
+ad blocker and adjusting their experience on the website accordingly.
+
+00:09:35.681 --> 00:09:42.431
+So, for instance, these consumers can be asked to provide their personal emails, to subscribe to the newsletters
+
+00:09:42.821 --> 00:09:45.731
+or to allow for collecting data.
+
+00:09:45.731 --> 00:09:52.241
+Sometimes these ad blocking visitors can be asked to even turn off their ad blockers
+
+00:09:53.021 --> 00:09:57.461
+or even asked to pay for ad free access to the website.
+
+00:09:57.461 --> 00:10:05.051
+Second, it is important to take into account how advertisers would change their ads in response to ad blocking.
+
+00:10:05.051 --> 00:10:11.441
+We observed that more and more advertisers tried to improve their ad campaigns by focusing more on conversion
+
+00:10:11.471 --> 00:10:13.841
+and clicks rather than just impressions.
+
+00:10:13.841 --> 00:10:19.181
+We also observed that some advertisers are trying to shift to what is called native ads;
+
+00:10:19.751 --> 00:10:25.301
+the ads that are naturally embedded in the true content of the publishers website.
+
+00:10:25.301 --> 00:10:28.301
+Native advertising is becoming more and more popular
+
+00:10:28.631 --> 00:10:33.461
+and can be one of the directions of how online advertising evolves in the future.
+
+00:10:33.461 --> 00:10:39.701
+Although the strategists of publishers and advertisers can push their ad blockers a little bit,
+
+00:10:39.701 --> 00:10:47.351
+we believe that the effects of ad blockers on advertising and product markets will remain significant.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@latest-thinking/lt-player",
-  "version": "1.1.0-r",
+  "version": "1.1.0-t",
   "description": "LT player.",
   "main": "dist/js/lt-player-main.js",
   "module": "dist/js/lt-player-main.js",

package/src/assets/sass/abstracts/_variables.scss

@@ -44,7 +44,7 @@ $lt-player-line-height-default: 1.2;
 // 2. Globals
 //---------------------------------------------
 
-
+$lt-player-padding-xxl: 40px;
 
 //---------------------------------------------
 // 3. Colors

package/src/assets/sass/components/_all.scss

@@ -2,5 +2,5 @@
 @import "buttons";
 @import "images";
 @import "modal";
-@import "spinner";
+@import "loader";
 @import "range";

package/src/assets/sass/components/_loader.scss

@@ -0,0 +1,70 @@
+@import "../abstracts/variables";
+
+.lt-state-loader-active {
+  .lt-player__poster {
+    display: none;
+  }
+
+  .loader {
+    display: inline-block;
+
+    &__backdrop {
+      display: block;
+    }
+  }
+}
+
+.loader {
+  @include center-position(50%, 50%);
+  display: none;
+  width: 80px;
+  height: 80px;
+
+  &__backdrop {
+    position: absolute;
+    inset: 0;
+    display: none;
+    z-index: 999;
+    background-color: rgb(0,0,0,0.2);
+  }
+}
+
+.loader div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: 64px;
+  height: 64px;
+  margin: 8px;
+  border: 8px solid $default-lt-player-white;
+  border-radius: 50%;
+  animation: rotate 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: $default-lt-player-white transparent transparent transparent;
+}
+
+.loader div:nth-child(1) {
+  animation-delay: -0.45s;
+}
+
+.loader div:nth-child(2) {
+  animation-delay: -0.3s;
+}
+
+.loader div:nth-child(3) {
+  animation-delay: -0.15s;
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.lt-player-orientation--portrait {
+  .loader {
+    top: 35%;
+  }
+}

package/src/assets/sass/core/_player.scss

@@ -27,7 +27,6 @@
 }
 
 .plyr {
-  border-radius: 0 0 0 30px;
   z-index: unset!important;
   width: 100%;
   &__video-embed {
@@ -59,6 +58,9 @@
 }
 
 .lt-player {
+  border-radius: 0 0 0 30px;
+  overflow: hidden;
+
   &.fullscreen-disabled {
     .fullscreen-custom-control {
       display: none;

package/src/assets/sass/sections/_additional-info.scss

@@ -82,7 +82,7 @@
   height: 100%;
 }
 
-.is-fullscreen {
+.lt-state-fullscreen {
   .lt-player__additional-info,
   .lt-player__additional-info-mobile {
     display: none;

package/src/assets/sass/sections/_settings.scss

@@ -515,7 +515,7 @@
         border: none;
 
         &__subtitles {
-          padding: 16px 24px 24px;
+          padding: 16px 24px 0 24px;
         }
 
         .line-button {

package/src/assets/sass/sections/_subtitles.scss

@@ -9,23 +9,24 @@
 }
 
 .lt-player-custom-captions {
-  margin-bottom: 16px;
+  display: inline-block;
+  background-color: rgba($default_color_player, 0.8);
+  margin: 0 $lt-player-padding-xxl / 2 16px $lt-player-padding-xxl / 2;
+  padding: 8px 12px;
+
+  &:is(:not(span)) {
+    padding: 0;
+  }
 
   span {
-    display: flex;
-    justify-content: center;
-    margin: auto;
-    width: 100%;
-    color: $default-lt-player-black;
-    background-color: rgba(216, 216, 70, 0.7);
+    font-family: $lt-font-family-base;
     font-size: $lt-player-font-size-lg;
     line-height: $lt-player-line-height;
     font-weight: $lt-player-font-weight-md;
-    padding: 8px 12px;
-    border-radius: 40px;
-    font-family: "MuseoSans", sans-serif;
+    color: $default-lt-player-black;
     white-space: unset;
     box-decoration-break: clone;
+    padding: 0 16px;
 
     &:empty {
       padding: 0;
@@ -33,10 +34,48 @@
   }
 }
 
+.lt-player-orientation--portrait {
+  .lt-player-custom-captions {
+    margin: 0 0 16px 0;
+  }
+}
+
+.lt-player-orientation--landscape {
+  .lt-player-custom-captions {
+    span {
+      font-size: $lt-player-font-size-sm;
+      border-radius: 0;
+    }
+  }
+
+  &.lt-state-controls-visible {
+    .lt-player-custom-captions {
+      display: none;
+    }
+  }
+}
+
 @container portrait (width < 319px) {
   .lt-player-custom-captions {
     span {
       font-size: $lt-player-font-size-sm;
     }
   }
-}
+}
+
+@container landscape (width > 639px) {
+  .lt-player-orientation--landscape {
+    .lt-player-custom-captions {
+      span {
+        font-size: $lt-player-font-size-lg;
+      }
+    }
+
+    &.lt-state-controls-visible {
+      .lt-player-custom-captions {
+        margin: 0 $lt-player-padding-xxl 16px $lt-player-padding-xxl;
+        display: inline-block;
+      }
+    }
+  }
+}

package/src/assets/sass/sections/controllers/_botom.scss

@@ -117,7 +117,7 @@
         bottom: 0;
         height: 40%;
         background: var(--plyr-video-controls-background,linear-gradient(transparent,rgba(0,0,0,.75)));
-        border-radius: 0 0 0 30px;
+        z-index: -1;
       }
 
       &__volume_control {
@@ -311,6 +311,32 @@
   }
 }
 
+.lt-player-orientation--landscape {
+  .plyr {
+    &__progress {
+      &--wrapper {
+        padding: 0 $lt-player-padding-xxl / 2;
+
+        .bottom-controller__current {
+          display: none;
+        }
+      }
+    }
+
+    &__controls {
+      .bottom-controller {
+        padding: 0 $lt-player-padding-xxl / 2 15px $lt-player-padding-xxl / 2;
+      }
+    }
+  }
+
+  &:not(.lt-state-controls-visible) {
+    .bottom-controller__background {
+      display: none;
+    }
+  }
+}
+
 // @Container Query
 
 @container portrait (width > 319px) {
@@ -367,13 +393,17 @@
     .plyr {
       &__progress {
         &--wrapper {
-          padding: 0 20px;
+          padding: 0 $lt-player-padding-xxl / 2;
+
+          .bottom-controller__current {
+            display: flex;
+          }
         }
       }
 
       &__controls {
         .bottom-controller {
-          padding: 25px 20px;
+          padding: 0 $lt-player-padding-xxl / 2 25px $lt-player-padding-xxl / 2;
 
           &__center-buttons {
             gap: 20px;
@@ -394,13 +424,13 @@
     .plyr {
       &__progress {
         &--wrapper {
-          padding: 0 40px;
+          padding: 0 $lt-player-padding-xxl;
         }
       }
 
       &__controls {
         .bottom-controller {
-          padding: 25px 40px;
+          padding: 0 $lt-player-padding-xxl 25px $lt-player-padding-xxl;
 
           &__left-buttons,
           &__right-buttons {
@@ -413,7 +443,7 @@
 
           &__volume_control {
             display: flex;
-            left: 100px;
+            left: 80px;
           }
 
           .mini-player-control {
@@ -430,30 +460,18 @@
   }
 }
 
-@container landscape (width > 759px) {
-  .lt-player-orientation--landscape {
-    .plyr {
-      &__controls {
-        .bottom-controller {
-
-        }
-      }
-    }
-  }
-}
-
 @container landscape (width > 912px) {
   .lt-player-orientation--landscape {
     .plyr {
       &__progress {
         &--wrapper {
-          padding: 0 40px;
+          padding: 0 $lt-player-padding-xxl;
         }
       }
 
       &__controls {
         .bottom-controller {
-          padding: 28px 40px;
+          padding: 0 $lt-player-padding-xxl 28px $lt-player-padding-xxl;
 
           &__left-buttons,
           &__right-buttons {
@@ -464,6 +482,10 @@
             gap: 32px;
           }
 
+          &__volume_control {
+            left: 100px;
+          }
+
           &__next-chapter-view,
           &__previous-chapter-view {
             font-size: $lt-player-font-size-lg2;
@@ -490,6 +512,7 @@
           &__previous-chapter-view,
           &__next-chapter-view {
             display: flex;
+            gap: 8px;
           }
         }
       }