feat: add switch to disable overlays layers update

twirapp · Sep 16, 2023 · 6572685 · 6572685
1 parent 25da0c8
commit 6572685
Show file tree

Hide file tree

Showing 10 changed files with 72 additions and 36 deletions.
diff --git a/apps/api/internal/impl_protected/overlays/overlays.go b/apps/api/internal/impl_protected/overlays/overlays.go
@@ -92,13 +92,14 @@ func (c *Overlays) convertEntity(entity model.ChannelOverlay) *overlays.Overlay
 				HtmlOverlayJs:                          base64ToText(l.Settings.HtmlOverlayJS),
 				HtmlOverlayHtmlDataPollSecondsInterval: int32(l.Settings.HtmlOverlayDataPollSecondsInterval),
 			},
-			OverlayId: id,
-			PosX:      int32(l.PosX),
-			PosY:      int32(l.PosY),
-			Width:     int32(l.Width),
-			Height:    int32(l.Height),
-			CreatedAt: fmt.Sprint(l.CreatedAt.UnixMilli()),
-			UpdatedAt: fmt.Sprint(l.UpdatedAt.UnixMilli()),
+			OverlayId:               id,
+			PosX:                    int32(l.PosX),
+			PosY:                    int32(l.PosY),
+			Width:                   int32(l.Width),
+			Height:                  int32(l.Height),
+			CreatedAt:               fmt.Sprint(l.CreatedAt.UnixMilli()),
+			UpdatedAt:               fmt.Sprint(l.UpdatedAt.UnixMilli()),
+			PeriodicallyRefetchData: l.PeriodicallyRefetchData,
 		}
 	}
 
@@ -214,11 +215,12 @@ func (c *Overlays) OverlaysUpdate(ctx context.Context, req *overlays.UpdateReque
 						HtmlOverlayJS:                      textToBase64(l.Settings.HtmlOverlayJs),
 						HtmlOverlayDataPollSecondsInterval: int(l.Settings.HtmlOverlayHtmlDataPollSecondsInterval),
 					},
