How do I “publish” the videos oI have uploaded to the cms to my website so they are live?
Let’s say, your uploaded videos are now in your CMS.
Did you already used a REPEATER or similar (GALLARY) elements + a DATASET to connect to your CMS???
What is your website? Where we can take a look on ?
1 Like
Thank you very much! its a website that you would have to have login in access to. I usually am not the one who does the back end work on the site and the developer is across seas somwhere 
I am sure there is a dataset to connect from the cms to the website… there are old videos I am trying to update
I added them into the cms I just don’t know how to make it live….. on the site
Already tried just to update (publish) your website, after having changed the videos inside the CMS ?
1 Like
I guess I don’t know how to do that… usually when I am in the cms it uploads it automatically but the videos didn’t when I added the new ones in
If you need a quock fix, you can invite me to your project, so i can manage your issue quickly and directly. Or you first try to publish your website. This for you go to your Wix-Editor or Wix-Studio. You will find the PUBLISH button on the very right upper corner.
1 Like
I appreciate it. I will try and hit the publish button. Next to the videos I uploaded (see first screeshot above) there is a link which is tied to the old video. do I delete that link before I hit publish?
yes
to the previous videos not the updated ones… is that why it won’t show me the updated videos?
Yes, possible!
Try to update one of them to the new URL!
Find the folder of the uploaded videos.
Choose one of the videos and click onto the 3-dot menu.
Then copy the URL of video.
Paste that url directly into a browser-window and check the video.
Now paste that copied URL to the corresponding video (to the → Video URL ← datafield) and save. Check if something changed.
1 Like
ok thanks trying that now one sec!
you saved the day! Thanks soooooo much for your help!!!
genuinely it means the world!!
1 Like
How do I give you +rep on here? anyway to do that within this site
You already did!
Just click the like buttons and the SOLUTION confirmation and it’s ok 
I didn’t do anything wild ..
Wild things looks different, something like …
import { MENU_OPTIONS_DATA } from './menu-data.js';
// === Inject Styles Once ===
(function injectStyles() {
const styleId = 'cls-temperature-settings-style';
if (document.getElementById(styleId)) return;
const style = document.createElement('style');
style.id = styleId;
style.textContent = `
.save-status {
position: fixed;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(-100%);
padding: 12px 20px;
border-radius: 6px;
font-size: var(--font-size-small);
font-weight: bold;
z-index: 9999;
opacity: 0;
max-width: 400px;
max-height: 150px;
width: 100%;
text-align: center;
box-shadow: 0 4px 12px rgba(0,0,0,0.15);
transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.save-status.show {
opacity: 1;
transform: translateX(-50%) translateY(70px);
}
.save-status.success {
background-color: #d4edda;
color: #155724;
border: 1px solid #c3e6cb;
}
.save-status.error {
background-color: #f8d7da;
color: #721c24;
border: 1px solid #f5c6cb;
}
.save-status.warning {
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeaa7;
}
.save-status.info {
background-color: #d1ecf1;
color: #0c5460;
border: 1px solid #bee5eb;
}
.cls-BUTTON.disabled {
opacity: 0.5;
cursor: not-allowed;
}
.div_current {
display: flex;
align-items: center;
gap: var(--gap-xs);
}
.div_current.hidden {
display: none;
}
`;
document.head.appendChild(style);
})();
export class cls_TempManager {
static STORAGE_KEYS = {
DATA: 'tempData_',
COLLAPSE: 'tempCollapse_',
AXIS_SWAP: 'tempAxisSwap_',
UNITS: 'tempUnits_',
CROSSHAIR: 'tempCrosshair_'
};
static DEFAULTS = {
temperatureZones: 1,
heads: 1,
extruders: 1,
hotRunners: 0,
klanges: 0
};
static COMPONENTS = [
{ key: 'temperatureZones', label: 'Zones', singular: 'Zone', icon: 'fas fa-thermometer-half' },
{ key: 'heads', label: 'Heads', singular: 'Head', icon: 'fas fa-print' },
{ key: 'extruders', label: 'Extruders', singular: 'Extruder', icon: 'fas fa-fire' },
{ key: 'hotRunners', label: 'Hot Runners', singular: 'Hot Runner', icon: 'fas fa-burn' },
{ key: 'klanges', label: 'Klanges', singular: 'Klange', icon: 'fas fa-circle-notch' }
];
// --- PRIVATE FIELDS ---
#resizeObserver = null;
#cachedComponentKeys = null;
#cachedTableHeader = null;
#eventListeners = new Map();
#cellCache = new Map();
#lastRenderedState = null;
#lastThrottleTimes = new Map();
// Context & State
entryId = null;
entryIndex = null;
saveCallback = null;
statusCallback = null;
syncCallback = null;
menuData = '';
isContentCollapsed = false;
isAxisSwapped = false;
isCelsius = true;
isSyncing = false;
isTableControlsVisible = true;
isCrosshairEnabled = false;
pendingActionCallback = null;
contextMenuCell = null;
selectedCells = new Set();
isStickyEnabled = true;
cachedDom = {};
containerElement = null;
modalOverlay = null;
data = {};
// Managers
commentManager = null;
toleranceManager = null;
radialMenu = null;
sseManager = null;
// SSE State (reactive only)
isSseActive = false;
isConnecting = false;
// --- Constructor ---
constructor(context) {
if (!this.#validateContext(context)) throw new Error('Invalid context');
Object.assign(this, {
entryId: context.entryId,
entryIndex: context.entryIndex,
saveCallback: context.onSave,
statusCallback: context.onStatus,
syncCallback: context.onSync,
menuData: JSON.stringify(context.menuData || {}),
isContentCollapsed: false,
isAxisSwapped: false,
isCelsius: true,
isSyncing: false,
isTableControlsVisible: true,
isCrosshairEnabled: false,
pendingActionCallback: null,
contextMenuCell: null,
selectedCells: new Set(),
isStickyEnabled: true,
cachedDom: {},
isSseActive: false,
isConnecting: false
});
this.data = {};
this.#initialize();
}
// --- PRIVATE METHODS ---
#validateContext = (context) => ['entryId', 'entryIndex', 'onSave', 'onStatus', 'onSync'].every(prop => context?.[prop] !== undefined);
#initialize() {
this.#initData();
this.#initDom();
this.#initManagers();
this.#bindEvents();
this.updateUI();
this.#persistData();
this.#registerInstance();
this.#handleError(`Temperature Manager for Entry ${this.entryIndex + 1} initialized`, 'success');
}
#initData(initialData = {}) {
const storedData = this.#loadStoredData() || {};
const getDefault = (key) => storedData?.[key] ?? initialData?.[key] ?? cls_TempManager.DEFAULTS[key];
this.data = {
temperatureZones: getDefault('temperatureZones'),
heads: getDefault('heads'),
extruders: getDefault('extruders'),
hotRunners: getDefault('hotRunners'),
klanges: getDefault('klanges'),
temperatures: {},
currentTemperatures: {},
comments: storedData?.comments || initialData.comments || {},
tolerances: {}
};
this.#getComponentKeys().forEach(key => {
['temperatures', 'currentTemperatures', 'tolerances'].forEach(type => {
let sourceData = storedData?.[type]?.[key] || initialData?.[type]?.[key];
if (!Array.isArray(sourceData)) {
sourceData = Array(this.data.temperatureZones).fill().map(() => Array(this.data[key] || 0).fill(null));
}
this.data[type][key] = this.#deepClone(sourceData).map(row =>
Array.isArray(row) ? row : Array(this.data[key] || 0).fill(null)
);
});
});
this.#loadUIState();
this.#ensureDataIntegrity();
}
#loadStoredData() {
try {
const raw = localStorage.getItem(`${cls_TempManager.STORAGE_KEYS.DATA}${this.entryId}`);
return raw ? JSON.parse(window.LZString ? LZString.decompress(raw) : raw) : null;
} catch (error) {
this.#handleError(`Failed to load stored data: ${error.message}`);
return null;
}
}
#persistData() {
try {
const data = JSON.stringify(this.getData());
localStorage.setItem(`${cls_TempManager.STORAGE_KEYS.DATA}${this.entryId}`, window.LZString ? LZString.compress(data) : data);
} catch (error) {
this.#handleError(`Failed to persist data: ${error.message}`);
}
}
#ensureDataIntegrity() {
const zones = this.data.temperatureZones;
const componentKeys = this.#getComponentKeys();
const validKeys = new Set();
componentKeys.forEach(key => {
const count = this.data[key] || 0;
['temperatures', 'currentTemperatures', 'tolerances'].forEach(type => {
let arr = this.data[type][key];
if (!Array.isArray(arr)) arr = this.data[type][key] = [];
while (arr.length < zones) arr.push(Array(count).fill(null));
while (arr.length > zones) arr.pop();
arr.forEach((row, idx) => {
if (!Array.isArray(row)) arr[idx] = Array(count).fill(null);
while (arr[idx].length < count) arr[idx].push(null);
while (arr[idx].length > count) arr[idx].pop();
});
});
for (let z = 0; z < zones; z++) {
for (let c = 0; c < count; c++) {
validKeys.add(`${key}-${c}-${z}`);
}
}
});
Object.keys(this.data.comments).forEach(key => {
if (!validKeys.has(key)) delete this.data.comments[key];
});
}
#initDom() {
this.containerElement = Object.assign(document.createElement('div'), {
id: `div_tempManager-${this.entryId}`,
className: 'section cls-SECTION'
});
this.#renderStructure();
this.#cacheDom();
}
#renderStructure() {
const contentArea = Object.assign(document.createElement('div'), { className: 'temperature-content-area' });
const tableContainer = Object.assign(document.createElement('div'), { className: 'table-container' });
tableContainer.appendChild(contentArea);
const controlsHtml = `
<button class="cls-BUTTON" id="btn_ResetTemperatures" aria-label="Reset all table data"><i class="fas fa-undo"></i></button>
<button class="cls-BUTTON" id="btn_Controls" aria-label="Toggle table controls"><i class="fas fa-eye"></i></button>
<button class="cls-BUTTON" id="btn_Options" aria-label="Open options menu"><i class="fas fa-ellipsis-h"></i></button>
<button class="cls-BUTTON" id="btn_Chevron" role="button" aria-expanded="${!this.isContentCollapsed}" aria-label="Toggle content">
<i class="fas fa-chevron-down chevron ${this.isContentCollapsed ? 'rotated' : ''}"></i>
</button>
`;
this.containerElement.innerHTML = `
<div class="section-title cls-SECTION-HEADER">
<div class="section-header-icon"><i class="fas fa-thermometer-half"></i></div>
<div class="section-header-title"><h3>Temperature Settings: Entry ${this.entryIndex + 1}</h3></div>
<div class="section-header-main">
${this.#createControls(['temperatureZones'])}
${this.#createControls(this.#getComponentKeys())}
</div>
<div class="section-header-controls" id="controls_${this.entryId}">
${controlsHtml}
</div>
</div>
<div class="temperature-collapsible-content cls-SECTION-CONTENT ${this.isContentCollapsed ? 'collapsed' : ''}">
${tableContainer.outerHTML}
</div>
`;
this.modalOverlay = document.querySelector(`#mdl_Overlay_${this.entryId}`) ||
Object.assign(document.createElement('div'), {
className: 'modal-overlay',
id: `mdl_Overlay_${this.entryId}`,
role: 'dialog',
'aria-modal': 'true'
});
this.modalOverlay.innerHTML = `
<div class="modal-content">
<div class="modal-header">
<i class="fas fa-thermometer-half"></i>
<h3 class="modal-title">Confirm Action</h3>
</div>
<p class="modal-message"></p>
<input type="number" class="inp-temp-target" id="inp_ModalNumber_${this.entryId}" style="display: none;" aria-label="Temperature input">
<div class="modal-buttons">
<button class="cls-BUTTON" id="btn_modalConfirm_${this.entryId}" data-type="confirm">Confirm</button>
<button class="cls-BUTTON" id="btn_modalCancel_${this.entryId}" data-type="cancel">Cancel</button>
</div>
</div>
`;
document.body.appendChild(this.modalOverlay);
}
#cacheDom() {
const querySafe = (sel, context = this.containerElement) => {
try {
return context.querySelector(sel) || document.querySelector(sel) || null;
} catch (error) {
this.#handleError(`Failed to query selector ${sel}: ${error.message}`);
return null;
}
};
this.cachedDom = {
collapsibleContentElement: querySafe('.temperature-collapsible-content'),
sec_title: querySafe('.section-title'),
btn_Chevron: querySafe('#btn_Chevron'),
btn_Controls: querySafe('#btn_Controls'),
btn_Options: querySafe('#btn_Options'),
btn_ResetTemperatures: querySafe('#btn_ResetTemperatures'),
confirmModal: querySafe(`#mdl_Overlay_${this.entryId}`, document),
confirmModalMessage: querySafe('.modal-message', this.modalOverlay),
btn_modalConfirm: querySafe(`#btn_modalConfirm_${this.entryId}`, document),
btn_modalCancel: querySafe(`#btn_modalCancel_${this.entryId}`, document),
modalInput: querySafe(`#inp_ModalNumber_${this.entryId}`, document),
contentArea: querySafe('.temperature-content-area') ||
Object.assign(document.createElement('div'), { className: 'temperature-content-area' })
};
if (!this.containerElement.contains(this.cachedDom.contentArea)) {
const tableContainer = querySafe('.table-container');
if (tableContainer) tableContainer.appendChild(this.cachedDom.contentArea);
else this.#handleError('Table container not found during DOM caching', 'warning');
}
}
#initManagers() {
this.#initPlugin('commentManager', {
containerElement: this.containerElement,
onStatus: this.#handleError.bind(this),
parentData: this.data,
onUpdate: this.refreshTable.bind(this)
});
this.#initPlugin('toleranceManager', {
entryId: this.entryId,
entryIndex: this.entryIndex,
containerElement: this.cachedDom.contentArea,
initialData: this.getToleranceData(),
onSave: (data) => {
this.data.tolerances = data.tolerances;
this.#saveState();
},
onStatus: this.#handleError.bind(this),
onSync: this.syncCallback
});
this.#initRadialMenu();
this.#initSSE();
this.#initStickyHeaders();
}
#initPlugin(name, config) {
const PluginClass = window.bbmPluginRegistry?.find(p => p.name === name)?.classRef;
if (PluginClass) {
this[name] = new PluginClass(config);
this.#handleError(`${name} initialized successfully`, 'info');
} else {
this.#handleError(`${name} not found`, 'warning');
}
}
#initRadialMenu() {
if (typeof RadialMenu === 'undefined') return this.#handleError('RadialMenu not found', 'warning');
this.radialMenu = new RadialMenu(
{ entryId: this.entryId, contextMenuCell: this.contextMenuCell },
{
instanceId: `radial-menu-${this.entryId}`,
actions: {
reset: () => this.fnc_resetTemperatures(),
fnc_crosshair: () => this.fnc_crosshair(),
fnc_controls_table: () => this.fnc_controls_table(),
fnc_transpose: () => this.fnc_transpose(),
fnc_tempUnits: () => this.fnc_tempUnits(),
import: () => this.fnc_importData(),
export: () => this.fnc_exportData(),
addComment: () => this.commentManager?.handleCommentClick?.({ cellElement: this.contextMenuCell })
}
}
);
this.radialMenu.renderMenuFromJSON(this.menuData);
}
#initSSE() {
const plugin = window.bbmPluginRegistry?.find(p => p.name === 'sseManager');
if (!plugin) {
this.#handleError('SSEManager not available — real-time updates disabled.', 'info');
return;
}
const SSEClass = plugin.classRef;
this.sseManager = new SSEClass({
onStatus: (msg, type) => this.#handleError(msg, type),
parentData: this.data,
onUpdate: (newData) => {
// Merge current temps
Object.assign(this.data.currentTemperatures, newData.currentTemperatures || {});
this.#updateLiveTemperatures(newData.currentTemperatures);
},
sseUrl: '/temperatures/stream',
reconnectInterval: 3000,
maxRetries: 5,
onStateChange: ({ isActive, isConnecting }) => {
this.isSseActive = isActive;
this.isConnecting = isConnecting;
this.#updateControls();
this.#updateCurrentTempVisibility();
},
onSseStart: () => {
this.#handleError('Connected to real-time temperature updates.', 'success');
},
onSseStop: () => {
this.#handleError('Disconnected from real-time updates.', 'info');
}
});
// Inject SSE button into header
const controlsDiv = this.containerElement.querySelector(`#controls_${this.entryId}`);
const sseButton = this.sseManager.getControlButton(() => this.sseManager.toggleSse());
if (controlsDiv && sseButton) {
controlsDiv.insertBefore(sseButton, controlsDiv.children[3]); // Insert before btn_Options
}
}
#initStickyHeaders() {
if (!this.isStickyEnabled || !this.cachedDom.contentArea) {
this.#handleError('Sticky headers disabled or content area not found', 'warning');
return;
}
const tableWrapper = this.cachedDom.contentArea.querySelector('.table-wrapper');
if (!tableWrapper) {
this.#handleError('Table wrapper not found for sticky headers', 'warning');
return;
}
if (typeof ResizeObserver !== 'undefined') {
if (this.#resizeObserver) this.#resizeObserver.disconnect();
this.#resizeObserver = new ResizeObserver(this.#throttle(() => this.#updateStickyWidths(), 100));
this.#resizeObserver.observe(tableWrapper);
} else {
window.addEventListener('resize', this.#throttle(() => this.#updateStickyWidths(), 100));
this.#updateStickyWidths();
}
}
#throttle(fn, wait) {
if (typeof fn !== 'function') {
this.#handleError('Throttle called with invalid function', 'error');
return () => {};
}
return function (...args) {
const now = Date.now();
const lastCall = this.#lastThrottleTimes.get(fn) || 0;
if (now - lastCall >= wait) {
this.#lastThrottleTimes.set(fn, now);
return fn.apply(this, args);
}
}.bind(this);
}
#updateStickyWidths() {
if (!this.cachedDom.contentArea || this.isContentCollapsed) return;
const table = this.cachedDom.contentArea.querySelector('.table');
if (!table) return;
const headers = table.querySelectorAll('th');
headers.forEach(header => {
if (header.offsetParent === null) return;
const rect = header.getBoundingClientRect();
header.style.minWidth = `${rect.width}px`;
header.style.width = `${rect.width}px`;
});
}
#bindEvents() {
this.#eventListeners.forEach(({ element, type, handler }) => {
element.removeEventListener(type, handler);
});
this.#eventListeners.clear();
const events = {
btn_Chevron: ['click', () => this.toggleContent(!this.isContentCollapsed)],
btn_Controls: ['click', () => this.fnc_controls_table()],
btn_Options: ['click', () => this.#showOptions()],
btn_ResetTemperatures: ['click', () => this.fnc_resetTemperatures()],
btn_modalConfirm: ['click', () => this.#handleModalConfirm()],
btn_modalCancel: ['click', () => this.#handleModalCancel()],
confirmModal: ['click', (e) => e.target === this.cachedDom.confirmModal && this.#handleModalCancel()],
containerElement: ['click', (e) => this.#handleContainerClick(e)],
contentArea: [
['click', (e) => this.#handleTableClick(e)],
['change', (e) => this.#handleTableChange(e)],
['contextmenu', (e) => this.#handleTableContextMenu(e)],
['mouseover', this.#throttle((e) => this.isCrosshairEnabled && this.#handleTableMouseOver(e), 100)],
['keydown', (e) => this.#handleTableKeydown(e)]
]
};
Object.entries(events).forEach(([key, handlers]) => {
const el = this.cachedDom[key] || this[key];
if (!el || typeof el.addEventListener !== 'function') {
this.#handleError(`Element ${key} is not a valid EventTarget`, 'warning');
return;
}
const handlerList = Array.isArray(handlers[0]) ? handlers : [handlers];
handlerList.forEach(([type, fn], index) => {
if (typeof fn !== 'function') {
this.#handleError(`Invalid event handler for ${key} event ${type} at index ${index}`, 'warning');
return;
}
try {
el.addEventListener(type, fn);
this.#eventListeners.set(`${key}-${type}-${index}`, { element: el, type, handler: fn });
} catch (error) {
this.#handleError(`Failed to bind ${type} event to ${key}: ${error.message}`, 'error');
}
});
});
}
#renderContent() {
if (!this.cachedDom.contentArea || this.isContentCollapsed) {
this.cachedDom.contentArea.innerHTML = '';
return;
}
this.#ensureDataIntegrity();
const hasComponents = this.#getComponentKeys().some(key => this.data[key] > 0);
const fragment = document.createDocumentFragment();
const wrapper = document.createElement('div');
wrapper.className = 'table-wrapper';
wrapper.style.overflow = 'auto';
wrapper.innerHTML = hasComponents && this.data.temperatureZones > 0 ?
(this.isAxisSwapped ? this.#generateSwappedTable() : this.#generateTable()) :
`<div class="empty-table-message" style="color: var(--font-color-muted); background-color: var(--bgc-section); font-size: var(--font-size-label); text-align: center; padding: var(--spacing-md);">
<i class="fas fa-info-circle" style="margin-right: var(--gap-xs);"></i>No components or zones defined. Add components (e.g., Extruders, Heads, Hot Runners, Klanges) or Zones to start configuring temperatures.
</div>`;
fragment.appendChild(wrapper);
requestAnimationFrame(() => {
const oldTable = this.cachedDom.contentArea.querySelector('.table-wrapper');
this.cachedDom.contentArea.replaceChildren(fragment);
if (oldTable) oldTable.remove();
this.#updateControlsVisibility();
this.#initStickyHeaders();
this.#cacheCells();
this.#updateTableButtons();
this.#updateCurrentTempVisibility();
});
}
..more code...
Now you can help me out xDDDDDDDD
Ohhh, even not possible to show the code xDDDDDD
1 Like
ok thank you again! Have a great day! 
Good luck!
Now you know how to update urls.