feat: slideshow using css and a single fullscreen element

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2024-08-27T07:26:05.058Z\n"
-"PO-Revision-Date: 2024-08-27T07:26:05.060Z\n"
+"POT-Creation-Date: 2024-09-09T15:15:02.457Z\n"
+"PO-Revision-Date: 2024-09-09T15:15:02.458Z\n"
 
 msgid "Untitled dashboard"
 msgstr "Untitled dashboard"
@@ -532,6 +532,9 @@ msgstr "Edit"
 msgid "Share"
 msgstr "Share"
 
+msgid "Slideshow"
+msgstr "Slideshow"
+
 msgid "Clear dashboard filters?"
 msgstr "Clear dashboard filters?"
 

src/actions/presentDashboard.js

@@ -0,0 +1,6 @@
+import { SET_PRESENT_DASHBOARD } from '../reducers/presentDashboard.js'
+
+export const acSetPresentDashboard = (isPresent) => ({
+    type: SET_PRESENT_DASHBOARD,
+    value: isPresent,
+})

src/components/Item/VisualizationItem/Item.js

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types'
 import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { acSetItemActiveType } from '../../../actions/itemActiveTypes.js'
+import { acSetPresentDashboard } from '../../../actions/presentDashboard.js'
 import { acAddVisualization } from '../../../actions/visualizations.js'
 import { apiPostDataStatistics } from '../../../api/dataStatistics.js'
 import { apiFetchVisualization } from '../../../api/fetchVisualization.js'
@@ -35,19 +36,21 @@ import {
     sGetItemFiltersRoot,
     DEFAULT_STATE_ITEM_FILTERS,
 } from '../../../reducers/itemFilters.js'
+import { sGetPresentDashboard } from '../../../reducers/presentDashboard.js'
 import { sGetVisualization } from '../../../reducers/visualizations.js'
 import { SystemSettingsCtx } from '../../SystemSettingsProvider.js'
 import { WindowDimensionsCtx } from '../../WindowDimensionsProvider.js'
 import ItemHeader from '../ItemHeader/ItemHeader.js'
 import FatalErrorBoundary from './FatalErrorBoundary.js'
 import { getGridItemElement } from './getGridItemElement.js'
-import { isElementFullscreen } from './isElementFullscreen.js'
 import ItemContextMenu from './ItemContextMenu/ItemContextMenu.js'
 import ItemFooter from './ItemFooter.js'
 import memoizeOne from './memoizeOne.js'
 import { pluginIsAvailable } from './Visualization/plugin.js'
 import Visualization from './Visualization/Visualization.js'
 
