Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit c94b9de

Browse filesBrowse files
stuck1astuck1a
committed
introduced playlists and prevent pagination button content from being selectable
1 parent 65ee7a5 commit c94b9de
Copy full SHA for c94b9de

13 files changed

+533-237Lines changed: 533 additions & 237 deletions

File tree

Expand file treeCollapse file tree
Open diff view settings
Filter options
Expand file treeCollapse file tree
Open diff view settings
Collapse file

‎dist/NuoFlix/EnhancedNuoFlix.js‎

Copy file name to clipboardExpand all lines: dist/NuoFlix/EnhancedNuoFlix.js
+227-200Lines changed: 227 additions & 200 deletions
Large diffs are not rendered by default.
Collapse file

‎src/NuoFlix/EnhancedNuoFlix/Global/configs.js‎

Copy file name to clipboardExpand all lines: src/NuoFlix/EnhancedNuoFlix/Global/configs.js
+5Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,11 @@
1717
/** @global */ const defaultStart = 1;
1818
/** @global */ const defaultLength = 5;
1919
/** @global */ const defaultLanguage = 'de';
20+
/** @global */ const defaultPlaylists = [
21+
{ id: 1, is_custom: false, max_items: -1, name: 'Favoriten', item_cnt: 0, items: [], },
22+
{ id: 2, is_custom: false, max_items: -1, name: 'Für später gespeichert', item_cnt: 0, items: [], },
23+
{ id: 3, is_custom: false, max_items: -1, name: 'Zuletzt angesehene Videos', item_cnt: 0, items: [], },
24+
];
2025

