Skip to content

Commit 009cd3c

Browse files
mgurgelmgurgel
committed
Final naming refactor
1 parent 6563c5a commit 009cd3c

File tree

7 files changed

+89
-109
lines changed

7 files changed

+89
-109
lines changed

‎injected/src/features/duckplayer/assets/mobile-video-drawer.css‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -110,11 +110,22 @@
110110
box-sizing: border-box;
111111
color: var(--drawer-color);
112112
left: 0;
113-
padding: var(--drawer-padding) var(--drawer-padding) calc(var(--drawer-padding) + var(--drawer-buffer));
114-
padding-left: calc(var(--drawer-padding) + env(safe-area-inset-left));
115-
padding-right: calc(var(--drawer-padding) + env(safe-area-inset-right));
116113
position: fixed;
117114
width: 100%;
115+
116+
/* Apply safe-area padding as fallback in case media query below gets removed in the future */
117+
padding-top: var(--drawer-padding);
118+
padding-right: calc(var(--drawer-padding) + env(safe-area-inset-right));
119+
padding-bottom: calc(var(--drawer-padding) + var(--drawer-buffer));
120+
padding-left: calc(var(--drawer-padding) + env(safe-area-inset-left));
121+
}
122+
123+
/* Apply a blanket 18% inline padding on viewports wider than 700px */
124+
@media screen and (min-width: 700px) {
125+
.ddg-mobile-drawer {
126+
padding-left: 18%;
127+
padding-right: 18%;
128+
}
118129
}
119130

120131
.animateIn .ddg-mobile-drawer-background {
@@ -130,7 +141,7 @@
130141
}
131142

132143
.animateOut .ddg-mobile-drawer {
133-
animation: slide-out 300ms cubic-bezier(0.34, 1.3, 0.64, 1) 100ms 1 both;
144+
animation: slide-out 300ms cubic-bezier(0.36, 0, 0.66, -0.3) 100ms 1 both;
134145
}
135146

