Skip to content

Commit

Permalink
Scrollable Folders panel
Browse files Browse the repository at this point in the history 
Scrollable Folders panel
code cleanup
  • Loading branch information
@michal-repo
michal-repo committed Oct 2, 2023
1 parent 786341c commit ed1ea4a
Show file tree
Hide file tree
Showing 9 changed files with 404 additions and 361 deletions.
2 changes: 1 addition & 1 deletion dist/index.js
View file

Large diffs are not rendered by default.

185 changes: 131 additions & 54 deletions src/FileBrowser/FileBrowserPanelUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import * as UI from '../UI.js';

import * as Helpers from '../Helpers.js';

import * as ScreenManager from '../ScreenManager.js';
import * as ScreenManager from '../ScreenManager/ScreenManager.js';

// Import Icons
import LeftIcon from '../../assets/icons/left-arrow.png';
Expand All @@ -30,6 +30,9 @@ export class FileBrowserPanel {

fileBrowserContainer;
foldersContainer;
folderIndex = 1;
folderPageIndex = 0;
MAXFOLDERSPERPAGE = 12;
thumbsContainer;
draggingBox;

Expand Down Expand Up @@ -69,6 +72,7 @@ export class FileBrowserPanel {
VIDEOS = [];
FILES = [];
FOLDER;
ACTIVEFOLDER;

FILES_PER_ROW = 4;
FILES_ROWS = 3;
Expand Down Expand Up @@ -232,6 +236,20 @@ export class FileBrowserPanel {
fontColor: new Color(0x222222)
};

foldersContainerAttributes = {
justifyContent: 'start',
contentDirection: 'column',
fontFamily: FontJSON,
fontTexture: FontImage,
fontSize: 0.12,
padding: 0.02,
borderRadius: 0,
backgroundOpacity: 1,
backgroundColor: new Color(0x292929),
width: this.PANELMAXWIDTH / 3,
height: this.PANELMAXHEIGHT
};

//////////////////////////////////////////////////////////////////////////////
// CONSTRUCT
//////////////////////////////////////////////////////////////////////////////
Expand All @@ -245,6 +263,7 @@ export class FileBrowserPanel {
this.VIDEOS = files.videos;
this.FILES = this.VIDEOS[0].list;
this.FOLDER = 0;
this.ACTIVEFOLDER = 1;
this.TOTAL_PAGES = (Math.ceil(this.FILES.length / (this.FILES_PER_ROW * this.FILES_ROWS))) - 1;
}

Expand Down Expand Up @@ -325,56 +344,9 @@ export class FileBrowserPanel {
this.thumbsContainer = new Block(this.thumbsContainerAttributes);

if (this.VIDEOS.length > 0) {
this.foldersContainer = new Block({
justifyContent: 'start',
contentDirection: 'column',
fontFamily: FontJSON,
fontTexture: FontImage,
fontSize: 0.12,
padding: 0.02,
borderRadius: 0,
backgroundOpacity: 1,
backgroundColor: new Color(0x292929),
width: this.PANELMAXWIDTH / 3,
height: this.PANELMAXHEIGHT
});
this.foldersContainer = new Block(this.foldersContainerAttributes);

for (let index = 0; index < this.VIDEOS.length; index++) {
const folderButton = new Block({
justifyContent: 'center',
contentDirection: 'row',
height: 0.2,
offset: 0.05,
margin: 0.02,
bestFit: 'shrink',
width: (this.PANELMAXWIDTH / 3) - 0.1,
backgroundOpacity: 1
}).add(new Text({ content: this.VIDEOS[index].name }));
folderButton.folderIndex = index
folderButton.setupState({
state: 'selected',
attributes: this.selectedAttributes,
onSet: () => {
if (this.FOLDER !== index) {
this.CURRENT_PAGE = 0;
this.FOLDER = index;
if (this.searchText.content !== this.defaultSearchText) {
this.prepareFilesWithSearchPhrase();
} else {
this.FILES = this.VIDEOS[index].list;
this.TOTAL_PAGES = (Math.ceil(this.FILES.length / (this.FILES_PER_ROW * this.FILES_ROWS))) - 1;
this.sortFiles(this.activeSorting, this.sortDirection.content.toLowerCase());
}
this.foldersButtonsIdleState();
this.regenerateFileBrowser();
}
}
});
folderButton.setupState(this.hoveredState);
this.foldersContainer.add(folderButton);
this.foldersButtons.push(folderButton);
}
this.foldersButtonsIdleState();
this.generateFoldersButtons();

MAIN.scene.add(this.foldersContainer);
this.foldersContainer.position.set(-3.8, 1.4, this.SIDEPANELZDISTANCE);
Expand Down Expand Up @@ -725,7 +697,6 @@ export class FileBrowserPanel {

this.fileBrowserContainer.add(this.buttonRight);

this.defaultObjsToTest = this.foldersButtons.slice();
this.defaultObjsToTest.push(this.buttonLeft, this.buttonRight);

this.fileBrowserContainer.position.set(0, 1.4, this.CENTERPANELZDISTANCE);
Expand Down Expand Up @@ -779,7 +750,7 @@ export class FileBrowserPanel {
this.defaultObjsToTest.push(this.sortDirectionBlock);

// Finally add defaultObjsToTest to main array used for testing.
this.fileBrowserObjectsToTest = this.defaultObjsToTest.slice();
this.resetFileBrowserObjectsToTest();
//////////////////////////////////////////////////////////////////////

this.keyboardObjsToTest = this.makeKeyboard(this.searchText, this.searchTextSetContent);
Expand All @@ -792,6 +763,16 @@ export class FileBrowserPanel {

//////////////////////////////////////////////////////////////////////

ScreenManager.registerPanel('fileBrowserPanel', 'draggingBox', 'draggingBox');
ScreenManager.registerPanel('fileBrowserPanel', 'searchContainer', 'searchContainer');
ScreenManager.registerPanel('fileBrowserPanel', 'clearSearch', 'clearSearch');
ScreenManager.registerPanel('fileBrowserPanel', 'keyboard', 'keyboard');
ScreenManager.registerPanel('fileBrowserPanel', 'foldersContainer', 'foldersContainer');
ScreenManager.registerPanel('fileBrowserPanel', 'fileBrowserContainer', 'fileBrowserContainer');
ScreenManager.registerPanel('fileBrowserPanel', 'sortContainer', 'sortContainer');
ScreenManager.registerPanel('fileBrowserPanel', 'loadingAnimatedObj', 'loadingAnimatedObj');
ScreenManager.registerPanel('fileBrowserPanel', 'loadingAnimatedObjBackground', 'loadingAnimatedObjBackground');

MAIN.registerObjectToDrag(this.draggingBox, "files");
MAIN.registerObjectToDrag(this.searchContainer, "files");
MAIN.registerObjectToDrag(this.clearSearch, "files");
Expand Down Expand Up @@ -953,14 +934,19 @@ export class FileBrowserPanel {
deepDelete(this.thumbsContainer);
this.listOfVideoThumbnailTextures.forEach(texture => { texture.dispose(); });
this.thumbsContainer.set(this.thumbsContainerAttributes);
this.fileBrowserObjectsToTest = [];
this.fileBrowserObjectsToTest = this.defaultObjsToTest.slice();
this.resetFileBrowserObjectsToTest();

this.generateView();

UI.registerNewObjectsToTest(this.fileBrowserObjectsToTest);
}

resetFileBrowserObjectsToTest() {
this.fileBrowserObjectsToTest = [];
this.fileBrowserObjectsToTest = this.defaultObjsToTest.slice();
this.fileBrowserObjectsToTest = this.fileBrowserObjectsToTest.concat(this.foldersButtons.slice());
}

PreviousPage() {
if (this.CURRENT_PAGE > 0) {
this.CURRENT_PAGE--;
Expand All @@ -975,6 +961,97 @@ export class FileBrowserPanel {
}
}

generateFoldersButtons() {
let folderIndex = this.folderPageIndex;
// for (let index = 0; index < this.VIDEOS.length; index++) {
let index = 0;
while (index < this.MAXFOLDERSPERPAGE) {
if (folderIndex !== 0 && index === 0) {
const folderButton = this.createFolderButton(index++, 0, true, "Previous Page", "prev");
this.foldersContainer.add(folderButton);
this.foldersButtons.push(folderButton);
}
const folderButton = this.createFolderButton(index++, folderIndex++);
this.foldersContainer.add(folderButton);
this.foldersButtons.push(folderButton);
if (folderIndex >= this.VIDEOS.length) { break; }
}
if (folderIndex < this.VIDEOS.length) {
const folderButton = this.createFolderButton(index, folderIndex, true, "Next Page", "next");
this.foldersContainer.add(folderButton);
this.foldersButtons.push(folderButton);
}
this.foldersButtonsIdleState();
}

createFolderButton(id, index, isPageSwitcher = false, pageText = "", pageDirection = "") {
const folderButton = new Block({
justifyContent: 'center',
contentDirection: 'row',
height: 0.2,
offset: 0.05,
margin: 0.02,
bestFit: 'shrink',
width: (this.PANELMAXWIDTH / 3) - 0.1,
backgroundOpacity: 1
}).add(new Text({ content: (isPageSwitcher ? pageText : this.VIDEOS[index].name) }));
folderButton.folderId = id
folderButton.folderIndex = index
if (isPageSwitcher) {
folderButton.setupState({
state: 'selected',
attributes: this.selectedAttributes,
onSet: () => {
switch (pageDirection) {
case "prev":
this.folderPageIndex = this.folderPageIndex - this.MAXFOLDERSPERPAGE;
break;

default:
case "next":
this.folderPageIndex = this.folderPageIndex + this.MAXFOLDERSPERPAGE;
break;
}
this.regenerateFoldersButtons();
}
});
} else {
folderButton.setupState({
state: 'selected',
attributes: this.selectedAttributes,
onSet: () => {
if (this.ACTIVEFOLDER !== id) {
this.CURRENT_PAGE = 0;
this.FOLDER = index;
this.ACTIVEFOLDER = id;
if (this.searchText.content !== this.defaultSearchText) {
this.prepareFilesWithSearchPhrase();
} else {
this.FILES = this.VIDEOS[index].list;
this.TOTAL_PAGES = (Math.ceil(this.FILES.length / (this.FILES_PER_ROW * this.FILES_ROWS))) - 1;
this.sortFiles(this.activeSorting, this.sortDirection.content.toLowerCase());
}
this.foldersButtonsIdleState();
this.regenerateFileBrowser();
}
}
});
}
folderButton.setupState(this.hoveredState);
return folderButton;
}

regenerateFoldersButtons() {
deepDelete(this.foldersContainer);
this.foldersContainer.set(this.foldersContainerAttributes);
this.foldersButtons = [];
this.generateFoldersButtons();

this.resetFileBrowserObjectsToTest();

UI.registerNewObjectsToTest(this.fileBrowserObjectsToTest);
}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// Hide / Show Menu

Expand Down
2 changes: 1 addition & 1 deletion src/FileBrowser/ThumbnailBlock.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Block, Text, InlineBlock, Keyboard } from '../../node_modules/three-mesh-ui/build/three-mesh-ui.module.js';
import { Block } from '../../node_modules/three-mesh-ui/build/three-mesh-ui.module.js';

import * as Helpers from '../Helpers.js';
import { fileBrowserPanel } from '../index.js';
Expand Down
6 changes: 5 additions & 1 deletion src/PlayerPanelUI.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import FontImage from '../assets/fonts/Roboto-Regular.png';

import * as MAIN from './index.js';

import * as ScreenManager from './ScreenManager.js';
import * as ScreenManager from './ScreenManager/ScreenManager.js';

import * as UI from './UI.js';

Expand Down Expand Up @@ -312,6 +312,8 @@ export class PlayerPanel {
this.playMenuContainer.setupState({ state: 'hovered' });
this.playMenuContainer.setupState({ state: 'idle' });

ScreenManager.registerPanel('playMenuPanel', 'playMenuContainer', 'playMenuContainer');

////////////////////////////////////////

// Time elapsed and duration info label
Expand Down Expand Up @@ -610,6 +612,7 @@ export class PlayerPanel {
this.settingsMenuContainer.setupState({ state: 'selected' });
this.settingsMenuContainer.setupState({ state: 'hovered' });
this.settingsMenuContainer.setupState({ state: 'idle' });
ScreenManager.registerPanel('playMenuPanel', 'settingsMenuContainer', 'settingsMenuContainer');

const settingsMenuTopBar = new Block(this.settingsRowBlockAttributes);
settingsMenuTopBar.set({ justifyContent: 'end', width: (this.SETTINGSPANELMAXWIDTH - this.SETTINGSPANELMAXWIDTH / 16) });
Expand Down Expand Up @@ -884,6 +887,7 @@ export class PlayerPanel {
ScreenManager.stopDrag("player");
}
});
ScreenManager.registerPanel('playMenuPanel', 'draggingBox', 'draggingBox');
this.playMenuObjsToTest.push(this.draggingBox);

MAIN.registerObjectToDrag(this.draggingBox, "player");
Expand Down
Loading

0 comments on commit ed1ea4a

Please sign in to comment.