-
Notifications
You must be signed in to change notification settings - Fork 0
/
video.js
132 lines (101 loc) · 4.33 KB
/
video.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
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
document.addEventListener("DOMContentLoaded", () => {
let cardDivText = sessionStorage.getItem("cardInfo");
let hiddenDivText = sessionStorage.getItem("hiddenInfo");
addVideoPageDivs(cardDivText, hiddenDivText);
});
function addVideoPageDivs(cardText, hiddenText) {
[title, viewsAndPublishDate, channelTitle, _, description] =
cardText.split("\n");
// 3279943 views at: 2018-07-16
[likes, dislikes, videoId, channelThumbnailUrl] = hiddenText.split("\n");
[views, publishDate] = viewsAndPublishDate.split("Published");
let iframeDiv = document.getElementsByClassName("iframe-video")[0];
let iframeWrapper = document.createElement("div");
iframeWrapper.classList.add("iframe-wrapper");
let iframeELement = document.createElement("iframe");
iframeELement.src = "https://www.youtube.com/embed/" + videoId;
iframeWrapper.appendChild(iframeELement);
iframeDiv.appendChild(iframeWrapper);
iframeDiv.appendChild(document.createElement("br"));
let videoTitleElement = document.createElement("h2");
videoTitleElement.textContent = title;
iframeDiv.appendChild(videoTitleElement);
iframeDiv.appendChild(document.createElement("br"));
let videoDetails = document.createElement("div");
let videoDetails1 = document.createElement("div");
let videoDetails2 = document.createElement("div");
videoDetails.classList.add("video-details");
videoDetails1.classList.add("video-details1");
videoDetails2.classList.add("video-details2");
// create video details 1 content
let viewsElement = document.createElement("span");
viewsElement.textContent = views;
let dateElement = document.createElement("span");
dateElement.textContent = " - " + publishDate.split(":")[1];
// add videodetails1 content to videodetails1
videoDetails1.appendChild(viewsElement);
videoDetails1.appendChild(dateElement);
// create videodetails 2 content
let likeIcon = document.createElement("span");
let likesELement = document.createElement("span");
let dislikesIcon = document.createElement("span");
let dislikesElement = document.createElement("span");
likeIcon.classList.add("material-icons-outlined", "md-24");
likeIcon.textContent = "thumb_up";
dislikesIcon.classList.add("material-icons-outlined");
dislikesIcon.textContent = "thumb_down_alt";
likesELement.textContent = likes;
dislikesElement.textContent = dislikes;
// add content to videodetails2
videoDetails2.appendChild(likeIcon);
videoDetails2.appendChild(likesELement);
videoDetails2.appendChild(dislikesIcon);
videoDetails2.appendChild(dislikesElement);
// add video details 1 and 2 to videodetails
videoDetails.appendChild(videoDetails1);
videoDetails.appendChild(videoDetails2);
iframeDiv.appendChild(videoDetails);
// channel details
createChannelDetails(
iframeDiv,
channelTitle,
description,
channelThumbnailUrl
);
}
// channel details on video page
function createChannelDetails(
iframeDiv,
channelTitle,
description,
channelThumbnailUrl
) {
let channelDetailsDiv = document.createElement("div");
channelDetailsDiv.classList.add("channel-details");
iframeDiv.appendChild(channelDetailsDiv);
let channelImgDiv = document.createElement("div");
channelImgDiv.classList.add("channelImg");
channelDetailsDiv.appendChild(channelImgDiv);
let channelImg = document.createElement("img");
channelImg.src = channelThumbnailUrl;
// channelImg.classList.add("channelImg");
channelImgDiv.appendChild(channelImg);
let videoChannelInfoDiv = document.createElement("div");
videoChannelInfoDiv.classList.add("video-channel-info");
channelDetailsDiv.appendChild(videoChannelInfoDiv);
let channelTitleElement = document.createElement("p");
channelTitleElement.textContent = channelTitle;
videoChannelInfoDiv.appendChild(channelTitleElement);
let videoDescriptionElement = document.createElement("p");
videoDescriptionElement.textContent = description;
videoChannelInfoDiv.appendChild(videoDescriptionElement);
// subscribe button
let subscribeDiv = document.createElement("div");
subscribeDiv.classList.add("subscribe");
let subscribeButton = document.createElement("button");
subscribeButton.textContent = "SUBSCRIBE";
subscribeButton.id = "subscribe-button";
subscribeDiv.appendChild(subscribeButton);
channelDetailsDiv.appendChild(videoChannelInfoDiv);
channelDetailsDiv.appendChild(subscribeDiv);
}