Firstly thank you so much for responding to my questions. Much appreciated
I tested this out on my end with the Basic Sample App but I didn’t see the same issue. The interval seemed to fire when placed in the public/index.js file.
Can you share a code snippet of your implementation?
Yes the interval fires in the browser. Did you try it on zoom?
My code snippet
const { DateTime } = luxon
const leadingZeros = (value, numberOfLeadingZero = 2) => {
return String(Math.ceil(value)).padStart(numberOfLeadingZero, '0')
}
const stageTimer = document.querySelector('.stage-timer-count-down')
const stageTimerTopDescription = document.querySelector('.stage-count-down p:first-child')
const stageTimerBottomDescription = document.querySelector('.stage-count-down p:last-child')
const startAt = stageTimer.dataset.startat
const endAt = stageTimer.dataset.endat
class StageTimer {
constructor(stageTimer, startAt, endAt) {
this.stageTimer = stageTimer
this.startAt = startAt
this.endAt = endAt
this.timer = null
}
start() {
this.timer = setInterval(() => {
const start = DateTime.fromISO(this.startAt)
const end = DateTime.fromISO(this.endAt)
const diffStartMillis = start.toMillis() - DateTime.now().toMillis()
const diffStartObject = start
.diffNow(['hours', 'minutes', 'seconds', 'milliseconds'])
.toObject()
const diffEnd = end.toMillis() - DateTime.now().toMillis()
const diffEndObject = end.diffNow(['hours', 'minutes', 'seconds', 'milliseconds']).toObject()
if (diffStartMillis > 0) {
stageTimerTopDescription.textContent = 'Starts in'
this.stageTimer.innerHTML = `${leadingZeros(diffStartObject.hours)}:${leadingZeros(
diffStartObject.minutes
)}:${leadingZeros(diffStartObject.seconds)}`
stageTimerBottomDescription.textContent = ''
} else if (diffEnd > 0) {
this.stageTimer.innerHTML = `${leadingZeros(diffEndObject.hours)}:${leadingZeros(
diffEndObject.minutes
)}:${leadingZeros(diffEndObject.seconds)}`
} else {
stageTimerTopDescription.textContent = 'Ended'
this.stageTimer.innerHTML = `${leadingZeros(Math.abs(diffEndObject.hours))}:${leadingZeros(
Math.abs(diffEndObject.minutes)
)}:${leadingZeros(Math.abs(diffEndObject.seconds))}`
stageTimerBottomDescription.textContent = 'ago'
this.end()
}
}, 1000)
}
end() {
clearInterval(this.timer)
}
}
const stageTime = new StageTimer(stageTimer, startAt, endAt)
stageTime.start()
You can use the openUrl() function from the JS SDK for this.
Sorry this is definitely on me as I don’t understand what I am doing wrong. If you can give me pointers that would be great
My code. I can’t see the console on zoom so I just used one of my 2 buttons to show me the error message. The join innerHTML is just to let me know the eventlistener is being called
const btnArea = document.querySelector('.btn-area')
const btn = document.querySelector('.btn-area button')
const btnEdit = document.querySelector('.btn-area button:last-child')
async function configureApp() {
try {
const configResponse = await zoomSdk.config({
version: '0.16',
popoutSize: { width: 480, height: 360 },
capabilities: ['shareApp'],
})
btnEdit.innerHTML = configResponse.clientVersion
} catch (error) {
console.log(error.message)
btnEdit.innerHTML = error.message
}
}
configureApp()
btn.addEventListener('click', async () => {
// window.open(btnArea.dataset.kirlink, '_blank');
btn.innerHTML = 'Join'
await zoomSdk.openUrl({ url: 'https://awesome-zoom-app.com/login' })
// window.location.href = `/redirect?link=${btnArea.dataset.kirlink}`;
})
Error I got on browser read zoom app SDK is not supported by this browser. I am using google chrome by the way
Error on Zoom read Zoom SDK not defined. Why do I get not supported on browser if it is undefined, I don’t get it? I added this script tag to my HTML page
<script src="https://appssdk.zoom.us/sdk.js"></script>
Make sure that you’re also adding that external URL to the Domain Allow List and re-authorizing your app. Here’s an example of how I would set up img-src in the CSP:
The images loads on browser but when I open them on zoom, they don’t load. I added the img-src to CSP. So I thought maybe its my implementation that has issues so I tested it on the Basic Sample App
Heres what I added
directives: {
'default-src': 'self',
styleSrc: ["'self'"],
scriptSrc: ["'self'", 'https://appssdk.zoom.us/sdk.min.js'],
imgSrc: ["'self'", `https://${redirectHost}`, 'https://res.cloudinary.com'],
'connect-src': 'self',
'base-uri': 'self',
'form-action': 'self',
},
added this in view/index.pug
img(src="https://res.cloudinary.com/emmsdan-com/image/upload/v1665687967/simple-line-icons_event_qejnww.svg", alt="dsds")
The icon shows on browser but it doesn’t show on zoom.
I took a lot of screenshots but it seems I am not allowed to post them as a new user. If you can send an email, I would be happy to forward them to you
