-
Notifications
You must be signed in to change notification settings - Fork 0
/
popup.js
131 lines (120 loc) · 4.83 KB
/
popup.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
import { getActiveTabURL } from "./utils.js";
const addNewBookmark = (bookmarks, bookmark) => {
const bookmarkTitleElement = document.createElement("div");
const controlsElement = document.createElement("div");
const newBookmarkElement = document.createElement("div");
bookmarkTitleElement.textContent = bookmark.desc;
bookmarkTitleElement.className = "bookmark-title";
controlsElement.className = "bookmark-controls";
setBookmarkAttributes("play", onPlay, controlsElement);
setBookmarkAttributes("delete", onDelete, controlsElement);
newBookmarkElement.id = "bookmark-" + bookmark.time;
newBookmarkElement.className = "bookmark";
newBookmarkElement.setAttribute("timestamp", bookmark.time);
newBookmarkElement.appendChild(bookmarkTitleElement);
newBookmarkElement.appendChild(controlsElement);
bookmarks.appendChild(newBookmarkElement);
};
const viewBookmarks = (currentBookmarks = []) => {
const bookmarksElement = document.getElementById("bookmarks");
bookmarksElement.innerHTML = "";
if (currentBookmarks.length > 0) {
for (let i = 0; i < currentBookmarks.length; i++) {
const bookmark = currentBookmarks[i];
addNewBookmark(bookmarksElement, bookmark);
}
} else {
bookmarksElement.innerHTML = '<i class="row">No bookmarks to show</i>';
}
return;
};
const onPlay = async (e) => {
const bookmarkTime = e.target.parentNode.parentNode.getAttribute("timestamp");
const activeTab = await getActiveTabURL();
chrome.tabs.sendMessage(activeTab.id, {
type: "PLAY",
value: bookmarkTime,
});
};
const onDelete = async (e) => {
const activeTab = await getActiveTabURL();
const queryParameters = activeTab.url.split("?")[1];
const urlParameters = new URLSearchParams(queryParameters);
const videoToDelete = urlParameters.get("v");
const bookmarkTime = e.target.parentNode.parentNode.getAttribute("timestamp");
const bookmarkElementToDelete = document.getElementById(
"bookmark-" + bookmarkTime
);
bookmarkElementToDelete.parentNode.removeChild(bookmarkElementToDelete);
chrome.storage.sync.get([videoToDelete], function (result) {
let bookmarksArray = result[videoToDelete]
? JSON.parse(result[videoToDelete])
: [];
console.log(`bookmarksArray: ${JSON.stringify(bookmarksArray)}`);
console.log(`bookmarkTime: ${bookmarkTime}`);
let bookmarkIndex = bookmarksArray.findIndex(
(bookmark) => bookmark.time == bookmarkTime
);
console.log(`bookmarkIndex: ${bookmarkIndex}`);
if (bookmarkIndex !== -1) {
bookmarksArray.splice(bookmarkIndex, 1);
console.log(`bookmarksArray: ${bookmarksArray}`);
chrome.storage.sync.set(
{ [videoToDelete]: JSON.stringify(bookmarksArray) },
function () {
console.log("Bookmark is deleted from the storage.");
}
);
}
});
};
// const onDelete = async e => {
// const bookmarkTime = e.target.parentNode.parentNode.getAttribute("timestamp");
// const bookmarkElementToDelete = document.getElementById(
// "bookmark-" + bookmarkTime
// );
// bookmarkElementToDelete.parentNode.removeChild(bookmarkElementToDelete);
// chrome.runtime.getBackgroundPage((backgroundPage) => {
// backgroundPage.handleMessage({
// type: "DELETE",
// value: bookmarkTime,
// }).then((response) => {
// // Handle the response here if you need to do something with it
// // For example, if the response contains the updated bookmark list,
// // you can update the UI to reflect the change.
// const updatedBookmarks = response.bookmarks;
// viewBookmarks(updatedBookmarks);
// });
// });
// };
const setBookmarkAttributes = (src, eventListener, controlParentElement) => {
const controlElement = document.createElement("img");
controlElement.src = "assets/" + src + ".png";
controlElement.title = src;
controlElement.addEventListener("click", eventListener);
controlParentElement.appendChild(controlElement);
};
document.addEventListener("DOMContentLoaded", async () => {
const activeTab = await getActiveTabURL();
const queryParameters = activeTab.url.split("?")[1];
const urlParameters = new URLSearchParams(queryParameters);
const currentVideo = urlParameters.get("v");
if (activeTab.url.includes("youtube.com/watch") && currentVideo) {
chrome.storage.sync.get([currentVideo], (result) => {
const currentVideoBookmarks = result[currentVideo]
? JSON.parse(result[currentVideo])
: [];
console.log(`currentVideoBookmarks:${currentVideoBookmarks}`);
viewBookmarks(currentVideoBookmarks);
});
} else {
const container = document.getElementsByClassName("container")[0];
container.innerHTML =
'<div class="title">This is not a youtube video page.</div>';
}
});
const getTime = (t) => {
var date = new Date(0);
date.setSeconds(t);
return date.toISOString().substring(11, 11 + 8);
};