+
+
+
+
+ ${video.videoTitle}
+
+
+ ${video.channelTitle}
+
+
+
+
+
+
+
+
+
+ λ³Ό μμμ΄ μμ΅λλ€.
'); +}; +export const renderArticle = (video) => { + $('#saved-video-section').insertAdjacentHTML('beforeend', savedVideoArticle(video)); +}; +export const savedVideoPageRenderer = () => { + var _a, _b; + (_a = $('#video-list')) === null || _a === void 0 ? void 0 : _a.remove(); + (_b = $('header')) === null || _b === void 0 ? void 0 : _b.insertAdjacentHTML('afterend', savedVideoSection()); + const savedVideoList = getSavedVideos(); + let unwatchedVideoList = savedVideoList.filter((video) => video.isWatched === false); + if (unwatchedVideoList.length === 0) { + renderEmptyVideoMessage(); + } + unwatchedVideoList.forEach((video) => { + renderArticle(video); + }); +}; +export const removeArticle = (article) => { + article.remove(); +}; diff --git a/dist/view/snackbar.js b/dist/view/snackbar.js new file mode 100644 index 000000000..f2c28dbce --- /dev/null +++ b/dist/view/snackbar.js @@ -0,0 +1,4 @@ +import { $ } from '../util.js'; +export const snackbarRenderer = ($snackbar) => { + $('#app').insertAdjacentElement('beforeend', $snackbar); +}; diff --git a/dist/view/videoPageTemplates/index.js b/dist/view/videoPageTemplates/index.js new file mode 100644 index 000000000..9569ef6a3 --- /dev/null +++ b/dist/view/videoPageTemplates/index.js @@ -0,0 +1,3 @@ +import { savedVideoSection } from './savedVideoSection.js'; +import { savedVideoArticle } from './savedVideoArticle.js'; +export { savedVideoArticle, savedVideoSection }; diff --git a/dist/view/videoPageTemplates/savedVideoArticle.js b/dist/view/videoPageTemplates/savedVideoArticle.js new file mode 100644 index 000000000..6e286c60a --- /dev/null +++ b/dist/view/videoPageTemplates/savedVideoArticle.js @@ -0,0 +1,36 @@ +export const savedVideoArticle = (video) => { + return ` +
');
+};
+export const renderSkeleton = () => {
+ var _a;
+ (_a = $('div.modal-inner section.video-wrapper')) === null || _a === void 0 ? void 0 : _a.insertAdjacentHTML('beforeend', skeleton().repeat(10));
+};
+export const reRenderSavedButtonText = ($button) => {
+ $button.textContent = $button.textContent === 'β μ μ₯ μ·¨μ' ? 'β¬οΈ μ μ₯' : 'β μ μ₯ μ·¨μ';
+};
+export const reRenderNumOfSavedVideos = () => {
+ $('#num-of-videos').innerText = String(getSavedVideos().length);
+};
+export const removeDuplicateRecentKeyword = (searchValue) => {
+ $$('.chip').forEach((element) => {
+ if (element.innerText === searchValue) {
+ element.remove();
+ }
+ });
+};
+export const removeOldSearchKeyword = () => {
+ var _a;
+ if ($$('.chip').length === 4) {
+ (_a = $('a.chip:last-child')) === null || _a === void 0 ? void 0 : _a.remove();
+ }
+};
+export const removeSkeletons = () => {
+ $$('div.modal-inner section.video-wrapper .skeleton').forEach((element) => {
+ var _a;
+ (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.remove();
+ });
+};
+export const videoSearchPageRenderer = () => {
+ var _a, _b, _c, _d, _e, _f;
+ (_a = $('#app')) === null || _a === void 0 ? void 0 : _a.insertAdjacentHTML('beforeend', modalDiv());
+ (_b = $('div.modal-inner')) === null || _b === void 0 ? void 0 : _b.insertAdjacentHTML('beforeend', modalCloseButton());
+ (_c = $('div.modal-inner')) === null || _c === void 0 ? void 0 : _c.insertAdjacentHTML('beforeend', modalHeader());
+ (_d = $('div.modal-inner')) === null || _d === void 0 ? void 0 : _d.insertAdjacentHTML('beforeend', modalSearchForm());
+ (_e = $('div.modal-inner')) === null || _e === void 0 ? void 0 : _e.insertAdjacentHTML('beforeend', modalRecentKeywordSection());
+ (_f = $('div.modal-inner')) === null || _f === void 0 ? void 0 : _f.insertAdjacentHTML('beforeend', modalArticleSection());
+};
diff --git a/dist/view/videoSearchPageTemplates/index.js b/dist/view/videoSearchPageTemplates/index.js
new file mode 100644
index 000000000..157b3bf09
--- /dev/null
+++ b/dist/view/videoSearchPageTemplates/index.js
@@ -0,0 +1,9 @@
+import { modalDiv } from "./modalDiv.js";
+import { modalCloseButton } from "./modalCloseButton.js";
+import { modalHeader } from "./modalHeader.js";
+import { modalSearchForm } from "./modalSearchForm.js";
+import { modalRecentKeywordSection } from "./modalRecentKeywordSection.js";
+import { modalArticleSection } from "./modalArticleSection.js";
+import { modalArticle } from "./modalArticle.js";
+import { skeleton } from "./skeleton.js";
+export { modalDiv, modalCloseButton, modalHeader, modalSearchForm, modalRecentKeywordSection, modalArticleSection, modalArticle, skeleton };
diff --git a/dist/view/videoSearchPageTemplates/modalArticle.js b/dist/view/videoSearchPageTemplates/modalArticle.js
new file mode 100644
index 000000000..e6d65c6b0
--- /dev/null
+++ b/dist/view/videoSearchPageTemplates/modalArticle.js
@@ -0,0 +1,26 @@
+export const modalArticle = (obj) => {
+ const buttonText = obj.isSaved ? 'β μ μ₯ μ·¨μ' : 'β¬οΈ μ μ₯';
+ return `
+ λ³Έ μμμ΄ μμ΅λλ€.
'); +}; +export const renderArticle = (video) => { + $('#saved-video-section').insertAdjacentHTML('beforeend', savedVideoArticle(video)); +}; +export const watchedVideoPageRenderer = () => { + var _a, _b; + (_a = $('#video-list')) === null || _a === void 0 ? void 0 : _a.remove(); + (_b = $('header')) === null || _b === void 0 ? void 0 : _b.insertAdjacentHTML('afterend', savedVideoSection()); + const savedVideoList = getSavedVideos(); + let watchedVideoList = savedVideoList.filter((video) => video.isWatched === true); + if (watchedVideoList.length === 0) { + renderEmptyVideoMessage(); + } + watchedVideoList.forEach((video) => { + renderArticle(video); + }); + $$('span.video-watched-button').forEach((elem) => { + elem.classList.remove('opacity-hover'); + }); +}; +export const removeArticle = (article) => { + article.remove(); +}; diff --git a/index.html b/index.html index c5e27ed2f..afb7a7020 100644 --- a/index.html +++ b/index.html @@ -1,124 +1,17 @@ - - -