+const MIN_CLIENT_HEIGHT = 16
+
 class Item extends Component {
     state = {
         showFooter: false,
@@ -132,21 +135,6 @@ class Item extends Component {
     onClickNoFiltersOverlay = () =>
         this.setState({ showNoFiltersOverlay: false })
 
-    onToggleFullscreen = () => {
-        if (!isElementFullscreen(this.props.item.id)) {
-            const el = getGridItemElement(this.props.item.id)
-            if (el?.requestFullscreen) {
-                el.requestFullscreen()
-            } else if (el?.webkitRequestFullscreen) {
-                el.webkitRequestFullscreen()
-            }
-        } else {
-            document.exitFullscreen
-                ? document.exitFullscreen()
-                : document.webkitExitFullscreen()
-        }
-    }
-
     onToggleFooter = () => {
         this.setState(
             { showFooter: !this.state.showFooter },
@@ -166,16 +154,14 @@ class Item extends Component {
         return this.props.activeType || getItemTypeForVis(this.props.item)
     }
 
-    getAvailableHeight = ({ width, height }) => {
-        if (isElementFullscreen(this.props.item.id)) {
-            return (
-                height -
-                this.headerRef.current.clientHeight -
-                this.itemHeaderTotalMargin -
+    getAvailableHeight = ({ width }) => {
+        if (this.props.isFS) {
+            const totalHeaderHeight =
+                (this.headerRef.current.clientHeight || MIN_CLIENT_HEIGHT) +
+                this.itemHeaderTotalMargin +
                 this.itemContentPadding
-            )
+            return `calc(100vh - ${totalHeaderHeight}px)`
         }
-
         const calculatedHeight =
             getItemHeightPx(this.props.item, width) -
             this.headerRef.current.clientHeight -
@@ -191,6 +177,9 @@ class Item extends Component {
     }
 
     getAvailableWidth = () => {
+        if (this.props.isFS) {
+            return '100%'
+        }
         const rect = getGridItemElement(
             this.props.item.id
         )?.getBoundingClientRect()
@@ -203,20 +192,28 @@ class Item extends Component {
     }
 
     render() {
-        const { item, dashboardMode, itemFilters } = this.props
+        const {
+            item,
+            dashboardMode,
+            itemFilters,
+            isFS,
+            setPresent,
+            sortPosition,
+        } = this.props
         const { showFooter, showNoFiltersOverlay } = this.state
         const originalType = getItemTypeForVis(item)
         const activeType = this.getActiveType()
 
         const actionButtons =
             pluginIsAvailable(activeType || item.type, this.props.apps) &&
-            isViewMode(dashboardMode) ? (
+            isViewMode(dashboardMode) &&
+            isFS !== true ? (
                 <ItemContextMenu
                     item={item}
                     visualization={this.props.visualization}
                     onSelectActiveType={this.setActiveType}
                     onToggleFooter={this.onToggleFooter}
-                    onToggleFullscreen={this.onToggleFullscreen}
+                    enterFullscreen={() => setPresent(sortPosition - 1)}
                     activeType={activeType}
                     activeFooter={showFooter}
                     fullscreenSupported={this.isFullscreenSupported()}
@@ -295,6 +292,7 @@ class Item extends Component {
                                 {(dimensions) => (
                                     <Visualization
                                         item={item}
+                                        isFS={isFS}
                                         visualization={this.props.visualization}
                                         originalType={originalType}
                                         activeType={activeType}
@@ -333,12 +331,15 @@ Item.propTypes = {
     engine: PropTypes.object,
     gridWidth: PropTypes.number,
     isEditing: PropTypes.bool,
+    isFS: PropTypes.bool,
     isRecording: PropTypes.bool,
     item: PropTypes.object,
     itemFilters: PropTypes.object,
     setActiveType: PropTypes.func,
+    setPresent: PropTypes.func,
     setVisualization: PropTypes.func,
     settings: PropTypes.object,
+    sortPosition: PropTypes.number,
     visualization: PropTypes.object,
     onToggleItemExpanded: PropTypes.func,
 }
@@ -362,12 +363,14 @@ const mapStateToProps = (state, ownProps) => {
             state,
             getVisualizationId(ownProps.item)
         ),
+        presentDashboard: sGetPresentDashboard(state),
     }
 }
 
 const mapDispatchToProps = {
     setActiveType: acSetItemActiveType,
     setVisualization: acAddVisualization,
+    setPresent: acSetPresentDashboard,
 }
 
 const ItemWithSettings = (props) => (

src/components/Item/VisualizationItem/ItemContextMenu/ItemContextMenu.js

@@ -13,7 +13,6 @@ import {
     Popover,
     Divider,
     IconFullscreen16,
-    IconFullscreenExit16,
     IconLaunch16,
     IconMessages16,
     IconMore24,
@@ -31,7 +30,6 @@ import { isSmallScreen } from '../../../../modules/smallScreen.js'
 import MenuItem from '../../../MenuItemWithTooltip.js'
 import { useSystemSettings } from '../../../SystemSettingsProvider.js'
 import { useWindowDimensions } from '../../../WindowDimensionsProvider.js'
-import { isElementFullscreen } from '../isElementFullscreen.js'
 import ViewAsMenuItems from './ViewAsMenuItems.js'
 
 const ItemContextMenu = (props) => {
@@ -65,8 +63,8 @@ const ItemContextMenu = (props) => {
         }
     }
 
-    const toggleFullscreen = () => {
-        props.onToggleFullscreen()
+    const enterFullscreen = () => {
+        props.enterFullscreen()
         closeMenu()
     }
 
@@ -100,13 +98,7 @@ const ItemContextMenu = (props) => {
         getVisualizationId(item)
     )}`
 
-    return isElementFullscreen(item.id) ? (
-        <Button small secondary onClick={props.onToggleFullscreen}>
-            <span data-testid="exit-fullscreen-button">
-                <IconFullscreenExit16 color={colors.grey600} />
-            </span>
-        </Button>
-    ) : (
+    return (
         <>
             <div ref={buttonRef}>
                 <Button
@@ -166,7 +158,7 @@ const ItemContextMenu = (props) => {
                                 disabledWhenOffline={false}
                                 icon={<IconFullscreen16 />}
                                 label={i18n.t('View fullscreen')}
-                                onClick={toggleFullscreen}
+                                onClick={enterFullscreen}
                             />
                         )}
                     </Menu>
@@ -179,13 +171,13 @@ const ItemContextMenu = (props) => {
 ItemContextMenu.propTypes = {
     activeFooter: PropTypes.bool,
     activeType: PropTypes.string,
+    enterFullscreen: PropTypes.func,
     fullscreenSupported: PropTypes.bool,
     item: PropTypes.object,
     loadItemFailed: PropTypes.bool,
     visualization: PropTypes.object,
     onSelectActiveType: PropTypes.func,
     onToggleFooter: PropTypes.func,
-    onToggleFullscreen: PropTypes.func,
 }
 
 export default ItemContextMenu

src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.offline.spec.js

@@ -1,7 +1,6 @@
 import { fireEvent } from '@testing-library/dom'
-import { render, waitFor, screen } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import React from 'react'
-import { getGridItemDomElementClassName } from '../../../../../modules/getGridItemDomElementClassName.js'
 import { useSystemSettings } from '../../../../SystemSettingsProvider.js'
 import WindowDimensionsProvider from '../../../../WindowDimensionsProvider.js'
 import ItemContextMenu from '../ItemContextMenu.js'
@@ -66,34 +65,6 @@ test('renders just the button when menu closed', () => {
     expect(queryByText('View fullscreen')).toBeNull()
 })
 
-test('renders exit fullscreen button', () => {
-    useSystemSettings.mockReturnValue(mockSystemSettingsDefault)
-    const gridItemClassName = getGridItemDomElementClassName(
-        defaultProps.item.id
-    )
-
-    const { rerender } = render(
-        <WindowDimensionsProvider>
-            <div className={gridItemClassName}>
-                <ItemContextMenu {...defaultProps} />
-            </div>
-        </WindowDimensionsProvider>
-    )
-
-    document.fullscreenElement = document.querySelector(`.${gridItemClassName}`)
-
-    rerender(
-        <WindowDimensionsProvider>
-            <div className={{ gridItemClassName }}>
-                <ItemContextMenu {...defaultProps} />
-            </div>
-        </WindowDimensionsProvider>
-    )
-
-    document.fullscreenElement = null
-    expect(screen.getByTestId('exit-fullscreen-button')).toBeTruthy()
-})
-
 test('renders popover menu for BAR chart', async () => {
     useSystemSettings.mockReturnValue(mockSystemSettingsDefault)
     const props = Object.assign({}, defaultProps, {

src/components/Item/VisualizationItem/ItemContextMenu/__tests__/ItemContextMenu.spec.js

@@ -1,7 +1,6 @@
 import { fireEvent } from '@testing-library/dom'
-import { render, waitFor, screen } from '@testing-library/react'
+import { render, waitFor } from '@testing-library/react'
 import React from 'react'
-import { getGridItemDomElementClassName } from '../../../../../modules/getGridItemDomElementClassName.js'
 import { useSystemSettings } from '../../../../SystemSettingsProvider.js'
 import WindowDimensionsProvider from '../../../../WindowDimensionsProvider.js'
 import ItemContextMenu from '../ItemContextMenu.js'
@@ -66,34 +65,6 @@ test('renders just the button when menu closed', () => {
     expect(queryByText('View fullscreen')).toBeNull()
 })
 
-test('renders exit fullscreen button', () => {
-    useSystemSettings.mockReturnValue(mockSystemSettingsDefault)
-    const gridItemClassName = getGridItemDomElementClassName(
-        defaultProps.item.id
-    )
-
-    const { rerender } = render(
-        <WindowDimensionsProvider>
-            <div className={gridItemClassName}>
-                <ItemContextMenu {...defaultProps} />
-            </div>
-        </WindowDimensionsProvider>
-    )
-
-    document.fullscreenElement = document.querySelector(`.${gridItemClassName}`)
-
-    rerender(
-        <WindowDimensionsProvider>
-            <div className={{ gridItemClassName }}>
-                <ItemContextMenu {...defaultProps} />
-            </div>
-        </WindowDimensionsProvider>
-    )
-
-    document.fullscreenElement = null
-    expect(screen.getByTestId('exit-fullscreen-button')).toBeTruthy()
-})
-
 test('renders popover menu for BAR chart', async () => {
     useSystemSettings.mockReturnValue(mockSystemSettingsDefault)
     const props = Object.assign({}, defaultProps, {

src/components/Item/VisualizationItem/Visualization/Visualization.js

@@ -40,6 +40,7 @@ const Visualization = ({
     originalType,
     showNoFiltersOverlay,
     onClickNoFiltersOverlay,
+    isFS,
     ...rest
 }) => {
     const dashboardId = useSelector(sGetSelectedId)
@@ -141,6 +142,7 @@ const Visualization = ({
                 <IframePlugin
                     visualization={visualizationConfig}
                     {...iFramePluginProps}
+                    isFS={isFS}
                 />
             )
         }
@@ -169,6 +171,7 @@ const Visualization = ({
                     <IframePlugin
                         visualization={visualizationConfig}
                         {...iFramePluginProps}
+                        isFS={isFS}
                     />
                 </>
             )
@@ -191,6 +194,7 @@ const Visualization = ({
                 <IframePlugin
                     visualization={visualizationConfig}
                     {...iFramePluginProps}
+                    isFS={isFS}
                 />
             )
         }
@@ -229,6 +233,7 @@ Visualization.propTypes = {
     availableWidth: PropTypes.number,
     dashboardMode: PropTypes.string,
     gridWidth: PropTypes.number,
+    isFS: PropTypes.bool,
     item: PropTypes.object,
     itemFilters: PropTypes.object,
     originalType: PropTypes.string,