Release build 7.20.0 [ci release]

Author: mgurgel

CHANGELOG.txt

@@ -1,3 +1,2 @@
-- Windows support for Malicious website protection (#1423)
-- history: adding item selection (#1486)
-- Duck Player screenshot update (#1489)
+- Duck Player Custom Error Translations (#1500)
+- Custom error messages for Duck Player (#1421)

Sources/ContentScopeScripts/dist/pages/duckplayer/dist/index.css

@@ -61,6 +61,7 @@ body[data-display=app] {
 
 /* pages/duckplayer/app/components/Components.module.css */
 .Components_main {
+  background-color: #000;
   color: white;
   max-width: 3840px;
   margin: 0 auto;
@@ -112,7 +113,7 @@ body[data-display=app] {
   text-decoration: none;
 }
 [data-layout=mobile] .Button_button {
-  background-color: #2f2f2f;
+  background-color: rgba(255, 255, 255, 0.12);
 }
 .Button_button:hover,
 .Button_button:focus-visible {
@@ -188,7 +189,7 @@ body[data-display=app] {
 .SwitchBarMobile_switchBar {
   display: grid;
   border-radius: 8px;
-  background: #2f2f2f;
+  background: rgba(255, 255, 255, 0.12);
   padding-inline: 16px;
   height: 100%;
   line-height: 1.1;
@@ -518,6 +519,9 @@ body[data-display=app] {
   .Wordmark_mobile_logo {
     height: 100px;
   }
+  [data-youtube-error=true] .Wordmark_mobile_logo {
+    height: 44px;
+  }
 }
 .Wordmark_mobile_logoSvg img {
   display: block;
@@ -589,6 +593,127 @@ body[data-display=app] {
   }
 }
 
+/* pages/duckplayer/app/components/YouTubeError.module.css */
+.YouTubeError_error {
+  align-items: center;
+  background: rgba(0, 0, 0, 0.6);
+  display: grid;
+  height: 100%;
+  justify-items: center;
+}
+.YouTubeError_error.YouTubeError_desktop {
+  height: var(--frame-height);
+  overflow: hidden;
+  position: relative;
+  z-index: 1;
+}
+.YouTubeError_error.YouTubeError_mobile {
+  border-radius: var(--inner-radius);
+  height: 100%;
+  overflow: auto;
+  text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+@media screen and (min-width: 600px) and (min-height: 600px) {
+  .YouTubeError_error.YouTubeError_mobile {
+    aspect-ratio: 16 / 9;
+  }
+}
+.YouTubeError_desktop {
+  border-top-left-radius: var(--outer-radius);
+  border-top-right-radius: var(--outer-radius);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.YouTubeError_container {
+  column-gap: 24px;
+  display: flex;
+  flex-flow: row;
+  margin: 0;
+  max-width: 680px;
+  padding: 0 40px;
+  row-gap: 4px;
+}
+.YouTubeError_mobile .YouTubeError_container {
+  flex-flow: column;
+  padding: 0 24px;
+}
+@media screen and (min-height: 320px) {
+  .YouTubeError_mobile .YouTubeError_container {
+    margin: 16px 0;
+  }
+}
+@media screen and (min-width: 375px) and (min-height: 400px) {
+  .YouTubeError_mobile .YouTubeError_container {
+    margin: 36px 0;
+  }
+}
+.YouTubeError_content {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 16px 0;
+}
+@media screen and (min-width: 600px) {
+  .YouTubeError_content {
+    margin: 24px 0;
+  }
+}
+.YouTubeError_icon {
+  align-self: center;
+  display: flex;
+  justify-content: center;
+}
+.YouTubeError_icon::before {
+  content: " ";
+  display: block;
+  background: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 96 96" xmlns="http://www.w3.org/2000/svg">%0A  <path fill="red" d="M47.5 70.802c1.945 0 3.484-1.588 3.841-3.5C53.076 58.022 61.218 51 71 51h4.96c2.225 0 4.04-1.774 4.04-4 0-.026-.007-9.022-1.338-14.004a8.02 8.02 0 0 0-5.659-5.658C68.014 26 48 26 48 26s-20.015 0-25.004 1.338a8.01 8.01 0 0 0-5.658 5.658C16 37.986 16 48.401 16 48.401s0 10.416 1.338 15.405a8.01 8.01 0 0 0 5.658 5.658c4.99 1.338 24.504 1.338 24.504 1.338"/>%0A  <path fill="%23fff" d="m41.594 58 16.627-9.598-16.627-9.599z"/>%0A  <path fill="%23EB102D" d="M87 71c0 8.837-7.163 16-16 16s-16-7.163-16-16 7.163-16 16-16 16 7.163 16 16"/>%0A  <path fill="%23fff" d="M73 77.8a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-2.039-4.4c-.706 0-1.334-.49-1.412-1.12l-.942-8.75c-.079-.7.55-1.33 1.412-1.33h1.962c.785 0 1.492.63 1.413 1.33l-.942 8.75c-.157.63-.784 1.12-1.49 1.12Z"/>%0A  <path fill="%23CCC" d="M92.501 59c.298 0 .595.12.823.354.454.468.454 1.23 0 1.698l-2.333 2.4a1.145 1.145 0 0 1-1.65 0 1.227 1.227 0 0 1 0-1.698l2.333-2.4c.227-.234.524-.354.822-.354zm-1.166 10.798h3.499c.641 0 1.166.54 1.166 1.2s-.525 1.2-1.166 1.2h-3.499c-.641 0-1.166-.54-1.166-1.2s.525-1.2 1.166-1.2m-1.982 8.754c.227-.234.525-.354.822-.354h.006c.297 0 .595.12.822.354l2.332 2.4c.455.467.455 1.23 0 1.697a1.145 1.145 0 0 1-1.65 0l-2.332-2.4a1.227 1.227 0 0 1 0-1.697"/>%0A</svg>%0A') no-repeat;
+  height: 48px;
+  width: 48px;
+}
+@media screen and (max-width: 320px) {
+  .YouTubeError_icon {
+    display: none;
+  }
+}
+@media screen and (min-width: 600px) and (min-height: 600px) {
+  .YouTubeError_icon {
+    justify-content: start;
+  }
+  .YouTubeError_icon::before {
+    background-image: url('data:image/svg+xml,<svg fill="none" viewBox="0 0 128 96" xmlns="http://www.w3.org/2000/svg">%0A  <path fill="%23888" d="M16.912 31.049a1.495 1.495 0 0 1 2.114-2.114l1.932 1.932 1.932-1.932a1.495 1.495 0 0 1 2.114 2.114l-1.932 1.932 1.932 1.932a1.495 1.495 0 0 1-2.114 2.114l-1.932-1.933-1.932 1.933a1.494 1.494 0 1 1-2.114-2.114l1.932-1.932zM.582 52.91a1.495 1.495 0 0 1 2.113-2.115l1.292 1.292 1.291-1.292a1.495 1.495 0 1 1 2.114 2.114L6.1 54.2l1.292 1.292a1.495 1.495 0 1 1-2.113 2.114l-1.292-1.292-1.292 1.292a1.495 1.495 0 1 1-2.114-2.114l1.292-1.291zm104.972-15.452a1.496 1.496 0 0 1 2.114-2.114l1.291 1.292 1.292-1.292a1.495 1.495 0 0 1 2.114 2.114l-1.292 1.291 1.292 1.292a1.494 1.494 0 1 1-2.114 2.114l-1.292-1.292-1.291 1.292a1.495 1.495 0 0 1-2.114-2.114l1.292-1.292zM124.5 54c-.825 0-1.5-.675-1.5-1.5s.675-1.5 1.5-1.5 1.5.675 1.5 1.5-.675 1.5-1.5 1.5M24 67c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2" opacity=".2"/>%0A  <path fill="red" d="M63.5 70.802c1.945 0 3.484-1.588 3.841-3.5C69.076 58.022 77.218 51 87 51h4.96c2.225 0 4.04-1.774 4.04-4 0-.026-.007-9.022-1.338-14.004a8.02 8.02 0 0 0-5.659-5.658C84.014 26 64 26 64 26s-20.014 0-25.004 1.338a8.01 8.01 0 0 0-5.658 5.658C32 37.986 32 48.401 32 48.401s0 10.416 1.338 15.405a8.01 8.01 0 0 0 5.658 5.658c4.99 1.338 24.504 1.338 24.504 1.338"/>%0A  <path fill="%23fff" d="m57.594 58 16.627-9.598-16.627-9.599z"/>%0A  <path fill="%23EB102D" d="M103 71c0 8.837-7.163 16-16 16s-16-7.163-16-16 7.163-16 16-16 16 7.163 16 16"/>%0A  <path fill="%23fff" d="M89 77.8a2 2 0 1 1-4 0 2 2 0 0 1 4 0m-2.039-4.4c-.706 0-1.334-.49-1.412-1.12l-.942-8.75c-.079-.7.55-1.33 1.412-1.33h1.962c.785 0 1.492.63 1.413 1.33l-.942 8.75c-.157.63-.784 1.12-1.49 1.12Z"/>%0A  <path fill="%23CCC" d="M108.501 59c.298 0 .595.12.823.354.454.468.454 1.23 0 1.698l-2.333 2.4a1.145 1.145 0 0 1-1.65 0 1.226 1.226 0 0 1 0-1.698l2.332-2.4c.228-.234.525-.354.823-.354zm-1.166 10.798h3.499c.641 0 1.166.54 1.166 1.2s-.525 1.2-1.166 1.2h-3.499c-.641 0-1.166-.54-1.166-1.2s.525-1.2 1.166-1.2m-1.982 8.754c.227-.234.525-.354.822-.354h.006c.297 0 .595.12.822.354l2.333 2.4c.454.467.454 1.23 0 1.697a1.146 1.146 0 0 1-1.651 0l-2.332-2.4a1.226 1.226 0 0 1 0-1.697"/>%0A</svg>%0A');
+    height: 96px;
+    width: 128px;
+  }
+}
+.YouTubeError_heading {
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: calc(24 / 20);
+  margin: 0;
+}
+.YouTubeError_messages {
+  color: #ccc;
+  font-size: 16px;
+  line-height: calc(24 / 16);
+}
+div.YouTubeError_messages {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+}
+div.YouTubeError_messages p {
+  margin: 0;
+}
+p.YouTubeError_messages {
+  margin: 0;
+}
+ul.YouTubeError_messages li {
+  list-style: disc;
+  margin-left: 24px;
+}
+
 /* pages/duckplayer/app/components/MobileApp.module.css */
 body[data-display=app] {
   padding: 8px;
@@ -626,6 +751,7 @@ html[data-focus-mode=on] .MobileApp_hideInFocus {
   --inner-radius: 12px;
   --logo-width: 157px;
   --inner-padding: 8px;
+  --mobile-buttons-padding: 8px;
   position: relative;
   max-width: 100vh;
   margin: 0 auto;
@@ -681,6 +807,15 @@ html[data-focus-mode=on] .MobileApp_embed {
   grid-area: switch;
   height: 44px;
 }
+.MobileApp_detachedControls {
+  grid-area: detached;
+  display: flex;
+  flex-flow: column;
+  gap: 8px;
+  padding: 8px;
+  background: #2f2f2f;
+  border-radius: 12px;
+}
 @media screen and (min-width: 425px) and (max-height: 600px) {
   .MobileApp_main {
     grid-template-rows: max-content auto max-content max-content 12px max-content auto;
@@ -774,6 +909,71 @@ html[data-focus-mode=on] .MobileApp_embed {
     justify-content: end;
   }
 }
+@media screen and (max-width: 599px) {
+  .MobileApp_main[data-youtube-error=true] {
+    --bg-color: transparent;
+    --inner-padding: 4px;
+    grid-template-areas: "logo" "gap3" "embed" "gap4" "switch" "buttons";
+    grid-template-rows: max-content 16px auto 12px max-content max-content;
+  }
+  .MobileApp_main[data-youtube-error=true] .MobileApp_embed {
+    background: #2f2f2f;
+    border-radius: var(--outer-radius);
+    padding: 4px;
+  }
+  .MobileApp_main[data-youtube-error=true] .MobileApp_switch {
+    background: #2f2f2f;
+    padding: 8px 8px 0 8px;
+    height: 60px;
+    max-height: 60px;
+    border-top-left-radius: var(--outer-radius);
+    border-top-right-radius: var(--outer-radius);
+    transition: all 0.3s;
+  }
+  .MobileApp_main[data-youtube-error=true] .MobileApp_buttons {
+    background: #2f2f2f;
+    padding: 8px;
+    transition: all 0.3s;
+  }
+  .MobileApp_main[data-youtube-error=true]:has([data-state=completed]) .MobileApp_buttons {
+    border-radius: var(--outer-radius);
+  }
+  .MobileApp_main[data-youtube-error=true]:has([data-state=completed]) .MobileApp_switch {
+    background: transparent;
+    max-height: 0;
+  }
+}
+@media screen and (max-width: 599px) and (max-height: 599px) {
+  .MobileApp_main[data-youtube-error=true] {
+    max-width: unset;
+    grid-template-rows: 0 0 auto 12px 0 max-content;
+  }
+  .MobileApp_main[data-youtube-error=true] :is(.MobileApp_logo, .MobileApp_switch) {
+    display: none;
+  }
+  .MobileApp_main[data-youtube-error=true] .MobileApp_buttons {
+    border-radius: var(--outer-radius);
+  }
+}
+@media screen and (min-width: 600px) and (max-height: 450px) {
+  .MobileApp_main[data-youtube-error=true] {
+    grid-template-areas: "embed" "buttons" "gap5";
+    grid-template-rows: auto max-content 8px;
+  }
+  .MobileApp_main[data-youtube-error=true] .MobileApp_buttons {
+    border-radius: var(--outer-radius);
+    display: block;
+  }
+}
+@media screen and (max-height: 320px) {
+  .MobileApp_main[data-youtube-error=true] .MobileApp_embed {
+    overflow-y: auto;
+  }
+  .MobileApp_main[data-youtube-error=true] .MobileApp_buttons {
+    bottom: 0;
+    position: sticky;
+  }
+}
 
 /* pages/duckplayer/app/components/MobileButtons.module.css */
 .MobileButtons_buttons {