Skip to content

Commit

Permalink
code cleaning on extra pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@luc-github
luc-github committed Jul 31, 2024
1 parent 517f092 commit e3be6b0
Show file tree
Hide file tree
Showing 3 changed files with 20 additions and 75 deletions.
31 changes: 4 additions & 27 deletions src/areas/elementsCache.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,31 +92,6 @@ const elementsCache = {
return cacheHost.querySelector('#' + id)
},

remove: (id) => {
const cacheItem = elementsCache.get(id)
if (cacheItem) {
//due to the way render, each new element has div as parent itself connected to the cache
const itemHost = cacheItem.parentNode
try {
const cacheHost = document.getElementById("elementsCache")
if (!cacheHost) return false
//sanity check if we have new implementation
if (cacheHost == itemHost) return false
removeCache = removeChild(cacheHost, itemHost)
if (removeCache) {
removeCache.remove()
return true
} else {
return false
}
} catch (error) {
console.error(`Error removing element ${id}:`, error)
return false
}
}
return false
},

updateState: (id, newState) => {
const element = document.getElementById(id);
//console.log("Updating state for element " + id)
Expand All @@ -125,10 +100,12 @@ const elementsCache = {
if ('isVisible' in newState) {
element.style.display = newState.isVisible ? 'block' : 'none';
if (newState.isVisible) {console.log("Element " + id + " is now visible")} else {console.log("Element " + id + " is now hidden")}
//TODO: add notification to extension (status: visible/hidden)
}
if ('isFullScreen' in newState) {
//Note: isFullScreen is not handled here, it is handled by the FullScreenButton itself
/*if ('isFullScreen' in newState) {
eventBus.emit('updateState', {id, isFullScreen: newState.isFullScreen})
}
}*/
if ('forceRefresh' in newState && newState.forceRefresh) {
eventBus.emit('updateState', {id, forceRefresh: newState.forceRefresh})
}
Expand Down
56 changes: 15 additions & 41 deletions src/components/ExtraContent/extraContentItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@
Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA
*/
import { Fragment, h } from "preact"
import { useState, useEffect, useCallback, useRef ,useMemo} from "preact/hooks"
import { espHttpURL,isFullscreenActive } from "../Helpers"
import { useState, useEffect, useCallback, useRef, useMemo } from "preact/hooks"
import { espHttpURL } from "../Helpers"
import { useHttpFn } from "../../hooks"
import { ButtonImg, ContainerHelper } from "../Controls"
import { T } from "../Translations"
Expand Down Expand Up @@ -72,60 +72,33 @@ const ExtraContentItem = ({
}, [id])


const handleFullscreenChange = () => {
//console.log("Handling fullscreen change for " + id)
if (isFullscreenActive()) {
//console.log("Fullscreen activated for " + id)
} else {
//console.log("Fullscreen deactivated for " + id)
}
}


useEffect(() => {
const handleUpdateState = (msg) => {
if (msg.id === id ){

if (msg.id === id) {
//console.log("Handling update state for " + id, "msg:", msg)
if(msg.forceRefresh) {
//console.log("Refreshing content for " + id)
loadContent(true)
if (msg.forceRefresh) {
//console.log("Refreshing content for " + id)
loadContent(true)
}

if ('isFullScreen' in msg) {
const elementPanel = document.getElementById(id);
if (msg.isFullScreen) {
elementPanel.style.position = 'fixed';
elementPanel.style.top = '0';
elementPanel.style.left = '0';
elementPanel.style.width = '100%';
elementPanel.style.height = '100%';
} else {
// Rétablir les styles normaux
elementPanel.style.position = 'absolute';
elementPanel.style.top = '';
elementPanel.style.left = '';
elementPanel.style.width = '';
elementPanel.style.height = '';
elementPanel.style.zIndex = '';
}
const element = document.getElementById(id)
document.addEventListener("fullscreenchange", handleFullscreenChange)
element.requestFullscreen()

//TBD
}
}
}
eventBus.on("updateState", handleUpdateState)
return () => {
eventBus.off("updateState", handleUpdateState)
}})
}
})

const loadContent = useCallback(() => {
//do we need to check if is already loading?
//console.log("Loading content for " + id)
setIsLoading(true)
if (source.startsWith("http") ) {
if (source.startsWith("http")) {
//console.log("Loading URL " + source)
setContentUrl(source)
setHasError(false)
Expand Down Expand Up @@ -169,7 +142,7 @@ const ExtraContentItem = ({
})
}
}


const renderContent = useMemo(() => {
if (isLoading && type !== "image" && type !== "camera") {
Expand Down Expand Up @@ -238,9 +211,10 @@ const ExtraContentItem = ({
//console.log("Rendering element " + id, target)
return (
<div id={id} class="extra-contentContainer">
<ContainerHelper id={id} />
{renderContent}
{RenderControls}

</div>
)
}
Expand Down
8 changes: 1 addition & 7 deletions src/components/ExtraContent/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,11 +101,7 @@ const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) =>
elementsCache.updateState(extra_content_id, { forceRefresh: true })
}

const handleFullScreen = () => {
/* setIsFullScreen(true)
console.log("Toggling fullscreen for element " + extra_content_id)
elementsCache.updateState(extra_content_id, { isFullScreen: true })*/
}


const PanelRenderControls = () => (
<span class="full-height">
Expand All @@ -117,10 +113,8 @@ const ExtraContent = ({ id, source, refreshtime, label, type, target, icon }) =>
icon={<RefreshCcw size="0.8rem" />}
onclick={handleRefresh}
/>

<FullScreenButton
elementId={extra_content_id}
onclick={handleFullScreen}
/>
<CloseButton
elementId={id}
Expand Down

0 comments on commit e3be6b0

Please sign in to comment.