exb-camviewer 1.0.0

package/LICENSE.md

@@ -0,0 +1,7 @@
+Copyright 2026 Lucius Creamer
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the “Software”), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED “AS IS”, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,16 @@
+# CamViewer Widget
+
+This is a simple widget to view .m3u8 streams using a url field in a feature layer. The widget appears as a button, which when clicked will turn on the "camera" layer, and when a camera is clicked a popup video stream will appear to start streaming the live camera feed.
+
+## Interactive Example
+
+This widget can be used and interacted with on my example application, found [here](https://exb.luciuscreamer.com/camera). In case you miss it, the camera widget is the little button at the bottom of the screen. Click it to turn on the camera layer.
+![A screenshot of the camera application](./cameraExample.png)
+
+## Setting up the widget
+
+This widget can be set up by adding the widget to your application, then selecting the map and data source the camera layer is stored in. You will then select the field that the .m3u8 url is stored in, as well as an icon for the main widget button. It is recommended that you set a background color in the style settings, and also set the height and width to "auto".
+
+## Using the widget
+
+Click the widget button (Icon selected by builder), and cameras should appear on your map. Click a camera icon on your map, and a viewing window should appear. You can then click the X icon in the top right of the camera window to close the camera feed and unselect the camera feature/features.

package/config.json

@@ -0,0 +1,3 @@
+{
+  "icon": "camera"
+}

package/icon.svg

@@ -0,0 +1,7 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg fill="#ffffff" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="800px" height="800px" viewBox="0 0 856.506 856.506" xml:space="preserve" stroke="#ffffff">
+
+
+
+

package/manifest.json

@@ -0,0 +1,22 @@
+{
+  "name": "CamViewer",
+  "label": "Camera Viewer",
+  "type": "widget",
+  "version": "1.18.0",
+  "exbVersion": "1.18.0",
+  "author": "Lucius Creamer",
+  "description": "This widget allows users to view and interact with camera feeds in a map context.",
+  "copyright": "",
+  "dependency": [
+    "jimu-arcgis"
+  ],
+  "license": "http://www.apache.org/licenses/LICENSE-2.0",
+  "properties": {},
+  "translatedLocales": [
+    "en"
+  ],
+  "defaultSize": {
+    "width": 800,
+    "height": 500
+  }
+}

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "exb-camviewer",
+  "version": "1.0.0",
+  "description": "A camera viewer, to view .m3u8 streams via a url in a feature layer.",
+  "license": "MIT",
+  "author": "Lucius Creamer",
+  "homepage": "https://github.com/SunshineLuke90/widgets#readme",
+  "bugs": {
+    "url": "https://github.com/SunshineLuke90/widgets/issues"
+  },
+  "dependencies": {
+    "hls.js": "^1.6.15"
+  },
+  "main": "src/runtime/widget.tsx",
+  "keywords": [
+    "exb-widget",
+    "experience-builder",
+    "exb"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/SunshineLuke90/widgets.git",
+    "directory": "CamViewer"
+  }
+}

package/src/config.ts

@@ -0,0 +1,8 @@
+import type { ImmutableObject } from 'seamless-immutable'
+import type { IconResult } from 'jimu-core'
+
+export interface Config {
+  icon: IconResult;
+}
+
+export type IMConfig = ImmutableObject<Config>

package/src/runtime/style.css

@@ -0,0 +1,43 @@
+.widget-camviewer .view-buttons-container {
+  display: flex;
+}
+
+
+.widget-camviewer .jimu-widget{
+  display: flex;
+  text-align: center;
+  color: var(--dark);
+}
+
+.widget-camviewer-not-configured {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+  background-color: var(--light);
+  color: var(--dark);
+}
+
+.widget-camviewer .view-button {
+  text-align: center;
+  cursor: pointer;
+  /* Default state using theme variables */
+  background-color: transparent;
+  color: var(--dark);
+  align-items: center;
+  vertical-align: middle;
+  justify-content: center;
+  gap: 4px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  size: auto;
+  height: auto;
+  width: auto;
+  button {
+    background-color: var(--light);
+    color: var(--dark);
+  }
+}

package/src/runtime/translations/default.ts