2126
// Map execution flows to pages
2227
/** @global */ const pageRoutes = new Map([
Collapse file

‎src/NuoFlix/EnhancedNuoFlix/Global/functions_global.js‎

Copy file name to clipboardExpand all lines: src/NuoFlix/EnhancedNuoFlix/Global/functions_global.js
+13-7Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -271,22 +271,28 @@ function enablePrimalElement(elementOrId) {
271271

272272

273273
/**
274-
* Adds a new element to the list of elements which aren't rebuilt on updates
274+
* Adds one or more new elements to the list of elements which aren't rebuilt on updates
275275
* but contains text which need to translated when the active language is changed.
276276
* As entry key the element itself is used.
277277
* The value is an object with property text and property args which is an array
278278
* holding all arguments for sending to t().
279279
*
280280
* @requires staticTranslatableElements
281281
*
282-
* @param {HTMLElement} element - Target element
283-
* @param {string} text - The text which will be send to t()
284-
* @param {string[]} [args=[]] - The argument list for the formatters send to t()
282+
* @param {(HTMLElement|object[element:string,text:string,[args:string[]]])} element - Target element or array of objects containing all arguments as property
283+
* @param {string} [text=''] - The text which will be send to t() (omit if sending a list)
284+
* @param {string[]} [args=[]] - The argument list for the formatters send to t() (omit if sending a list)
285285
*/
286-
function registerStaticTranslatable(element, text, args = []) {
287-
if (!staticTranslatableElements.has(element)) {
288-
staticTranslatableElements.set(element, { text: text, args: args });
286+
function registerStaticTranslatable(element, text = '', args = []) {
287+
// if multiple items received as array of objects
288+
if (!(element instanceof HTMLElement)) {
289+
for (const entry of element) {
290+
if (!staticTranslatableElements.has(entry['element'])) staticTranslatableElements.set(entry['element'], { text: entry['text'] ?? text, args: entry['args'] ?? args });
291+
}
292+
return;
289293
}
294+
// if single item received
295+
if (!staticTranslatableElements.has(element)) staticTranslatableElements.set(element, { text: text, args: args });
290296
}
291297

292298

Collapse file

‎src/NuoFlix/EnhancedNuoFlix/Global/global.css‎

Copy file name to clipboardExpand all lines: src/NuoFlix/EnhancedNuoFlix/Global/global.css
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -109,8 +109,8 @@ input[type="date"] {
109109
}
110110

111111
.disabled {
112-
background-color: darkgray !important;
113-
color: lightgray !important;
112+
filter: brightness(.5) !important;
113+
-webkit-filter: brightness(.5) !important;
114114
cursor: default !important;
115115
pointer-events: none;
116116
}
Collapse file

‎src/NuoFlix/EnhancedNuoFlix/ProfilePage/functions_profilePage.js‎

Copy file name to clipboardExpand all lines: src/NuoFlix/EnhancedNuoFlix/ProfilePage/functions_profilePage.js
+122-23Lines changed: 122 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
1-
// set up route-scoped fields and configs, then start the execution flow fo this route
1+
// set up route-scoped fields and configs, then start the execution flow for this route
22
/** @type {number} pixel */ const maxCommentHeightBeforeCut = 250;
3+
34
/** @type {object[]} */ let commentData;
45
/** @type {object[]} */ let storedCommentData;
56
/** @type {number} */ let totalComments;
@@ -26,23 +27,30 @@ function execute_profilePage() {
2627
addToDOM(`<style>/*%% ProfilePage/profilePage.css %%*/</style>`.parseHTML(), document.body, InsertionService.AsLastChild, false);
2728
addToDOM(style_comments, document.body, InsertionService.AsLastChild, false);
2829

29-
// insert the additional UI section
30+
// insert the new UI section
3031
enhancedUiContainer = addToDOM(enhancedUiContainer, document.getElementsByClassName('wrapper')[1], InsertionService.AsFirstChild, true, 'enhancedUiContainer');
3132

32-
// register all static elements from enhancedUiContainer with text to translate
33-
registerStaticTranslatable(document.getElementById('ignoredLabel'), 'Blockierte Benutzer');
34-
registerStaticTranslatable(document.getElementById('addIgnoreUser'), 'Hinzufügen...');
35-
registerStaticTranslatable(document.getElementById('deleteIgnoreUser'), 'Entfernen');
36-
registerStaticTranslatable(document.getElementById('filterOnlyNewLabel'), 'Nur neue Kommentare');
37-
registerStaticTranslatable(document.getElementById('pluginHeadline'), 'NuoFlix 2.0');
38-
registerStaticTranslatable(document.getElementById('filterLabel'), 'Kommentare filtern');
39-
registerStaticTranslatable(document.getElementById('searchInputLabel'), 'Suche:');
40-
registerStaticTranslatable(document.getElementById('moreFilterTrigger'), 'Erweiterte Filteroptionen');
41-
registerStaticTranslatable(document.getElementById('useAndLogicLabel'), 'Muss alle Wörter enthalten');
42-
registerStaticTranslatable(document.getElementById('searchByUserLabel'), 'nach Benutzer:');
43-
registerStaticTranslatable(document.getElementById('searchByDateLabel'), 'nach Datum:');
44-
registerStaticTranslatable(document.getElementById('settingsLabel'), 'Einstellungen');
45-
registerStaticTranslatable(document.getElementById('settingsLanguageLabel'), 'Sprache:');
33+
// register all static captions for this route (all those which are not recreated when calling pageUpdate)
34+
registerStaticTranslatable([
35+
{ element: document.getElementById('ignoredLabel'), text: 'Blockierte Benutzer' },
36+
{ element: document.getElementById('addIgnoreUser'), text: 'Hinzufügen...' },
37+
{ element: document.getElementById('deleteIgnoreUser'), text: 'Entfernen' },
38+
{ element: document.getElementById('filterOnlyNewLabel'), text: 'Nur neue Kommentare' },
39+
{ element: document.getElementById('pluginHeadline'), text: 'NuoFlix 2.0' },
40+
{ element: document.getElementById('filterLabel'), text: 'Kommentare filtern' },
41+
{ element: document.getElementById('searchInputLabel'), text: 'Suche:' },
42+
{ element: document.getElementById('moreFilterTrigger'), text: 'Erweiterte Filteroptionen' },
43+
{ element: document.getElementById('useAndLogicLabel'), text: 'Muss alle Wörter enthalten' },
44+
{ element: document.getElementById('searchByUserLabel'), text: 'nach Benutzer:' },
45+
{ element: document.getElementById('searchByDateLabel'), text: 'nach Datum:' },
46+
{ element: document.getElementById('settingsLabel'), text: 'Einstellungen' },
47+
{ element: document.getElementById('settingsLanguageLabel'), text: 'Sprache:' },
48+
{ element: document.getElementById('playlistLabel'), text: 'Meine Playlists' },
49+
{ element: document.getElementById('createPlaylist'), text: 'Erstellen' },
50+
{ element: document.getElementById('startPlaylist'), text: 'Abspielen' },
51+
{ element: document.getElementById('editPlaylist'), text: 'Bearbeiten' },
52+
{ element: document.getElementById('deletePlaylist'), text: 'Löschen' },
53+
]);
4654

4755
// restore list of blocked users
4856
for (const user of get_value('ignoredUsers')) {
@@ -81,7 +89,6 @@ function execute_profilePage() {
8189
// generate datalist for autocompletion of user filter input
8290
addUserFilterAutocompletionList();
8391

84-
8592
// mount handler for adding a user to the list of users to search for
8693
document.getElementById('filterByUser').onkeypress = function(ev) {
8794
if (!ev) ev = window.event;
@@ -781,20 +788,111 @@ function buildPaginationUi() {
781788
return `
782789
<div id="paginationContainer">
783790
<div class="buttonGroup">
784-
<a id="paginationFirst" class="btn${(currentPage > 1 ? '"' : ' disabled" disabled="disabled"')} data-start="1" data-length="${currentLength}">1</a>
785-
<a id="paginationBack" class="btn${(currentPage > 1 ? '"' : ' disabled" disabled="disabled"')} data-start="${BtnBack_Start}" data-length="${currentLength}"><</a>
791+
<a id="paginationFirst" class="btn${(currentPage > 1 ? '"' : ' disabled" disabled="disabled"')} data-start="1" data-length="${currentLength}" data-content="1"></a>
792+
<a id="paginationBack" class="btn${(currentPage > 1 ? '"' : ' disabled" disabled="disabled"')} data-start="${BtnBack_Start}" data-length="${currentLength}" data-content="<"></a>
786793
</div>
787794
<div id="pageNrBtnContainer" class="buttonGroup">${buttons}</div>
788795
<div class="buttonGroup">
789-
<a id="paginationNext" class="btn${(currentPage < totalPages ? '"' : ' disabled" disabled="disabled"')} data-start="${BtnNext_Start}" data-length="${currentLength}">></a>
790-
<a id="paginationLast" class="btn${(currentPage < totalPages ? '"' : ' disabled" disabled="disabled"')} data-start="${BtnLast_Start}" data-length="${currentLength}">${totalPages}</a>
796+
<a id="paginationNext" class="btn${(currentPage < totalPages ? '"' : ' disabled" disabled="disabled"')} data-start="${BtnNext_Start}" data-length="${currentLength}" data-content=">"></a>
797+
<a id="paginationLast" class="btn${(currentPage < totalPages ? '"' : ' disabled" disabled="disabled"')} data-start="${BtnLast_Start}" data-length="${currentLength}" data-content="${totalPages}"></a>
791798
</div>
792799
</div>
793-
`;
800+
`.replaceAll(/[\n\r]/g, '').replaceAll(/>\s+</g, '><');
794801
}
795802

796803

797804

805+
/**
806+
* (Re-)builds and insert the playlist select list
807+
*
808+
* @requires playlistData
809+
*/
810+
function addPlaylistContainer() {
811+
// remove the current list, if available
812+
const oldPlaylist = customElementsRegister.get('playlists');
813+
if (oldPlaylist) removeFromDOM(oldPlaylist);
814+
815+
// add playlist select box
816+
const playlists = `
817+
<select id="playlists" name="playlists" size="5">
818+
<optgroup id="optgroup_defaultPlaylists" label="${t('Standard-Playlists')}"></optgroup>
819+
<optgroup id="optgroup_customPlaylists" label="${t('Eigene Playlists')}"></optgroup>
820+
</select>
821+
`.parseHTML();
822+
addToDOM(playlists, document.getElementById('playlistContainer'), InsertionService.AsFirstChild, true, 'playlists');
823+
824+
// load and add user playlists
825+
const defaultContainer = document.getElementById('optgroup_defaultPlaylists');
826+
const customContainer = document.getElementById('optgroup_customPlaylists');
827+
for (const listData of playlistData) {
828+
const option = buildPlaylistItem(listData);
829+
addToDOM(option, (listData.is_custom ? customContainer : defaultContainer), InsertionService.AsLastChild, false);
830+
}
831+
832+
833+
/* AUFBAU DER PLAYLISTS DATENOBJEKTE
834+
playlists = [
835+
{
836+
id: <integer> Wird beim Erstellen erzeugt aus: Anzahl Playlists + 1,
837+
is_custom: <boolean> Entscheidet darüber, in welche optgroup eingefügt wird,
838+
max_items: <integer> -1 (unbegrenzt), außer bei Playlist #playlistLastVideos,
839+
name: <string> Aus Prompt,
840+
item_cnt: <integer> Anzahl der Videos in der Playlist,
841+
items: [
842+
{
843+
id: <number> Fortlaufende Nummer,
844+
url: <string> Videolink,
845+
title: <string> Videotitel,
846+
img: <string> Image-Link zum Vorschaubild,
847+
desc: <string> Beschreibungstext,
848+
},
849+
],
850+
},
851+
];
852+
*/
853+
854+
// add button handler
855+
document.getElementById('createPlaylist').addEventListener('click', function() {
856+
const name = prompt('Name der neuen Playlist:', '');
857+
if (!name) return;
858+
859+
const dataObject = {
860+
id: playlistData[playlistData.length - 1].id + 1,
861+
is_custom: true,
862+
max_items: -1,
863+
name: name,
864+
item_cnt: 0,
865+
items: [],
866+
};
867+
});
868+
document.getElementById('startPlaylist').addEventListener('click', function() {
869+
// TODO
870+
});
871+
document.getElementById('editPlaylist').addEventListener('click', function() {
872+
// TODO
873+
});
874+
document.getElementById('deletePlaylist').addEventListener('click', function() {
875+
// TODO
876+
});
877+
878+
879+
}
880+
881+
882+
883+
/**
884+
* Generates an option element to insert to the playlist selection element from a given playlist data object
885+
*
886+
* @param {object} data - Playlist data object
887+
*
888+
* @return {DocumentFragment} - Playlist option element
889+
*/
890+
function buildPlaylistItem(data) {
891+
if (!data) return ''.parseHTML();
892+
return `<option class="playlistItem ${data.is_custom ? 'customPlaylist' : 'fixedPlaylist'}" data-playlist-id="${data.id}"><span>${data.is_custom ? data.name : t(data.name)}</span><span>${data.item_cnt}</span></option>`.parseHTML();
893+
}
894+
895+
798896

799897
/**
800898
* Generates a single page button (a numbered one, none
@@ -807,7 +905,7 @@ function buildPaginationUi() {
807905
* @return {string} Parseable string representation of the button
808906
*/
809907
function buildPageButton(pageNr, buttonStart, isActivePage = false) {
810-
return `<a class="btn pageNrBtn${(isActivePage ? ' activePage" disabled="disabled"' : '"')} data-start="${buttonStart}" data-length="${currentLength}">${pageNr}</a>`;
908+
return `<a class="btn pageNrBtn${(isActivePage ? ' activePage" disabled="disabled"' : '"')} data-start="${buttonStart}" data-length="${currentLength}" data-content="${pageNr}"></a>`;
811909
}
812910

813911

@@ -1255,6 +1353,7 @@ function updatePage() {
12551353
updateComments();
12561354
updatePaginationUI();
12571355
updateStaticTranslations();
1356+
addPlaylistContainer();
12581357
}
12591358

12601359

Collapse file

‎src/NuoFlix/EnhancedNuoFlix/ProfilePage/mainUI.js‎

Copy file name to clipboardExpand all lines: src/NuoFlix/EnhancedNuoFlix/ProfilePage/mainUI.js
+13-1Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,11 +90,23 @@ let enhancedUiContainer = `<div id="enhancedUi" class="container-fluid">
9090
</div>
9191
9292
<div class="row card-group">
93-
<fieldset id="settingsContainer" class="card col-5">
93+
94+
<fieldset id="playlistContainer" class="card col-6">
95+
<legend id="playlistLabel"></legend>
96+
<div class="row">
97+
<div class="col-auto"><a id="createPlaylist" class="btn btn-small playlistButton"></a></div>
98+
<div class="col-auto"><a id="startPlaylist" class="btn btn-small playlistButton disabled"></a></div>
99+
<div class="col-auto"><a id="editPlaylist" class="btn btn-small playlistButton disabled"></a></div>
100+
<div class="col-auto"><a id="deletePlaylist" class="btn btn-small playlistButton disabled"></a></div>
101+
</div>
102+
</fieldset>
103+
104+
<fieldset id="settingsContainer" class="card col">
94105
<legend id="settingsLabel"></legend>
95106
<div id="settingsLanguage" class="row">
96107
<label id="settingsLanguageLabel" class="col-5"></label>
97108
</div>
98109
</fieldset>
110+
99111
</div>
100112
</div>`.parseHTML();
Collapse file

‎src/NuoFlix/EnhancedNuoFlix/ProfilePage/modal_editPlaylist.js‎

Copy file name to clipboardExpand all lines: src/NuoFlix/EnhancedNuoFlix/ProfilePage/modal_editPlaylist.js
Whitespace-only changes.
Collapse file

‎src/NuoFlix/EnhancedNuoFlix/ProfilePage/profilePage.css‎

Copy file name to clipboardExpand all lines: src/NuoFlix/EnhancedNuoFlix/ProfilePage/profilePage.css
+34-2Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313
}
1414

1515
#paginationNext {
16-
margin-inline: 0 !important;
16+
margin-inline: 0.2rem !important;
1717
padding-inline: 2rem;
1818
border-radius: 10% 25% 25% 10%;
1919
}
@@ -26,7 +26,7 @@
2626
}
2727

2828
#paginationBack {
29-
margin-inline: 0 !important;
29+
margin-inline: 0.2rem !important;
3030
padding-inline: 2rem;
3131
border-radius: 25% 10% 10% 25%;
3232
}
@@ -43,6 +43,10 @@
4343
margin-inline: .25rem !important;
4444
}
4545

46+
#paginationContainer a:before {
47+
content: attr(data-content);
48+
}
49+
4650
.pageNrBtn.activePage {
4751
cursor: default !important;
4852
font-weight: bold !important;
@@ -180,3 +184,31 @@
180184
.replyText + .showFullLength {
181185
padding-bottom: 0;
182186
}
187+
188+
#playlists {
189+
width: 100%;
190+
}
191+
192+
#playlists optgroup:empty {
193+
display: none;
194+
}
195+
196+
#playlists option {
197+
padding-left: 1rem;
198+
}
199+
200+
.playlistItem {
201+
display: flex;
202+
flex-wrap: nowrap;
203+
justify-content: space-between;
204+
}
205+
206+
.playlistItem span:first-child {
207+
max-width: 90%;
208+
overflow-x: hidden;
209+
text-overflow: ellipsis;
210+
}
211+
212+
div:not(:last-child) > .playlistButton {
213+
margin-right: 1rem;
214+
}
Collapse file

‎src/NuoFlix/EnhancedNuoFlix/StartPage/functions_startPage.js‎

Copy file name to clipboardExpand all lines: src/NuoFlix/EnhancedNuoFlix/StartPage/functions_startPage.js
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
// set up route-scoped fields and start the execution flow fo this route
1+
// set up route-scoped fields and start the execution flow for this route
22

33
execute_startPage();
44

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.