Compare commits

...

1 Commits

Author SHA1 Message Date
c5920d060b first attempts to remember scroll position 2021-03-10 17:45:20 +01:00
3 changed files with 44 additions and 10 deletions

View File

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

View File

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

View File

@ -12,7 +12,8 @@ import SearchHandling from './SearchHandling';
import {VideoTypes} from '../../types/ApiTypes'; import {VideoTypes} from '../../types/ApiTypes';
import {DefaultTags} from "../../types/GeneralTypes"; import {DefaultTags} from "../../types/GeneralTypes";
interface props extends RouteComponentProps {} interface props extends RouteComponentProps {
}
interface state { interface state {
sideinfo: VideoTypes.startDataType sideinfo: VideoTypes.startDataType
@ -50,6 +51,8 @@ export class HomePage extends React.Component<props, state> {
// initial get of all videos // initial get of all videos
this.fetchVideoData(DefaultTags.all.TagId); this.fetchVideoData(DefaultTags.all.TagId);
this.fetchStartData(); this.fetchStartData();
console.log(this.props)
} }
/** /**
@ -100,7 +103,8 @@ export class HomePage extends React.Component<props, state> {
onChange={(e): void => { onChange={(e): void => {
this.keyword = e.target.value; 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> </form>
</PageTitle> </PageTitle>
<SideBar> <SideBar>
@ -133,7 +137,19 @@ export class HomePage extends React.Component<props, state> {
</SideBar> </SideBar>
{this.state.data.length !== 0 ? {this.state.data.length !== 0 ?
<VideoContainer <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>No Data found!</div>}
<div className={style.rightinfo}> <div className={style.rightinfo}>