Skip to content

Commit

Permalink
chore: rename from fullscreen to slideshow
Browse files Browse the repository at this point in the history
  • Loading branch information
@jenniferarnesen
jenniferarnesen committed Nov 28, 2024
1 parent b952fe8 commit 1ac2ee3
Show file tree
Hide file tree
Showing 2 changed files with 57 additions and 55 deletions.
56 changes: 28 additions & 28 deletions src/modules/useFullscreen.js → src/modules/useSlideshow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ import { acSetSlideshow } from '../actions/slideshow.js'
import { sGetSlideshow } from '../reducers/slideshow.js'
import { itemTypeSupportsFullscreen } from './itemTypes.js'

const useFullscreen = (displayItems) => {
const useSlideshow = (displayItems) => {
const dispatch = useDispatch()
const sortedItems = useRef([])
const fsItemStartingIndex = useSelector(sGetSlideshow)
const [fsItemIndex, setFsItemIndex] = useState(null)
const [isPreFullscreen, setIsPreFullscreen] = useState(false)
const fsElementRef = useRef(null)
const itemStartingIndex = useSelector(sGetSlideshow)
const [itemIndex, setItemIndex] = useState(null)
const [isPreSlideshow, setIsPreSlideshow] = useState(false)
const slideshowElementRef = useRef(null)

// Sort items into order on dashboard
// and filter out items that don't support fullscreen
Expand All @@ -25,41 +25,41 @@ const useFullscreen = (displayItems) => {
// Slideshow button or Item "View fullscreen" menu clicked
// Fullscreen Exit button or ESC key pressed
useEffect(() => {
if (Number.isInteger(fsItemStartingIndex)) {
const el = fsElementRef?.current
setIsPreFullscreen(true)
if (Number.isInteger(itemStartingIndex)) {
const el = slideshowElementRef?.current
setIsPreSlideshow(true)
el?.requestFullscreen({ navigationUI: 'show' })
setTimeout(() => {
setFsItemIndex(fsItemStartingIndex)
setIsPreFullscreen(false)
setItemIndex(itemStartingIndex)
setIsPreSlideshow(false)
}, 200)
} else {
setFsItemIndex(null)
setItemIndex(null)
}
}, [fsItemStartingIndex])
}, [itemStartingIndex])

// Exit button clicked
const exitFullscreen = () => {
const exitSlideshow = () => {
if (document.fullscreenElement) {
document.exitFullscreen()
document.exitSlideshow()
}
}

const nextItem = useCallback(() => {
if (fsItemIndex === sortedItems.current.length - 1) {
setFsItemIndex(0)
if (itemIndex === sortedItems.current.length - 1) {
setItemIndex(0)
} else {
setFsItemIndex(fsItemIndex + 1)
setItemIndex(itemIndex + 1)
}
}, [fsItemIndex])
}, [itemIndex])

const prevItem = useCallback(() => {
if (fsItemIndex === 0) {
setFsItemIndex(sortedItems.current.length - 1)
if (itemIndex === 0) {
setItemIndex(sortedItems.current.length - 1)
} else {
setFsItemIndex(fsItemIndex - 1)
setItemIndex(itemIndex - 1)
}
}, [fsItemIndex])
}, [itemIndex])

// Handle keyboard navigation for the slideshow
useEffect(() => {
Expand Down Expand Up @@ -93,15 +93,15 @@ const useFullscreen = (displayItems) => {
}, [dispatch, nextItem, prevItem])

return {
fsItemIndex,
fsElementRef,
exitFullscreen,
slideshowItemIndex: itemIndex,
slideshowElementRef,
exitSlideshow,
nextItem,
prevItem,
sortedItems: sortedItems.current,
isFullscreenView: fsItemIndex !== null,
isPreFullscreen,
isSlideshowView: itemIndex !== null,
isPreSlideshow,
}
}

export default useFullscreen
export default useSlideshow
56 changes: 29 additions & 27 deletions src/pages/view/ItemGrid.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import {
} from '../../modules/gridUtil.js'
import { getBreakpoint, isSmallScreen } from '../../modules/smallScreen.js'
import { useCacheableSection } from '../../modules/useCacheableSection.js'
import useFullscreen from '../../modules/useFullscreen.js'
import useFullscreen from '../../modules/useSlideshow.js'
import {
sGetSelectedId,
sGetSelectedDashboardItems,
Expand All @@ -39,30 +39,28 @@ import classes from './styles/ItemGrid.module.css'

const EXPANDED_HEIGHT = 19
const EXPANDED_HEIGHT_SM = 15
const EMPTY_EXPANDED_ITEMS = {}
const EMPTY_SMALL_LAYOUT = []

const ResponsiveItemGrid = () => {
const dashboardId = useSelector(sGetSelectedId)
const dashboardItems = useSelector(sGetSelectedDashboardItems)
const { width } = useWindowDimensions()
const [expandedItems, setExpandedItems] = useState(EMPTY_EXPANDED_ITEMS)
const [expandedItems, setExpandedItems] = useState({})
const [displayItems, setDisplayItems] = useState(dashboardItems)
const [layoutSm, setLayoutSm] = useState(EMPTY_SMALL_LAYOUT)
const [layoutSm, setLayoutSm] = useState([])
const [gridWidth, setGridWidth] = useState(0)
const [forceLoad, setForceLoad] = useState(false)
const { recordingState } = useCacheableSection(dashboardId)
const firstOfTypes = getFirstOfTypes(dashboardItems)

const {
fsItemIndex,
fsElementRef,
exitFullscreen,
slideshowItemIndex,
slideshowElementRef,
exitSlideshow,
nextItem,
prevItem,
sortedItems,
isFullscreenView,
isPreFullscreen,
isSlideshowView,
isPreSlideshow,
} = useFullscreen(displayItems)

useEffect(() => {
Expand Down Expand Up @@ -114,20 +112,24 @@ const ResponsiveItemGrid = () => {
item.firstOfType = true
}

const itemIsFullscreen = isFullscreenView
? sortedItems[fsItemIndex].id === item.id
const itemIsFullscreen = isSlideshowView
? sortedItems[slideshowItemIndex].id === item.id
: null

// Force load next and previous items in fullscreen mode
const nextFSItemIndex =
fsItemIndex === sortedItems.length - 1 ? 0 : fsItemIndex + 1
const prevFSItemIndex =
fsItemIndex === 0 ? sortedItems.length - 1 : fsItemIndex - 1
// Force load next and previous items for slideshow view
const nextslideshowItemIndex =
slideshowItemIndex === sortedItems.length - 1
? 0
: slideshowItemIndex + 1
const prevslideshowItemIndex =
slideshowItemIndex === 0
? sortedItems.length - 1
: slideshowItemIndex - 1

const itemIsNextPrevFullscreen =
isFullscreenView &&
(sortedItems[nextFSItemIndex].id === item.id ||
sortedItems[prevFSItemIndex].id === item.id)
isSlideshowView &&
(sortedItems[nextslideshowItemIndex].id === item.id ||
sortedItems[prevslideshowItemIndex].id === item.id)

return (
<ProgressiveLoadingContainer
Expand All @@ -138,10 +140,10 @@ const ResponsiveItemGrid = () => {
getGridItemDomElementClassName(item.id),
{
[classes.fullscreenItem]:
isPreFullscreen || isFullscreenView,
isPreSlideshow || isSlideshowView,
[classes.hiddenItem]: itemIsFullscreen === false,
[classes.displayedItem]: itemIsFullscreen,
[classes.preFullscreen]: isPreFullscreen,
[classes.preFullscreen]: isPreSlideshow,
}
)}
itemId={item.id}
Expand Down Expand Up @@ -179,10 +181,10 @@ const ResponsiveItemGrid = () => {
}

return (
<div ref={fsElementRef}>
<div ref={slideshowElementRef}>
<ResponsiveReactGridLayout
className={cx(classes.grid, {
[classes.fullscreenGrid]: isFullscreenView,
[classes.fullscreenGrid]: isSlideshowView,
})}
rowHeight={GRID_ROW_HEIGHT_PX}
width={getGridWidth(width)}
Expand All @@ -206,20 +208,20 @@ const ResponsiveItemGrid = () => {
{getItemComponents(displayItems)}
</ResponsiveReactGridLayout>

{isFullscreenView && (
{isSlideshowView && (
<div className={classes.fullscreenControlsContainer}>
<div className={classes.fullscreenControls}>
<button
className={classes.exitButton}
onClick={exitFullscreen}
onClick={exitSlideshow}
>
<IconCross24 color={colors.white} />
</button>
<button onClick={prevItem}>
<IconChevronLeft24 color={colors.white} />
</button>
<span className={classes.pageCounter}>{`${
fsItemIndex + 1
slideshowItemIndex + 1
} / ${sortedItems.length}`}</span>
<button onClick={nextItem}>
<IconChevronRight24 color={colors.white} />
Expand Down

0 comments on commit 1ac2ee3

Please sign in to comment.