diff --git a/src/elements/Preview/Preview.tsx b/src/elements/Preview/Preview.tsx index bfc6841..0ce36f6 100644 --- a/src/elements/Preview/Preview.tsx +++ b/src/elements/Preview/Preview.tsx @@ -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 { render(): JSX.Element { const themeStyle = GlobalInfos.getThemeStyle(); return ( - +
{this.props.name}
diff --git a/src/elements/VideoContainer/VideoContainer.tsx b/src/elements/VideoContainer/VideoContainer.tsx index e03a344..4615111 100644 --- a/src/elements/VideoContainer/VideoContainer.tsx +++ b/src/elements/VideoContainer/VideoContainer.tsx @@ -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 { 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 { + 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 { * 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 { ...this.state.loadeditems, ...ret ] - }); + }, callback); this.loadindex += nr; @@ -88,8 +103,10 @@ class VideoContainer extends React.Component { */ 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) } }; } diff --git a/src/pages/HomePage/HomePage.tsx b/src/pages/HomePage/HomePage.tsx index 3b51274..c7e23dc 100644 --- a/src/pages/HomePage/HomePage.tsx +++ b/src/pages/HomePage/HomePage.tsx @@ -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 { // 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 { onChange={(e): void => { this.keyword = e.target.value; }}/> - + @@ -133,7 +137,19 @@ export class HomePage extends React.Component { {this.state.data.length !== 0 ? : + 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}/> :
No Data found!
}