@@ -0,0 +1,4 @@
+export default {
+  _widgetLabel: 'Camera Viewer',
+  notConfigured: 'Please configure the widget in the settings pane.'
+}

package/src/runtime/widget.tsx

@@ -0,0 +1,259 @@
+import { React, type AllWidgetProps, type DataSource, DataSourceComponent, type FeatureLayerQueryParams } from 'jimu-core'
+import type { IMConfig } from '../config'
+import defaultMessages from './translations/default'
+import { JimuMapViewComponent, type JimuMapView, type JimuLayerView } from 'jimu-arcgis'
+import { Button, Icon } from 'jimu-ui'
+import './style.css'
+import { useCallback, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+// You need to install hls.js into your client directory
+// Run npm install hls.js in your client directory to install.
+import Hls from 'hls.js'
+
+export default function Widget(props: AllWidgetProps<IMConfig>) {
+  const { useDataSources, useMapWidgetIds } = props
+  const [jimuMapView, setJimuMapView] = React.useState<JimuMapView>(null)
+
+  const isConfigured = useDataSources && useDataSources.length > 0 && useDataSources[0].dataSourceId && useDataSources[0].fields && useDataSources[0].fields.length > 0
+
+  // Dedicated state for currentURL and layerView
+  const [currentURL, setCurrentURL] = React.useState<string | undefined>(undefined)
+  const [layerView, setLayerView] = React.useState<JimuLayerView | undefined>(undefined)
+  const [camLayerOn, setCamLayerOn] = React.useState(false)
+  const [ds, setDs] = useState<DataSource>(null)
+
+
+  // State for video position and size
+  const [videoPos, setVideoPos] = useState({ x: 100, y: 100 })
+  const [dragging, setDragging] = useState(false)
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 })
+  const [resizing, setResizing] = useState(false)
+  const [resizeStart, setResizeStart] = useState({ x: 0, y: 0, width: 250, height: 140 })
+  const [videoSize, setVideoSize] = useState({ width: 250, height: 140 })
+  const [showVideo, setShowVideo] = useState(true)
+  const [aspectRatio, setAspectRatio] = useState(16 / 9)
+
+  const dataRender = (ds: DataSource) => {
+    const selectedRecords = ds.getSelectedRecords()
+    const fieldanme = props.useDataSources[0].fields[0]
+    if (selectedRecords.length > 0) {
+      const url = selectedRecords[0].getFieldValue(fieldanme)
+      setCurrentURL(url)
+      setShowVideo(true)
+    }
+    return null
+  }
+
+  // Draggable, resizable, closable video portal
+  const handleMouseMove = (e) => {
+    if (dragging) {
+      setVideoPos({ x: e.clientX - dragOffset.x, y: e.clientY - dragOffset.y })
+    } else if (resizing) {
+      const dx = e.clientX - resizeStart.x
+      const newWidth = Math.max(120, resizeStart.width + dx)
+      const newHeight = Math.round(newWidth / aspectRatio)
+      setVideoSize({ width: newWidth, height: newHeight })
+    }
+  }
+  const handleMouseUp = () => {
+    setDragging(false)
+    setResizing(false)
+  }
+  React.useEffect(() => {
+    if (dragging || resizing) {
+      window.addEventListener('mousemove', handleMouseMove)
+      window.addEventListener('mouseup', handleMouseUp)
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove)
+        window.removeEventListener('mouseup', handleMouseUp)
+      }
+    }
+  })
+
+  const videoPortal = (currentURL && showVideo) ? createPortal(
+    <div
+      style={{
+        position: 'fixed',
+        left: videoPos.x,
+        top: videoPos.y,
+        zIndex: 9999,
+        cursor: dragging ? 'grabbing' : 'grab',
+        background: 'rgba(0,0,0,0.2)',
+        borderRadius: 10,
+        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.2)',
+        padding: 4,
+        userSelect: 'none',
+        minWidth: 120,
+        minHeight: 68
+      }}
+      onMouseDown={e => {
+        // Only drag if not clicking close or resize
+        if ((e.target as HTMLElement).classList.contains('video-close-btn') || (e.target as HTMLElement).classList.contains('video-resize-handle')) return
+        setDragging(true)
+        setDragOffset({ x: e.clientX - videoPos.x, y: e.clientY - videoPos.y })
+      }}
+    >
+      {/* Close button */}
+      <div
+        className="video-close-btn"
+        style={{
+          position: 'absolute',
+          top: 2,
+          right: 6,
+          fontSize: 18,
+          color: '#fff',
+          background: 'rgba(0,0,0,0.5)',
+          borderRadius: '50%',
+          width: 24,
+          height: 24,
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          cursor: 'pointer',
+          zIndex: 2
+        }}
+        onClick={() => {
+          ds.clearSelection()
+          setShowVideo(false)
+        }}
+        title="Close"
+      >×</div>
+      {/* Video */}
+      <video
+        src={currentURL}
+        autoPlay={true}
+        style={{ width: videoSize.width, height: videoSize.height, borderRadius: 10, display: 'block' }}
+        className={'cameraViewer-video'}
+        onLoadedMetadata={e => {
+          const video = e.currentTarget
+          if (video.videoWidth && video.videoHeight) {
+            const ratio = video.videoWidth / video.videoHeight
+            setAspectRatio(ratio)
+            // Optionally, update window size to match new aspect ratio
+            setVideoSize(prev => ({ width: prev.width, height: Math.round(prev.width / ratio) }))
+          }
+        }}
+      />
+      {/* Resize handle */}
+      <div
+        className="video-resize-handle"
+        style={{
+          position: 'absolute',
+          right: 2,
+          bottom: 2,
+          width: 18,
+          height: 18,
+          background: 'rgba(0,0,0,0.3)',
+          borderRadius: 4,
+          cursor: 'nwse-resize',
+          zIndex: 2,
+          display: 'flex',
+          alignItems: 'flex-end',
+          justifyContent: 'flex-end',
+        }}
+        onMouseDown={e => {
+          e.stopPropagation()
+          setResizing(true)
+          setResizeStart({ x: e.clientX, y: e.clientY, width: videoSize.width, height: videoSize.height })
+        }}
+        title="Resize"
+      >
+        <svg width="16" height="16" viewBox="0 0 16 16"><polyline points="4,16 16,4" stroke="#fff" strokeWidth="2" fill="none"/></svg>
+      </div>
+    </div>,
+    document.body
+  ) : null
+
+  const activeViewChangeHandler = (jmv: JimuMapView): void => {
+    if (jmv) {
+      setJimuMapView(jmv)
+    }
+  }
+
+  const toggleLayerVisibility = useCallback(() => {
+    if (!jimuMapView || !props.useDataSources?.[0] || !layerView) {
+      console.warn('Map view, data source, or layerView is not ready.')
+      return
+    }
+    const newVal = !camLayerOn
+    setCamLayerOn(newVal)
+    layerView.view.set({ visible: newVal })
+    console.log('Layer visibility toggled:', newVal)
+  }, [jimuMapView, props.useDataSources, layerView, camLayerOn])
+
+  React.useEffect(() => {
+    if (jimuMapView && props.useDataSources?.length > 0 && !layerView) {
+      const jimuLayerView = jimuMapView.getJimuLayerViewByDataSourceId(props.useDataSources[0].dataSourceId)
+      if (!jimuLayerView) {
+        console.warn('Cannot find layer view.')
+        return
+      }
+      setLayerView(jimuLayerView)
+      setCamLayerOn(false)
+      jimuLayerView.layer.set({ visible: false })
+      console.log('Layer visibility turned off (Default):', false)
+    }
+  }, [jimuMapView, props.useDataSources, layerView])
+
+  React.useEffect(() => {
+    console.log("useEffect called")
+    const hls = new Hls({ debug: true })
+    console.log("HLS instance created:", hls)
+    if (Hls.isSupported() && currentURL) {
+      hls.loadSource(currentURL)
+      hls.on(Hls.Events.ERROR, (err) => {
+        console.log(err)
+      })
+    } else {
+      console.log("load")
+    }
+    return () => {
+      hls.destroy()
+      console.log("HLS instance destroyed")
+    }
+  }, [currentURL])
+
+  if (!isConfigured) {
+    return (
+      <div className="widget-camviewer jimu-widget">
+        <div className="widget-camviewer-not-configured">
+          {defaultMessages.notConfigured}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <>
+      <div className="widget-camviewer jimu-widget" style={{ overflow: 'auto' }}>
+        {useMapWidgetIds?.length > 0 && (
+          <JimuMapViewComponent
+            useMapWidgetId={useMapWidgetIds?.[0]}
+            onActiveViewChange={activeViewChangeHandler}
+          />
+        )}
+        <div className="view-button">
+          <Button
+            aria-label="Button"
+            icon
+            onClick={toggleLayerVisibility}
+            size="default"
+          >
+            <Icon icon={props.config.icon.svg} size="l" />
+          </Button>
+        </div>
+        <DataSourceComponent useDataSource={props.useDataSources[0]} query={{ where: '1=1' } as FeatureLayerQueryParams} widgetId={props.id}>
+          {
+            (ds: DataSource) => {
+              dataRender(ds)
+              setDs(ds)
+            return null
+            }
+          }
+        </DataSourceComponent>
+      </div>
+      {videoPortal}
+    </>
+  )
+}

