Skip to content

Commit 28da612

Browse files
mgurgelmgurgel
committed
Event handling
1 parent 0c906d6 commit 28da612

File tree

6 files changed

+57
-25
lines changed

6 files changed

+57
-25
lines changed

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ export class DDGVideoDrawerMobile extends HTMLElement {
1818
static OPT_IN = 'opt-in';
1919
static OPT_OUT = 'opt-out';
2020
static DISMISS = 'dismiss';
21+
static THUMBNAIL_CLICK = 'thumbnail-click';
2122

2223
policy = createPolicy();
2324
/** @type {boolean} */
@@ -28,6 +29,8 @@ export class DDGVideoDrawerMobile extends HTMLElement {
2829
container;
2930
/** @type {HTMLElement | null} */
3031
drawer;
32+
/** @type {import('./ddg-video-overlay-mobile-alt').DDGVideoOverlayMobileAlt} */
33+
overlay;
3134

3235
connectedCallback() {
3336
this.createMarkupAndStyles();
@@ -165,10 +168,23 @@ export class DDGVideoDrawerMobile extends HTMLElement {
165168

166169
background.addEventListener('click', (e) => {
167170
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+
168181
e.preventDefault();
169182
e.stopImmediatePropagation();
170183
this.animateOverlay('out');
171-
this.dispatchEvent(new CustomEvent(DDGVideoDrawerMobile.DISMISS));
184+
185+
const event = isClickOnOverlay ? DDGVideoDrawerMobile.THUMBNAIL_CLICK : DDGVideoDrawerMobile.DISMISS;
186+
187+
this.dispatchEvent(new CustomEvent(event));
172188
});
173189

174190
watchInPlayer.addEventListener('click', (e) => {

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

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,15 @@ import { createPolicy, html } from '../../../dom-utils.js';
1212
*/
1313
export class DDGVideoOverlayMobileAlt extends HTMLElement {
1414
static CUSTOM_TAG_NAME = 'ddg-video-overlay-mobile-alt';
15-
static OPEN_INFO = 'open-info';
16-
static OPT_IN = 'opt-in';
17-
static OPT_OUT = 'opt-out';
15+
// static OPT_OUT = 'opt-out';
1816

1917
policy = createPolicy();
2018
/** @type {boolean} */
2119
testMode = false;
2220
/** @type {Text | null} */
2321
text = null;
22+
/** @type {HTMLElement} */
23+
overlay;
2424

2525
connectedCallback() {
2626
this.createMarkupAndStyles();
@@ -64,14 +64,15 @@ export class DDGVideoOverlayMobileAlt extends HTMLElement {
6464
return console.warn('missing elements');
6565
}
6666

67-
overlay.addEventListener('click', (e) => {
68-
console.log('CLICKED');
69-
if (!e.isTrusted) return;
70-
e.preventDefault();
71-
e.stopImmediatePropagation();
72-
this.dispatchEvent(
73-
new CustomEvent(DDGVideoOverlayMobile.OPT_OUT, { detail: { remember: false } }),
74-
); /* TODO: get actual value of remember */
75-
});
67+
// overlay.addEventListener('click', (e) => {
68+
// console.log('BACKGROUND CLICKED');
69+
// if (!e.isTrusted) return;
70+
// e.preventDefault();
71+
// e.stopImmediatePropagation();
72+
// this.dispatchEvent(
73+
// new CustomEvent(DDGVideoOverlayMobileAlt.OPT_OUT),
74+
// );
75+
// });
76+
this.overlay = /** @type {HTMLElement} */ (overlay);
7677
}
7778
}

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import css from '../assets/video-overlay.css';
22
import dax from '../assets/dax.svg';
33
import { overlayCopyVariants } from '../text.js';
44
import { appendImageAsBackground } from '../util.js';
5-
import { VideoOverlay } from '../video-overlay-alt.js';
5+
import { VideoOverlay } from '../video-overlay.js';
66
import { createPolicy, html, trustedUnsafe } from '../../../dom-utils.js';
77

88
/**

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

Lines changed: 1 addition & 1 deletion
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 { DDGVideoOverlayMobile as DDGVideoOverlayMobileAlt } from './ddg-video-overlay-mobile-alt.js';
4+
import { DDGVideoOverlayMobileAlt } from './ddg-video-overlay-mobile-alt.js';
55
import { DDGVideoDrawerMobile } from './ddg-video-drawer-mobile.js';
66

77
/**

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -156,7 +156,8 @@ export class Pixel {
156156
* @param {{name: "overlay"}
157157
* | {name: "play.use", remember: "0" | "1"}
158158
* | {name: "play.use.thumbnail"}
159-
* | {name: "play.do_not_use", remember: "0" | "1"}} input
159+
* | {name: "play.do_not_use", remember: "0" | "1"}
160+
* | {name: "duckplayer.overlay.youtube.watch.here.video-thumbnail"}} input
160161
*/
161162
constructor(input) {
162163
this.input = input;
@@ -176,6 +177,8 @@ export class Pixel {
176177
case 'play.do_not_use': {
177178
return { remember: this.input.remember };
178179
}
180+
case 'duckplayer.overlay.youtube.watch.here.video-thumbnail':
181+
return {};
179182
default:
180183
throw new Error('unreachable');
181184
}

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

Lines changed: 21 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -240,29 +240,26 @@ export class VideoOverlay {
240240
/** @type {'a'|'b'} */
241241
const mobileLayout = 'b';
242242

243-
if (this.environment.layout === 'mobile' && mobileLayout === 'a') {
244-
const elem = /** @type {DDGVideoOverlayMobileAlt} */ (document.createElement(DDGVideoOverlayMobile.CUSTOM_TAG_NAME));
243+
if (this.environment.layout === 'mobile' && mobileLayout === 'b') {
244+
const elem = /** @type {DDGVideoOverlayMobileAlt} */ (document.createElement(DDGVideoOverlayMobileAlt.CUSTOM_TAG_NAME));
245245
elem.testMode = this.environment.isTestMode();
246246
elem.text = mobileStrings(this.environment.strings);
247-
elem.addEventListener(DDGVideoOverlayMobileAlt.OPEN_INFO, () => this.messages.openInfo());
248-
elem.addEventListener(DDGVideoOverlayMobileAlt.OPT_OUT, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
249-
return this.mobileOptOut(e.detail.remember).catch(console.error);
250-
});
251-
elem.addEventListener(DDGVideoOverlayMobileAlt.OPT_IN, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
252-
return this.mobileOptIn(e.detail.remember, params).catch(console.error);
253-
});
254247
targetElement.appendChild(elem);
255248

256249
const drawer = /** @type {DDGVideoDrawerMobile} */ (document.createElement(DDGVideoDrawerMobile.CUSTOM_TAG_NAME));
257250
drawer.testMode = this.environment.isTestMode();
258251
drawer.text = mobileStrings(this.environment.strings);
252+
drawer.overlay = elem; /* TODO: Remove hack */
259253
drawer.addEventListener(DDGVideoDrawerMobile.OPEN_INFO, () => this.messages.openInfo());
260254
drawer.addEventListener(DDGVideoDrawerMobile.OPT_OUT, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
261255
return this.mobileOptOut(e.detail.remember).catch(console.error);
262256
});
263257
drawer.addEventListener(DDGVideoDrawerMobile.DISMISS, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
264258
return this.mobileOptOut(false).catch(console.error); // Dismissal should not persist user's choice. Ignore remember-me value.
265259
});
260+
drawer.addEventListener(DDGVideoDrawerMobile.THUMBNAIL_CLICK, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
261+
return this.videoThumbnailClick();
262+
});
266263
drawer.addEventListener(DDGVideoDrawerMobile.OPT_IN, (/** @type {CustomEvent<{remember: boolean}>} */ e) => {
267264
return this.mobileOptIn(e.detail.remember, params).catch(console.error);
268265
});
@@ -271,6 +268,8 @@ export class VideoOverlay {
271268
if (elem.container) {
272269
this.appendThumbnail(elem.container);
273270
}
271+
272+
this.altOverlay = elem;
274273
} else if (this.environment.layout === 'mobile') {
275274
const elem = /** @type {DDGVideoOverlayMobile} */ (document.createElement(DDGVideoOverlayMobile.CUSTOM_TAG_NAME));
276275
elem.testMode = this.environment.isTestMode();
@@ -299,6 +298,10 @@ export class VideoOverlay {
299298
return () => {
300299
document.querySelector(DDGVideoOverlay.CUSTOM_TAG_NAME)?.remove();
301300
document.querySelector(DDGVideoOverlayMobile.CUSTOM_TAG_NAME)?.remove();
301+
setTimeout(() => {
302+
document.querySelector(DDGVideoDrawerMobile.CUSTOM_TAG_NAME)?.remove();
303+
}, 500); /* TODO FIX THIS */
304+
302305
controller.abort();
303306
};
304307
});
@@ -474,6 +477,15 @@ export class VideoOverlay {
474477
this.destroy();
475478
}
476479

480+
videoThumbnailClick() {
481+
console.log('Video thumbnail clicked');
482+
const pixel = new Pixel({ name: 'duckplayer.overlay.youtube.watch.here.video-thumbnail' });
483+
484+
this.messages.sendPixel(pixel);
485+
486+
return this.destroy();
487+
}
488+
477489
/**
478490
* Remove elements, event listeners etc
479491
*/

0 commit comments

Comments
 (0)