-					OverlayID: entity.ID,
-					PosX:      int(l.PosX),
-					PosY:      int(l.PosY),
-					Width:     int(l.Width),
-					Height:    int(l.Height),
+					OverlayID:               entity.ID,
+					PosX:                    int(l.PosX),
+					PosY:                    int(l.PosY),
+					Width:                   int(l.Width),
+					Height:                  int(l.Height),
+					PeriodicallyRefetchData: l.PeriodicallyRefetchData,
 				}
 
 				if err := tx.Save(&layer).Error; err != nil {
@@ -297,11 +299,12 @@ func (c *Overlays) OverlaysCreate(ctx context.Context, req *overlays.CreateReque
 						HtmlOverlayJS:                      textToBase64(l.Settings.HtmlOverlayJs),
 						HtmlOverlayDataPollSecondsInterval: int(l.Settings.HtmlOverlayHtmlDataPollSecondsInterval),
 					},
-					OverlayID: entity.ID,
-					PosX:      int(l.PosX),
-					PosY:      int(l.PosY),
-					Width:     int(l.Width),
-					Height:    int(l.Height),
+					OverlayID:               entity.ID,
+					PosX:                    int(l.PosX),
+					PosY:                    int(l.PosY),
+					Width:                   int(l.Width),
+					Height:                  int(l.Height),
+					PeriodicallyRefetchData: l.PeriodicallyRefetchData,
 				}
 
 				if err := tx.Save(&layer).Error; err != nil {

diff --git a/frontend/dashboard/src/components/registry/overlays/edit.vue b/frontend/dashboard/src/components/registry/overlays/edit.vue
@@ -157,6 +157,7 @@ const copyUrl = async (id: string) => {
 						:index="index"
 						:text="layer.settings?.htmlOverlayHtml ?? ''"
 						:css="layer.settings?.htmlOverlayCss ?? ''"
+						:periodicallyRefetchData="layer.periodicallyRefetchData"
 					/>
 					<Moveable
 						className="moveable"
@@ -228,6 +229,7 @@ const copyUrl = async (id: string) => {
 						v-model:html="formValue.layers[index].settings!.htmlOverlayHtml"
 						v-model:css="formValue.layers[index].settings!.htmlOverlayCss"
 						v-model:pollInterval="formValue.layers[index].settings!.htmlOverlayHtmlDataPollSecondsInterval"
+						v-model:periodicallyRefetchData="formValue.layers[index].periodicallyRefetchData"
 						:isFocused="currentlyFocused === index"
 						:layerIndex="index"
 						:type="layer.type"

diff --git a/frontend/dashboard/src/components/registry/overlays/layers/html.vue b/frontend/dashboard/src/components/registry/overlays/layers/html.vue
@@ -1,7 +1,8 @@
+<!-- eslint-disable vue/no-v-html -->
 <!-- eslint-disable no-undef -->
 <script setup lang="ts">
 import { useIntervalFn } from '@vueuse/core';
-import { ref } from 'vue';
+import { ref, watch } from 'vue';
 
 import { useOverlaysParseHtml } from '@/api/registry';
 
@@ -13,16 +14,24 @@ const props = defineProps<{
 	height: number;
 	text: string;
 	css: string;
+	periodicallyRefetchData: boolean,
 }>();
 
 const fetcher = useOverlaysParseHtml();
 
 const exampleValue = ref('');
 
-useIntervalFn(async () => {
+const { pause, resume } = useIntervalFn(async () => {
 	const data = await fetcher.mutateAsync(props.text ?? '');
 	exampleValue.value = data ?? '';
-}, 1000, { immediate: true });
+}, 1000, { immediate: true, immediateCallback: true });
+
+watch(props, (p) => {
+	const v = p.periodicallyRefetchData;
+
+	if (!v) pause();
+	else resume();
+}, { immediate: true });
 </script>
 
 <template>

diff --git a/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue b/frontend/dashboard/src/components/registry/overlays/layers/htmlForm.vue
@@ -1,6 +1,6 @@
 <!-- eslint-disable no-undef -->
 <script lang="ts" setup>
-import { NModal, NInputNumber, NFormItem, NAlert, NSelect, useMessage } from 'naive-ui';
+import { NModal, NInputNumber, NFormItem, NAlert, NSelect, useMessage, NSwitch } from 'naive-ui';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
@@ -19,6 +19,7 @@ defineEmits<{
 const html = defineModel('html');
 const css = defineModel('css');
 const pollInterval = defineModel('pollInterval', { default: 5 });
+const periodicallyRefetchData = defineModel('periodicallyRefetchData');
 
 const showModal = ref(false);
 
@@ -82,6 +83,10 @@ const { t } = useI18n();
 		style="width: 50vw"
 	>
 		<div style="display: flex; flex-direction: column; gap: 20px">
+			<n-form-item :label="t('overlaysRegistry.html.periodicallyRefetchData')">
+				<n-switch v-model:value="periodicallyRefetchData" />
+			</n-form-item>
+
 			<n-form-item :label="t('overlaysRegistry.html.updateInterval')">
 				<n-input-number v-model:value="pollInterval" :min="5" :max="300" />
 			</n-form-item>

diff --git a/frontend/dashboard/src/components/registry/overlays/newSelector.vue b/frontend/dashboard/src/components/registry/overlays/newSelector.vue
@@ -34,7 +34,8 @@ const { t } = useI18n();
 						createdAt: '',
 						overlayId: '',
 						type: OverlayLayerType.HTML,
-						updatedAt: ''
+						updatedAt: '',
+						periodicallyRefetchData: true,
 					})
 				}"
 			>

diff --git a/frontend/dashboard/src/locales/en.json b/frontend/dashboard/src/locales/en.json
@@ -493,7 +493,8 @@
 			"variablesAlert": {
 				"title": "You can use some variables in html, click the button for show available options",
 				"selectToCopy": "Select variable, to copy it to clipboard"
-			}
+			},
+			"periodicallyRefetchData": "Periodically parse html data from server"
 		}
 	}
 }
diff --git a/frontend/overlays/src/pages/overlaysRegistry.tsx b/frontend/overlays/src/pages/overlaysRegistry.tsx
@@ -20,6 +20,7 @@ interface Layer {
 	createdAt: string
 	updatedAt: string
 	overlay: any
+	periodically_refetch_data: boolean;
 
 	htmlContent?: string;
 }
@@ -79,7 +80,7 @@ export const OverlaysRegistry: React.FC = () => {
 				setLayers(parsedData.layers);
 				for (const layer of parsedData.layers) {
 					if (layer.type === 'HTML') {
-						pollHtmlOverlayData(layer as Layer);
+						preparePollHtmlOverlayData(layer as Layer);
 					}
 				}
 			}
@@ -107,8 +108,7 @@ export const OverlaysRegistry: React.FC = () => {
 		});
 	}, [layers]);
 
