@latest-thinking/lt-player 1.1.0 → 1.2.0

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/examples/samples/vtt/demo.vtt

@@ -0,0 +1,7 @@
+WEBVTT
+
+00:00:00.500 --> 00:00:20.000
+The Web is always changing and the way we access it is changing and the way we access it is changing<br> Hello <br> and the way we access it is changing
+
+00:00:20.500 --> 00:00:60.300
+and the way we access it is changing

package/package.json

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

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

@@ -2,7 +2,7 @@
   position: absolute;
   top: $top;
   left: $top;
-  transform: translate(-#{$top}, -#{$top});
+  translate: -#{$top} -#{$top};
 }
 
 @mixin flex-position($flex, $content, $align) {

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/app.scss

@@ -35,6 +35,17 @@ body {
 .lt-player {
   display: flex;
   width: 100%;
+
+
+  &__player {
+    &--no-radius {
+      border-radius: 0 !important;
+    }
+  }
+
+  .plyr--video {
+    background: transparent;
+  }
 }
 
 .lt-player-orientation {
@@ -47,6 +58,14 @@ body {
   }
 }
 
+.lt-player:has(.plyr--fullscreen-fallback) {
+  container-type: normal;
+
+  .plyr--video {
+    background: black;
+  }
+}
+
 .invisible {
   visibility: hidden;
 }

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,187 @@
+@import "../abstracts/variables";
+
+.lt-state-loader-active {
+  .lt-player__poster {
+    display: none;
+  }
+
+  .loader {
+    display: inline-block;
+
+    &__backdrop {
+      display: block;
+    }
+  }
+}
+
+.loader {
+  --_loader-dimensions: 80px;
+
+  @include center-position(50%, 50%);
+  display: none;
+  width: var(--_loader-dimensions);
+  height: var(--_loader-dimensions);
+
+  &__backdrop {
+    position: absolute;
+    inset: 0;
+    display: none;
+    z-index: 2;
+    background-color: rgb(0, 0, 0, 0.2);
+  }
+
+  div {
+    position: absolute;
+    display: block;
+    width: calc((var(--_loader-dimensions) / 10) * 8);
+    height: calc((var(--_loader-dimensions) / 10) * 8);
+    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;
+
+    &:nth-child(1) {
+      animation-delay: -0.45s;
+    }
+
+    &:nth-child(2) {
+      animation-delay: -0.3s;
+    }
+
+    &:nth-child(3) {
+      animation-delay: -0.15s;
+    }
+  }
+}
+
+@keyframes rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.lt-player-orientation--portrait {
+  .loader {
+    top: 35%;
+  }
+}
+
+.lt-player-orientation--landscape {
+  .loader {
+    --_loader-dimensions: 40px;
+  }
+
+  &.lt-state-loader-active {
+    &.lt-state-captions-enabled {
+      .loader {
+        --_top-positon: 40%;
+        top: var(--_top-positon);
+        translate: -50% calc(var(--_top-positon) * -1);
+      }
+    }
+
+    &:not(&.lt-state-captions-enabled) {
+      .loader {
+        --_top-positon: 30%;
+        top: var(--_top-positon);
+        translate: -50% calc(var(--_top-positon) * -1);
+      }
+    }
+  }
+}
+
+@container landscape (width > 479px) {
+  .lt-player-orientation--landscape {
+    .loader {
+      --_loader-dimensions: 80px;
+    }
+
+    &.lt-state-loader-active {
+      &.lt-state-captions-enabled {
+        .loader {
+          --_top-positon: 35%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+
+      &:not(&.lt-state-captions-enabled) {
+        .loader {
+          --_top-positon: 35%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 639px) {
+  .lt-player-orientation--landscape {
+    &.lt-state-loader-active {
+      &.lt-state-captions-enabled {
+        .loader {
+          --_top-positon: 20%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+
+      &:not(&.lt-state-captions-enabled) {
+        .loader {
+          --_top-positon: 35%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 759px) {
+  .lt-player-orientation--landscape {
+    &.lt-state-loader-active {
+      &.lt-state-captions-enabled {
+        .loader {
+          --_top-positon: 25%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+
+      &:not(&.lt-state-captions-enabled) {
+        .loader {
+          --_top-positon: 35%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+    }
+  }
+}
+
+@container landscape (width > 912px) {
+  .lt-player-orientation--landscape {
+    &.lt-state-loader-active {
+      &.lt-state-captions-enabled {
+        .loader {
+          --_top-positon: 30%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+
+      &:not(&.lt-state-captions-enabled) {
+        .loader {
+          --_top-positon: 40%;
+          top: var(--_top-positon);
+          translate: -50% calc(var(--_top-positon) * -1);
+        }
+      }
+    }
+  }
+}

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

@@ -60,6 +60,12 @@ $modal-max-width: 620px;
   @include yellow-btn;
 }
 
+body[modal-open-body] {
+  //position: fixed;
+  width: 100%;
+  overflow-x: hidden;
+}
+
 .lt-player-portrate--mobile {
   &.lt-player--portrait {
     &__lg,

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

@@ -18,16 +18,11 @@
   visibility: hidden;
 }
 
-.plyr--video {
-  background: transparent !important;
-}
-
 .plyr__video-wrapper {
   background: transparent !important;
 }
 
 .plyr {
-  border-radius: 0 0 0 30px;
   z-index: unset!important;
   width: 100%;
   &__video-embed {
@@ -50,4 +45,27 @@
   .fullscreen-custom-control {
     display: none !important;
   }
+}
+
+.lt-player-wrapper {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.lt-player {
+  border-radius: 0 0 0 30px;
+  overflow: hidden;
+
+  &.fullscreen-disabled {
+    .fullscreen-custom-control {
+      display: none;
+    }
+  }
+}
+
+.lt-player-orientation--landscape {
+  .lt-player-wrapper {
+    object-fit: contain;
+  }
 }

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/_control.scss

@@ -21,7 +21,6 @@
     background: none!important;
     display: flex!important;
     flex-direction: column;
-    justify-content: space-between!important;
     position: relative;
     padding: 0!important;
   }

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

@@ -316,3 +316,4 @@
     }
   }
 }
+