Skip to content

Commit

Permalink
reduced load time
Browse files Browse the repository at this point in the history
  • Loading branch information
@jomin398
jomin398 committed Jul 9, 2023
1 parent afb564e commit 9e64f20
Show file tree
Hide file tree
Showing 5 changed files with 119 additions and 80 deletions.
38 changes: 11 additions & 27 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,29 +24,14 @@
font-family: Arial, Helvetica, sans-serif;
}

.searchHighlight.mismatch {
display: none;
}

.searchHighlight.match {
display: flex;
}

.fftRender {
position: absolute;
inset: 8em 0 0 0;
z-index: 10;
border: 2px solid white;
}

.hide {
display: none !important;
}
</style>
<link rel="stylesheet" href="./src/pjsk/pjsk.css">
<link rel="stylesheet" href="./lstCont.css">
<link rel="stylesheet" href="./maqree.css">

<link rel="stylesheet" href="./src/pjsk/lstCont.css">
<link rel="stylesheet" href="./src/pjsk/maqree.css">
<link rel="stylesheet" href="./dropDown.css">
<script type="importmap">
{
"imports": {
Expand All @@ -63,8 +48,6 @@
await new Promise(r => window.onload = () => r(true));
const pjsk = await new PJSK();
await pjsk.init()
// addScrollEvent(console.log);
// console.log(i18next.t("gui:option.searchhint"))
</script>
</head>

Expand All @@ -74,12 +57,14 @@
<div class="tabWrapper">
<div class="tabs">
<div class="tab sort">
<label for="sortOpt">Sort Option</label>
<select name="sortOpt" id="sortOpt">
<option value="title">title</option>
<option value="genre">genre</option>
<option value="artist">artist</option>
</select>
<div class="dropdown dropdown-dark">
<label for="sortOpt">Sort Option</label>
<select name="preset" class="dropdown-select" name="sortOpt" id="sortOpt">
<option value="title">title</option>
<option value="genre">genre</option>
<option value="artist">artist</option>
</select>
</div>
</div>
<div class="tab">
<div class="tagsContainer"></div>
Expand All @@ -89,7 +74,6 @@
<div class="listCont" id="list-container">
<ul id="list">
</ul>
<canvas class="fftRender hide" width="128" height="128" id="fft-canvas"></canvas>
</div>
<div class="cover">
<img alt="song Cover">
Expand Down
153 changes: 100 additions & 53 deletions src/pjsk/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,10 @@ export default class PJSK {
this.imageList = null;
this.musicTags = null;
this.i18next = null;
this.#treeData = null;
this.musicListElm = null;
this.lastLVDataRead = 0;
this.fullLoadedLv = false;
console.log('loading data....');
return new Promise(async function (res) {
this.#treeData = await getRepoTree(`${this.#repoRoot}?recursive=true`);
Expand All @@ -92,6 +95,7 @@ export default class PJSK {
this.musicTags = [...new Set(this.musicData.d.map(e => e.tags?.flat() ?? null).flat().filter(e => e))];
this.imageList = treeFilter(this.#treeData, 'images');
this.searchElm = document.querySelector('.bottomTab .search input');
this.levelData = null;
console.log('loading Translate data....')
await i18next.use(I18nBackend).use(LanguageDetector).init({
fallbackLng: 'ja',
Expand Down Expand Up @@ -122,58 +126,39 @@ export default class PJSK {
#repoRoot = `${this.#cdnHost}repos/${this.#repoUser}/${this.#repoName}/git/trees/master`;
#treeData = null;
#searchEngine = null;
async #preScrollEv() {
#genItemElem(isEmpty) {
const item = document.createElement('li');
item.className = "level";
if (!isEmpty) Array.from(new DOMParser().parseFromString(musicItemTemplate, 'text/html').body.children).map(el => item.append(el));
return item;
};
/**
* @param {Number} start
*/
async addlevel(start) {
const e = document.querySelector(".listCont");
const ls = e.firstElementChild;
let db = this.musicData.d;
const replacer = s => { return s.replace(/[\!\?\s\.]/gm, '') };
const images = this.imageList;
db = db.map(o => {
let { n, f, lrc, atrys, tags, artist, maker, m, album, another } = o;
let origName = f ??= n;
atrys ??= [];
atrys = atrys.concat(n, f, origName);
let name = 'unknown';
let image = new ImgSearch(images).retrySearch(atrys).filter(e => e);
if (origName == "Dear") image = ["Dear.jpg"];
if (image) {
if (Array.isArray(image)) {
let r = image.map(e => e.replace(/\.\w{3}$/gm, ''));
let s = r.find(e => e == origName);
image = s ? `${s}.jpg` : r[0] ? `${r[0]}.jpg` : r[1] ? `${r[1]}.jpg` : null ?? null;
if (image) image = `${this.#repoRoot}images/${image}`;
} else {
let r = image.replace(/\.\w{3}$/gm, '');
image = `${r[0]}.jpg`;
if (image) image = `${this.#repoRoot}images/${image}`;
}
};
//maker = this.i18next.t(`musicTags:${maker}`);
maker = maker ? this.i18next.t(`musicTags:${maker}`) : maker ?? 'unknown';

if (artist) {
artist = artist.replace(' ', '');
artist = artist.includes(',') ? artist.split(',').map(e => this.i18next.t(`musicTags:${e}`)) : this.i18next.t(`musicTags:${artist}`);
const reflashLastAnotionElm = () => {
const list = e.querySelector('ul#list');
const latestItem = list.querySelector(".latest");
if (latestItem) {
latestItem.remove();
list.appendChild(latestItem);
}
name = this.i18next.t(`songNames:${replacer(origName)}`);
tags = tags?.map(e => e ? e : null).filter(e => e) ?? null;
if (tags) tags = tags.map(e => this.i18next.t(`musicTags:${e}`));
if (!lrc) lrc = m?.find(e => e.includes('.lrc')) != null ?? false;
return { n: name, f, lrc, image, tags, artist, album, m, another };
});
const genItemElem = (isEmpty) => {
const item = document.createElement('li');
item.className = "level";
if (!isEmpty) Array.from(new DOMParser().parseFromString(musicItemTemplate, 'text/html').body.children).map(el => item.append(el));
return item;
};
ls.appendChild(genItemElem(true))

db.map(song => {
start ??= this.lastLVDataRead;
let levels = this.levelData;
this.lastLVDataRead += 20;
if (this.lastLVDataRead > levels.length || this.lastLVDataRead - 10 < start) {
levels = levels.slice(start, 0);
} else {
levels = levels.slice(start, this.lastLVDataRead);
}
levels.map(song => {
song = ((o, temp) => {
const level = temp.cloneNode(true);

let { f, n, lrc, image, tags, artist, album, m, another } = o;
let { n, f, lrc, atrys, tags, artist, maker, m, album, another, image } = o;
const elems = {
img: level.querySelector('img'),
title: level.querySelector('.title span'),
Expand Down Expand Up @@ -235,9 +220,56 @@ export default class PJSK {
elems.audioUrl.value += aurls.join("");
}
return level;
})(song, genItemElem())
})(song, this.#genItemElem())
ls.appendChild(song)
})
});

reflashLastAnotionElm();
return this.lastLVDataRead;
}
async #preScrollEv() {
const e = document.querySelector(".listCont");
const ls = e.firstElementChild;
let db = this.musicData.d;
const replacer = s => { return s.replace(/[\!\?\s\.]/gm, '') };
const images = this.imageList;
db = db.map(o => {
let { n, f, lrc, atrys, tags, artist, maker, m, album, another } = o;
let origName = f ??= n;
atrys ??= [];
atrys = atrys.concat(n, f, origName);
let name = 'unknown';
let image = new ImgSearch(images).retrySearch(atrys).filter(e => e);
if (origName == "Dear") image = ["Dear.jpg"];
if (image) {
if (Array.isArray(image)) {
let r = image.map(e => e.replace(/\.\w{3}$/gm, ''));
let s = r.find(e => e == origName);
image = s ? `${s}.jpg` : r[0] ? `${r[0]}.jpg` : r[1] ? `${r[1]}.jpg` : null ?? null;
if (image) image = `${this.#repoRoot}images/${image}`;
} else {
let r = image.replace(/\.\w{3}$/gm, '');
image = `${r[0]}.jpg`;
if (image) image = `${this.#repoRoot}images/${image}`;
}
};
//maker = this.i18next.t(`musicTags:${maker}`);
maker = maker ? this.i18next.t(`musicTags:${maker}`) : maker ?? 'unknown';

if (artist) {
artist = artist.replace(' ', '');
artist = artist.includes(',') ? artist.split(',').map(e => this.i18next.t(`musicTags:${e}`)) : this.i18next.t(`musicTags:${artist}`);
}
name = this.i18next.t(`songNames:${replacer(origName)}`);
tags = tags?.map(e => e ? e : null).filter(e => e) ?? null;
if (tags) tags = tags.map(e => this.i18next.t(`musicTags:${e}`));
if (!lrc) lrc = m?.find(e => e.includes('.lrc')) != null ?? false;
return { n: name, f, lrc, atrys, tags, artist, maker, m, album, another, image };
});
this.levelData = db;
ls.appendChild(this.#genItemElem(true))
this.addlevel();
console.log(this.lastLVDataRead)
this.musicTags = [...new Set(db.map(e => e.tags?.flat() ?? null).flat().filter(e => e))];
this.musicTags.map(tagKey => {
let tagElm = document.createElement('span');
Expand All @@ -248,9 +280,10 @@ export default class PJSK {
};
document.querySelector('.tagsContainer').append(tagElm)
})
ls.appendChild(genItemElem(true))
let taile = this.#genItemElem(true);
taile.classList.add('latest');
ls.appendChild(taile)
};

/**
* @callback onScrollCallBack
* @param {Number} idx list index
Expand All @@ -263,17 +296,31 @@ export default class PJSK {
*/
#onScroll = null;
#scrollHandleEnable = false;
#resetScroll(search) {
#onScrolltoTop() {
this.fullLoadedLv = this.lastLVDataRead == this.levelData.length;
const e = document.body.querySelector(".listCont");
if (!this.fullLoadedLv) {
this.addlevel();
this.#resetScroll(null, true);
e.scrollTop = 3;
} else {
e.scrollTop = 3;
this.#resetScroll(null, true);
}
}
#resetScroll(search, called) {
const e = document.body.querySelector(".listCont");
let t = e.querySelector("#list").getElementsByTagName("li");

if (search) t = document.querySelectorAll('.searchHighlight.match');
//console.log(t.length)
let cb = this.#onScroll;
let l = 0,
o = !1,
read = !1;
const g2t = () => e.scrollTop = 3;
const g2t = () => {
if (!called)
this.#onScrolltoTop();
}
const g2b = () => e.scrollTo(0, e.scrollHeight - e.clientHeight * 1.15);
function scroll() {
const top = Math.round(e.scrollTop) + e.clientHeight;
Expand Down Expand Up @@ -359,4 +406,4 @@ export default class PJSK {
document.querySelector('.bottomTab .random button').onclick = this.#rngScroll;
document.querySelector('.bottomTab .confirm button').onclick = this.openPlayer;
}
}
}
0 lstCont.css → src/pjsk/lstCont.css
View file
File renamed without changes.
0 maqree.css → src/pjsk/maqree.css
View file
File renamed without changes.
8 changes: 8 additions & 0 deletions src/pjsk/pjsk.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,14 @@
margin-right: 1em;
}

.searchHighlight.mismatch {
display: none;
}

.searchHighlight.match {
display: flex;
}

@media screen and (max-width:480px) {
.rendererContainer {
display: flex;
Expand Down

0 comments on commit 9e64f20

Please sign in to comment.