lukas/OpenMediaCenter
1
0
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases Wiki Activity

first attempts to remember scroll position

Browse Source
This commit is contained in:
lukas 2021-03-10 17:45:20 +01:00
parent be40475615
commit c5920d060b
3 changed files with 44 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/elements/Preview/Preview.tsx
View File

@ -8,6 +8,7 @@ import {APINode, callAPIPlain} from '../../utils/Api';
interface PreviewProps {
name: string;
movie_id: number;
onClick?: () => void;
}
interface PreviewState {
@ -38,7 +39,7 @@ class Preview extends React.Component<PreviewProps, PreviewState> {
render(): JSX.Element {
const themeStyle = GlobalInfos.getThemeStyle();
return (
<Link to={'/player/' + this.props.movie_id}>
<Link to={'/player/' + this.props.movie_id} onClick={this.props.onClick}>
<div className={style.videopreview + ' ' + themeStyle.secbackground + ' ' + themeStyle.preview}>
<div className={style.previewtitle + ' ' + themeStyle.lighttextcolor}>{this.props.name}</div>
<div className={style.previewpic}>

29
src/elements/VideoContainer/VideoContainer.tsx
View File

@ -4,7 +4,9 @@ import style from './VideoContainer.module.css';
import {VideoTypes} from '../../types/ApiTypes';
interface props {
data: VideoTypes.VideoUnloadedType[]
data: VideoTypes.VideoUnloadedType[];
onScrollPositionChange?: (scrollPos: number, loadedTiles: number) => void;
initialScrollPosition?: {scrollPos: number, loadedTiles: number};
}
interface state {
@ -32,7 +34,16 @@ class VideoContainer extends React.Component<props, state> {
componentDidMount(): void {
document.addEventListener('scroll', this.trackScrolling);
this.loadPreviewBlock(16);
console.log(this.props.initialScrollPosition)
if(this.props.initialScrollPosition !== undefined){
this.loadPreviewBlock(this.props.initialScrollPosition.loadedTiles, () => {
if(this.props.initialScrollPosition !== undefined)
window.scrollTo(0, this.props.initialScrollPosition.scrollPos);
});
}else{
this.loadPreviewBlock(16);
}
}
render(): JSX.Element {
@ -42,7 +53,11 @@ class VideoContainer extends React.Component<props, state> {
<Preview
key={elem.MovieId}
name={elem.MovieName}
movie_id={elem.MovieId}/>
movie_id={elem.MovieId}
onClick={(): void => {
if (this.props.onScrollPositionChange !== undefined)
this.props.onScrollPositionChange(window.pageYOffset - document.documentElement.clientHeight, this.loadindex)
}}/>
))}
{/*todo css for no items to show*/}
{this.state.loadeditems.length === 0 ?
@ -62,7 +77,7 @@ class VideoContainer extends React.Component<props, state> {
* load previews to the container
* @param nr number of previews to load
*/
loadPreviewBlock(nr: number): void {
loadPreviewBlock(nr: number, callback? : () => void): void {
console.log('loadpreviewblock called ...');
let ret = [];
for (let i = 0; i < nr; i++) {
@ -77,7 +92,7 @@ class VideoContainer extends React.Component<props, state> {
...this.state.loadeditems,
...ret
]
});
}, callback);
this.loadindex += nr;
@ -88,8 +103,10 @@ class VideoContainer extends React.Component<props, state> {
*/
trackScrolling = (): void => {
// comparison if current scroll position is on bottom --> 200 is bottom offset to trigger load
if (window.innerHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
if (document.documentElement.clientHeight + document.documentElement.scrollTop + 200 >= document.documentElement.offsetHeight) {
this.loadPreviewBlock(8);
if (this.props.onScrollPositionChange !== undefined)
this.props.onScrollPositionChange(document.documentElement.clientHeight + window.pageYOffset, this.loadindex)
}
};
}

22
src/pages/HomePage/HomePage.tsx
View File

@ -12,7 +12,8 @@ import SearchHandling from './SearchHandling';
import {VideoTypes} from '../../types/ApiTypes';
import {DefaultTags} from "../../types/GeneralTypes";
interface props extends RouteComponentProps {}
interface props extends RouteComponentProps {
}
interface state {
sideinfo: VideoTypes.startDataType
@ -50,6 +51,8 @@ export class HomePage extends React.Component<props, state> {
// initial get of all videos
this.fetchVideoData(DefaultTags.all.TagId);
this.fetchStartData();
console.log(this.props)
}
/**
@ -100,7 +103,8 @@ export class HomePage extends React.Component<props, state> {
onChange={(e): void => {
this.keyword = e.target.value;
}}/>
<button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search</button>
<button data-testid='searchbtnsubmit' className='btn btn-success' type='submit'>Search
</button>
</form>
</PageTitle>
<SideBar>
@ -133,7 +137,19 @@ export class HomePage extends React.Component<props, state> {
</SideBar>
{this.state.data.length !== 0 ?
<VideoContainer
data={this.state.data}/> :
data={this.state.data}
onScrollPositionChange={(pos, loadedTiles): void => {
this.props.location.state = {pos: pos, loaded: loadedTiles};
console.log("history state update called...")
const {state} = this.props.location;
const stateCopy: { pos: number, loaded: number } = {...state as { pos: number, loaded: number }};
stateCopy.loaded = loadedTiles;
stateCopy.pos = pos;
this.props.history.replace({state: stateCopy});
console.log(this.props)
}}
initialScrollPosition={this.props.location.state !== null ? {scrollPos: (this.props.location.state as { pos: number, loaded: number }).pos, loadedTiles: (this.props.location.state as { pos: number, loaded: number }).loaded} : undefined}/> :
<div>No Data found!</div>}
<div className={style.rightinfo}>