-
Notifications
You must be signed in to change notification settings - Fork 0
/
widget-api.js
87 lines (68 loc) · 2.64 KB
/
widget-api.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
window.videolyInitCallbacks = {
onVideoDataLoaded: [handleVideoLoaded]
};
function handleVideoLoaded(err, data) {
if (err) {
console.log(err);
return;
}
const { videos, actions } = data;
if (videos.length) {
removeOriginalVideos(['.origin-video-item-external_video', '.origin-video-item-video', '.origin-video-item-model']);
}
const [exampleThumb, latestThumb, width, height] = getOriginalThumbDetails('.product__thumb-item');
let placeAfterNode = latestThumb;
videos.forEach(video => {
const videolyThumb = createThumb(video, width, height, actions);
const originThumbClone = exampleThumb.cloneNode(true);
const currentAnchor = originThumbClone.querySelector('a');
currentAnchor.replaceWith(videolyThumb);
placeAfterNode.after(originThumbClone);
placeAfterNode = originThumbClone;
});
}
function getOriginalThumbDetails(selector) {
const allOriginThumbs = document.querySelectorAll(selector);
const exampleThumb = allOriginThumbs[1] || allOriginThumbs[0];
let latestThumb = allOriginThumbs[allOriginThumbs.length - 1];
const width = exampleThumb.offsetWidth || 76;
const height = exampleThumb.offsetHeight || 50;
return [exampleThumb, latestThumb, width, height];
}
function removeOriginalVideos(selectors) {
selectors.forEach(selector => {
const originalVideos = document.querySelectorAll(selector);
originalVideos.forEach(originVideo => {
originVideo.parentElement.removeChild(originVideo);
});
})
}
function createThumb(video, width, height, actions) {
const { startPlayer } = actions;
const thumbWrapper = document.createElement('div');
thumbWrapper.classList.add('videoly-video-item-tile');
thumbWrapper.style.width = width + 'px';
thumbWrapper.style.height = height + 'px';
const videoCover = document.createElement('div');
videoCover.classList.add('videoly-video-cover');
videoCover.style.backgroundImage = 'url(' + video.thumbs.default.url + ')';
thumbWrapper.append(videoCover);
const playBtn = document.createElement('div');
playBtn.classList.add('videoly-play-button');
playBtn.classList.add('videoly-play-button--youtube');
videoCover.append(playBtn);
const genre = document.createElement('div');
genre.classList.add('videoly-genre');
genre.textContent = video.genre;
thumbWrapper.append(genre);
const duration = document.createElement('div');
duration.classList.add('videoly-video-duration');
duration.textContent = video.duration;
thumbWrapper.append(duration);
thumbWrapper.addEventListener('click', (event) => {
event.preventDefault();
event.stopImmediatePropagation();
startPlayer(video);
});
return thumbWrapper;
}