package/src/setting/setting.tsx

@@ -0,0 +1,101 @@
+import {
+	Immutable,
+	type UseDataSource,
+	DataSourceTypes,
+	type IMFieldSchema
+} from "jimu-core"
+import type { AllWidgetSettingProps } from "jimu-for-builder"
+import {
+	MapWidgetSelector,
+	SettingRow,
+	SettingSection
+} from "jimu-ui/advanced/setting-components"
+import defaultI18nMessages from "./translations/default"
+import type { IMConfig } from "../config"
+import {
+	DataSourceSelector,
+	FieldSelector
+} from "jimu-ui/advanced/data-source-selector"
+import { IconPicker } from "jimu-ui/advanced/resource-selector"
+
+export default function Setting(props: AllWidgetSettingProps<IMConfig>) {
+	const onMapSelected = (useMapWidgetIds: string[]) => {
+		props.onSettingChange({
+			id: props.id,
+			useMapWidgetIds: useMapWidgetIds
+		})
+	}
+
+	const onFieldsChange = (fields: IMFieldSchema[]) => {
+		const useDataSource = props.useDataSources[0]
+			.set(
+				"fields",
+				fields?.map((f) => f.jimuName)
+			)
+			.asMutable({ deep: true })
+		// Save the selected fields to widget json.
+		props.onSettingChange({
+			id: props.id,
+			useDataSources: [useDataSource]
+		})
+	}
+
+	const onDataSourceChange = (useDataSources: UseDataSource[]) => {
+		props.onSettingChange({
+			id: props.id,
+			useDataSources: useDataSources
+		})
+	}
+
+	const onIconChange = (icon) => {
+		props.onSettingChange({
+			id: props.id,
+			config: {
+				icon: icon
+			}
+		})
+	}
+	return (
+		<div className="view-layers-toggle-setting">
+			<SettingSection
+				title={props.intl.formatMessage({
+					id: "selectedMapLabel",
+					defaultMessage: defaultI18nMessages.selectedMap
+				})}
+			>
+				<SettingRow>
+					<IconPicker
+						icon={props.config?.icon as any}
+						onChange={onIconChange}
+					/>
+				</SettingRow>
+				<SettingRow>
+					<MapWidgetSelector
+						onSelect={onMapSelected}
+						useMapWidgetIds={props.useMapWidgetIds}
+					/>
+				</SettingRow>
+				<SettingRow>
+					<DataSourceSelector
+						types={Immutable([DataSourceTypes.FeatureLayer])}
+						mustUseDataSource={true}
+						useDataSources={props.useDataSources}
+						useDataSourcesEnabled={props.useDataSourcesEnabled}
+						onChange={onDataSourceChange}
+						widgetId={props.id}
+					/>
+				</SettingRow>
+				<SettingRow>
+					<FieldSelector
+						useDataSources={props.useDataSources}
+						useDropdown={true}
+						isMultiple={false}
+						isDataSourceDropDownHidden={true}
+						onChange={onFieldsChange}
+						selectedFields={props.useDataSources?.[0].fields}
+					/>
+				</SettingRow>
+			</SettingSection>
+		</div>
+	)
+}

package/src/setting/translations/default.ts

@@ -0,0 +1,4 @@
+export default {
+  selectedMap: 'Choose Data Source',
+  layers: 'Layers'
+}