-	const pollHtmlOverlayData = useCallback((l: Layer) => {
-		if (l.type !== 'HTML') return;
+	const preparePollHtmlOverlayData = useCallback((l: Layer) => {
 		if (l.settings.htmlOverlayDataPollSecondsInterval <= 0) return;
 
 		const getInfo = () => sendMessage(JSON.stringify({
@@ -119,6 +119,8 @@ export const OverlaysRegistry: React.FC = () => {
 		}));
 		getInfo();
 
+		if (!l.periodically_refetch_data) return;
+
 		const interval = setInterval(() => {
 			getInfo();
 		}, l.settings.htmlOverlayDataPollSecondsInterval * 1000);

diff --git a/libs/gomodels/channel_overlay_layer.go b/libs/gomodels/channel_overlay_layer.go
@@ -10,16 +10,17 @@ import (
 )
 
 type ChannelOverlayLayer struct {
-	ID        uuid.UUID                   `gorm:"primary_key;column:id;type:UUID;"  json:"id"`
-	Type      ChannelOverlayType          `gorm:"column:type;type:TEXT;"  json:"type"`
-	Settings  ChannelOverlayLayerSettings `gorm:"column:settings;type:JSONB;"  json:"settings"`
-	OverlayID uuid.UUID                   `gorm:"column:overlay_id;type:UUID;"  json:"overlay_id"`
-	PosX      int                         `gorm:"column:pos_x;type:INTEGER;"  json:"pos_x"`
-	PosY      int                         `gorm:"column:pos_y;type:INTEGER;"  json:"pos_y"`
-	Width     int                         `gorm:"column:width;type:INTEGER;"  json:"width"`
-	Height    int                         `gorm:"column:height;type:INTEGER;"  json:"height"`
-	CreatedAt time.Time                   `gorm:"column:created_at;data:timestamp;"  json:"createdAt"`
-	UpdatedAt time.Time                   `gorm:"column:updated_at;data:timestamp;"  json:"updatedAt"`
+	ID                      uuid.UUID                   `gorm:"primary_key;column:id;type:UUID;"  json:"id"`
+	Type                    ChannelOverlayType          `gorm:"column:type;type:TEXT;"  json:"type"`
+	Settings                ChannelOverlayLayerSettings `gorm:"column:settings;type:JSONB;"  json:"settings"`
+	OverlayID               uuid.UUID                   `gorm:"column:overlay_id;type:UUID;"  json:"overlay_id"`
+	PosX                    int                         `gorm:"column:pos_x;type:INTEGER;"  json:"pos_x"`
+	PosY                    int                         `gorm:"column:pos_y;type:INTEGER;"  json:"pos_y"`
+	Width                   int                         `gorm:"column:width;type:INTEGER;"  json:"width"`
+	Height                  int                         `gorm:"column:height;type:INTEGER;"  json:"height"`
+	CreatedAt               time.Time                   `gorm:"column:created_at;data:timestamp;"  json:"createdAt"`
+	UpdatedAt               time.Time                   `gorm:"column:updated_at;data:timestamp;"  json:"updatedAt"`
+	PeriodicallyRefetchData bool                        `gorm:"column:periodically_refetch_data;type:BOOLEAN"  json:"periodically_refetch_data"`
 
 	Overlay *ChannelOverlay `gorm:"foreignKey:OverlayID" json:"overlay"`
 }

diff --git a/libs/grpc/protos/api/overlays.proto b/libs/grpc/protos/api/overlays.proto
@@ -24,6 +24,7 @@ message OverlayLayer {
 	int32 height = 8;
 	string createdAt = 9;
 	string updatedAt = 10;
+	bool periodically_refetch_data = 11;
 }
 
 message Overlay {
@@ -56,6 +57,7 @@ message CreateLayer {
 	int32 pos_y = 4;
 	int32 width = 5;
 	int32 height = 6;
+	bool periodically_refetch_data = 7;
 }
 
 message CreateRequest {

diff --git a/libs/migrations/migrations/20230916055208_overlays_boolean_for_periodically_refetch.sql b/libs/migrations/migrations/20230916055208_overlays_boolean_for_periodically_refetch.sql
@@ -0,0 +1,10 @@
+-- +goose Up
+-- +goose StatementBegin
+SELECT 'up SQL query';
+ALTER TABLE "channels_overlays_layers" ADD COLUMN periodically_refetch_data boolean NOT NULL DEFAULT true;
+-- +goose StatementEnd
+
+-- +goose Down
+-- +goose StatementBegin
+SELECT 'down SQL query';
+-- +goose StatementEnd