136147
@keyframes fade-in {

injected/src/features/duckplayer/assets/mobile-video-overlay-alt.css renamed to injected/src/features/duckplayer/assets/mobile-video-thumbnail-overlay.css

File renamed without changes.

‎injected/src/features/duckplayer/components/ddg-video-drawer-mobile.js‎

Lines changed: 4 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -29,8 +29,8 @@ export class DDGVideoDrawerMobile extends HTMLElement {
2929
container;
3030
/** @type {HTMLElement | null} */
3131
drawer;
32-
/** @type {import('./ddg-video-overlay-mobile-alt').DDGVideoOverlayMobileAlt} */
33-
overlay;
32+
/** @type {import('./ddg-video-thumbnail-overlay-mobile').DDGVideoThumbnailOverlay} */
33+
thumbnailOverlay;
3434

3535
connectedCallback() {
3636
this.createMarkupAndStyles();
@@ -168,20 +168,12 @@ export class DDGVideoDrawerMobile extends HTMLElement {
168168

169169
background.addEventListener('click', (e) => {
170170
if (!e.isTrusted || e.target !== background) return;
171-
172-
let isClickOnOverlay = false;
173-
if (this.overlay) {
174-
const event = /** @type {MouseEvent} */ (e);
175-
const rect = this.overlay.getBoundingClientRect();
176-
177-
isClickOnOverlay =
178-
event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
179-
}
180-
181171
e.preventDefault();
182172
e.stopImmediatePropagation();
183173
this.animateOverlay('out');
184174

175+
const mouseEvent = /** @type {MouseEvent} */ (e);
176+
const isClickOnOverlay = this.thumbnailOverlay?.isMouseEventWithinBounds(mouseEvent);
185177
const event = isClickOnOverlay ? DDGVideoDrawerMobile.THUMBNAIL_CLICK : DDGVideoDrawerMobile.DISMISS;
186178

187179
this.dispatchEvent(new CustomEvent(event));

‎injected/src/features/duckplayer/components/ddg-video-overlay-mobile-alt.js‎

Lines changed: 0 additions & 78 deletions
This file was deleted.

‎injected/src/features/duckplayer/components/ddg-video-thumbnail-overlay-mobile.js‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import mobilecss from '../assets/mobile-video-thumbnail-overlay.css';
2+
import { createPolicy, html } from '../../../dom-utils.js';
3+
4+
/**
5+
* @typedef {ReturnType<import("../text").overlayCopyVariants>} TextVariants
6+
* @typedef {TextVariants[keyof TextVariants]} Text
7+
*/
8+
9+
/**
10+
* The custom element that we use to present our UI elements
11+
* over the YouTube player
12+
*/
13+
export class DDGVideoThumbnailOverlay extends HTMLElement {
14+
static CUSTOM_TAG_NAME = 'ddg-video-thumbnail-overlay-mobile';
15+
16+
policy = createPolicy();
17+
/** @type {boolean} */
18+
testMode = false;
19+
20+
connectedCallback() {
21+
this.createMarkupAndStyles();
22+
}
23+
24+
createMarkupAndStyles() {
25+
const shadow = this.attachShadow({ mode: this.testMode ? 'open' : 'closed' });
26+
const style = document.createElement('style');
27+
style.innerText = mobilecss;
28+
const container = document.createElement('div');
29+
const content = this.mobileHtml();
30+
container.innerHTML = this.policy.createHTML(content);
31+
shadow.append(style, container);
32+
this.container = container;
33+
}
34+
35+
/**
36+
* @returns {string}
37+
*/
38+
mobileHtml() {
39+
return html`
40+
<div class="ddg-video-player-overlay">
41+
<div class="bg ddg-vpo-bg"></div>
42+
<div class="logo"></div>
43+
</div>
44+
`.toString();
45+
}
46+
47+
/**
48+
* @param {MouseEvent} event
49+
* @returns {boolean}
50+
*/
51+
isMouseEventWithinBounds(event) {
52+
const rect = this.getBoundingClientRect();
53+
return event.clientX >= rect.left && event.clientX <= rect.right && event.clientY >= rect.top && event.clientY <= rect.bottom;
54+
}
55+
}

‎injected/src/features/duckplayer/components/index.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { DDGVideoOverlay } from './ddg-video-overlay.js';
22
import { customElementsDefine, customElementsGet } from '../../../captured-globals.js';
33
import { DDGVideoOverlayMobile } from './ddg-video-overlay-mobile.js';
4-
import { DDGVideoOverlayMobileAlt } from './ddg-video-overlay-mobile-alt.js';
4+
import { DDGVideoThumbnailOverlay } from './ddg-video-thumbnail-overlay-mobile.js';
55
import { DDGVideoDrawerMobile } from './ddg-video-drawer-mobile.js';
66

77
/**
@@ -19,7 +19,7 @@ export function registerCustomElements() {
1919
if (!customElementsGet(DDGVideoDrawerMobile.CUSTOM_TAG_NAME)) {
2020
customElementsDefine(DDGVideoDrawerMobile.CUSTOM_TAG_NAME, DDGVideoDrawerMobile);
2121
}
22-
if (!customElementsGet(DDGVideoOverlayMobileAlt.CUSTOM_TAG_NAME)) {
23-
customElementsDefine(DDGVideoOverlayMobileAlt.CUSTOM_TAG_NAME, DDGVideoOverlayMobileAlt);
22+
if (!customElementsGet(DDGVideoThumbnailOverlay.CUSTOM_TAG_NAME)) {
23+
customElementsDefine(DDGVideoThumbnailOverlay.CUSTOM_TAG_NAME, DDGVideoThumbnailOverlay);
2424
}
2525
}

‎injected/src/features/duckplayer/video-overlay.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ import { OpenInDuckPlayerMsg, Pixel } from './overlay-messages.js';
3131
import { IconOverlay } from './icon-overlay.js';
3232
import { mobileStrings } from './text.js';
3333
import { DDGVideoOverlayMobile } from './components/ddg-video-overlay-mobile.js';
34-
import { DDGVideoOverlayMobileAlt } from './components/ddg-video-overlay-mobile-alt.js';
34+
import { DDGVideoThumbnailOverlay } from './components/ddg-video-thumbnail-overlay-mobile.js';
3535
import { DDGVideoDrawerMobile } from './components/ddg-video-drawer-mobile.js';
3636

3737
/**
@@ -241,15 +241,16 @@ export class VideoOverlay {
241241
const mobileLayout = 'b';
242242

243243
if (this.environment.layout === 'mobile' && mobileLayout === 'b') {
244-
const elem = /** @type {DDGVideoOverlayMobileAlt} */ (document.createElement(DDGVideoOverlayMobileAlt.CUSTOM_TAG_NAME));
245-
elem.testMode = this.environment.isTestMode();
246-
elem.text = mobileStrings(this.environment.strings);
247-
targetElement.appendChild(elem);
244+
const thumbnailOverlay = /** @type {DDGVideoThumbnailOverlay} */ (
245+
document.createElement(DDGVideoThumbnailOverlay.CUSTOM_TAG_NAME)
246+
);
247+
thumbnailOverlay.testMode = this.environment.isTestMode();
248+
targetElement.appendChild(thumbnailOverlay);
248249

249250
const drawer = /** @type {DDGVideoDrawerMobile} */ (document.createElement(DDGVideoDrawerMobile.CUSTOM_TAG_NAME));
250251
drawer.testMode = this.environment.isTestMode();
251252
drawer.text = mobileStrings(this.environment.strings);
252-
drawer.overlay = elem; /* TODO: Remove hack */
253+
drawer.thumbnailOverlay = thumbnailOverlay;
253254
drawer.addEventListener(DDGVideoDrawerMobile.OPEN_INFO, () => this.messages.openInfo());
254255
drawer.addEventListener(DDGVideoDrawerMobile.OPT_OUT, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
255256
return this.mobileOptOut(e.detail.remember).catch(console.error);
@@ -265,8 +266,8 @@ export class VideoOverlay {
265266
});
266267
overlayElement.appendChild(drawer);
267268

268-
if (elem.container) {
269-
this.appendThumbnail(elem.container);
269+
if (thumbnailOverlay.container) {
270+
this.appendThumbnail(thumbnailOverlay.container);
270271
}
271272
} else if (this.environment.layout === 'mobile') {
272273
const elem = /** @type {DDGVideoOverlayMobile} */ (document.createElement(DDGVideoOverlayMobile.CUSTOM_TAG_NAME));
@@ -296,10 +297,11 @@ export class VideoOverlay {
296297
return () => {
297298
document.querySelector(DDGVideoOverlay.CUSTOM_TAG_NAME)?.remove();
298299
document.querySelector(DDGVideoOverlayMobile.CUSTOM_TAG_NAME)?.remove();
299-
document.querySelector(DDGVideoOverlayMobileAlt.CUSTOM_TAG_NAME)?.remove();
300+
document.querySelector(DDGVideoThumbnailOverlay.CUSTOM_TAG_NAME)?.remove();
300301
setTimeout(() => {
302+
// Allow for drawer to animate out
301303
document.querySelector(DDGVideoDrawerMobile.CUSTOM_TAG_NAME)?.remove();
302-
}, 500); /* TODO FIX THIS */
304+
}, 500);
303305

304306
controller.abort();
305307
};
@@ -477,9 +479,7 @@ export class VideoOverlay {
477479
}
478480

479481
videoThumbnailClick() {
480-
console.log('Video thumbnail clicked');
481482
const pixel = new Pixel({ name: 'play.do_not_use.thumbnail' });
482-
483483
this.messages.sendPixel(pixel);
484484

485485
return this.destroy();

0 commit comments

Comments
 (0)