Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wrapping up for the night. This can now copy the iframe src link.

Browse Source
This commit is contained in:
Scott Idem
2025-12-16 21:51:29 -05:00
parent 0b64d33a72
commit a8314a5da0
3 changed files with 36 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
GEMINI.md
View File

@@ -201,4 +201,15 @@ The activity logging functionality is now working as expected. While the origina
* **Solution:** The fix was to edit `src/lib/ae_api/api_get__crud_obj_li_v2.ts` and add `'activity_log': '/crud/activity_log/list'` to the map. This is a reminder that generic helpers need to be explicitly updated to support new object types.
2. **`data.url is undefined` TypeError:** This error occurred inside an asynchronous Jitsi event handler when trying to access `data.url.origin`.
* **Root Cause:** The `data` prop, passed from SvelteKit's `load` function, is not reliably scoped or available inside asynchronous callbacks fired by external, third-party libraries.
* **Solution:** The robust solution is to use SvelteKit's dedicated `$page` store. By importing `import { page } from '$app/stores';` and using `$page.url`, we can reliably access the current URL information from anywhere in the component, including async callbacks.
* **Solution:** The robust solution is to use SvelteKit's dedicated `$page` store. By importing `import { page } from '$app/stores';` and using `$page.url`, we can reliably access the current URL information from anywhere in the component, including async callbacks.
### Jitsi Break-out Link (2025-12-16)
**Context:** Added a feature to provide a "break out" link for Jitsi meetings, allowing users to open the current meeting outside of the Novi iframe context.
**Implementation:**
* **Component:** The `MyClipboard` component (`$lib/app_components/e_app_clipboard.svelte`) was imported into `src/routes/idaa/(idaa)/video_conferences/+page.svelte`.
* **Placement:** The `MyClipboard` component was added to the Jitsi tools section within the `+page.svelte` file.
* **Functionality:** The component is configured to copy the full URL of the current page (`$page.url.href`) to the clipboard, encoded for safety.
* **Styling:** Tailwind CSS classes (`mt-2 px-2 py-1 bg-indigo-400 text-white rounded hover:bg-indigo-500`) were applied to the button for visual consistency with other elements in the tools panel.
* **Layout:** The container `div` for the buttons was updated with `flex-wrap` to ensure proper layout if multiple buttons are present.

10
src/routes/idaa/(idaa)/video_conferences/+page.svelte
View File

@@ -2,6 +2,7 @@
import { onMount, onDestroy } from 'svelte';
import { page } from '$app/stores';
import { ae_loc, ae_api } from '$lib/stores/ae_stores';
import MyClipboard from '$lib/app_components/e_app_clipboard.svelte';
import { create_ae_obj__activity_log, update_ae_obj__activity_log } from '$lib/ae_core/core__activity_log';
let log_lvl: number = $state(0);
@@ -815,9 +816,16 @@
</div>
<div class="
flex flex-col sm:flex-row gap-1 items-center justify-center w-full
flex flex-col sm:flex-row flex-wrap gap-1 items-center justify-center w-full
mt-2 pt-2 border-t-2 border-dashed border-gray-400">
<MyClipboard
value={encodeURI($page.url.href)}
btn_text="Copy Break-out Link"
btn_title="Copy a link to this meeting that can be opened outside of the Novi iframe."
btn_class="mt-2 px-2 py-1 bg-indigo-400 text-white rounded hover:bg-indigo-500"
></MyClipboard>
<button
class="mt-2 px-2 py-1 bg-orange-200 text-white rounded hover:bg-orange-400"
onclick={() => init_jitsi()}

26
static/idaa_novi_iframe_jitsi_meeting.html
View File

@@ -7,9 +7,10 @@
</head>
<body>
<!-- START: Copy below this point -->
<!-- IMPORTANT: This <script> element and <p> element below are for using in an iframe in the IDAA Nov site. One Sky IT's Jitsi meeting iframe -->
<!-- README: This is an example template page for embedding a Jitsi meeting iframe in the IDAA Novi site. Copy the code below to use it in your own page(s). -->
<!-- START: Copy below this point -->
<!-- IMPORTANT: The <p> and <script> elements below are for using in an iframe in the IDAA Novi site. -->
<!-- IDAA OSIT iframe container element for Novi - Jitsi Meeting iframe -->
<p>
<iframe
@@ -23,23 +24,27 @@
allowfullscreen
></iframe>
</p>
<!-- IDAA and Novi specific JavaScript to get current Novi user info and load Jitsi iframe -->
<script>
let novi_customer_uid = '<%=Novi.User.CustomerUniqueId%>'; // NOTE: The Novi UUID for the current current user/customer
console.log(`Novi's Current User's ID: ${novi_customer_uid}`);
let room_name = 'IDAA-Example-Meeting'; // 'IDAA-Student-and-Resident-Meeting'; 'IDAA-Meeting';
// NOTE: Change the room_name value to the desired Jitsi room name for the meeting.
let room_name = 'IDAA-Example-Meeting'; // // NOTE: Change this example meeting room name
// Example meeting room names: 'IDAA-Meeting' 'IDAA-Student-and-Resident-Meeting'
// let novi_group_id = ''; // Not in use yet
// let novi_category_id = ''; // Not in use yet
// Do *not* use relative paths here. They must be direct to the site I am hosting for IDAA.
// 'https://sk-idaa.oneskyit.com/idaa/video_conferences' OR 'https://dev-idaa.oneskyit.com/idaa/video_conferences' OR 'http://idaa.localhost:5173/idaa/video_conferences' OR 'https://static.oneskyit.com/c/DgrZone/jitsi_iframe_api_testing.html'
// WARNING:Do *not* use relative paths here. They must be direct to the site OSIT is hosting for IDAA. This value must point to the Svelte Jitsi page.
let idaa_osit_ae_api_root_url =
'https://dev-idaa.oneskyit.com/idaa/video_conferences'; // DO NOT CHANGE THIS VALUE; Point to the Svelte Jitsi page
let idaa_osit_ae_site_key = 'restricted-access'; // DO NOT CHANGE THIS VALUE; '8VTOJ0X5hvT6JdiTJsGEzQ' OR 'restricted-access' OR 'restricted'
let idaa_ae_params = new URLSearchParams(document.location.search);
// let idaa_ae_slct_event_id = idaa_ae_params.get('event_id');
'https://dev-idaa.oneskyit.com/idaa/video_conferences'; // NOTE: DO NOT CHANGE THIS VALUE
// Example URLs: 'https://sk-idaa.oneskyit.com/idaa/video_conferences' OR 'https://dev-idaa.oneskyit.com/idaa/video_conferences' OR 'http://idaa.localhost:5173/idaa/video_conferences
// WARNING: Do *not* change this value. It is required for access control to the IDAA AE API.
let idaa_osit_ae_site_key = 'restricted-access'; // DO NOT CHANGE THIS VALUE
// Example site keys: '8VTOJ0X5hvT6JdiTJsGEzQ' OR 'restricted-access' OR 'restricted'
let idaa_ae_params = new URLSearchParams(document.location.search);
let idaa_ae_iframe_element = document.getElementById(
'ae_idaa_jitsi_meeting_iframe'
);
@@ -49,7 +54,6 @@
;
</script>
<!-- STOP: Do not copy below this point -->
</body>