feat: added live tab (#923)

Co-authored-by: adeel.tajamul <[email protected]>

src/course-home/data/api.js

@@ -297,6 +297,20 @@ export async function getProctoringInfoData(courseId, username) {
   }
 }
 
+export async function getLiveTabIframe(courseId) {
+  const url = `${getConfig().LMS_BASE_URL}/api/course_live/iframe/${courseId}/`;
+  try {
+    const { data } = await getAuthenticatedHttpClient().get(url);
+    return data;
+  } catch (error) {
+    const { httpErrorStatus } = error && error.customAttributes;
+    if (httpErrorStatus === 404) {
+      return {};
+    }
+    throw error;
+  }
+}
+
 export function getTimeOffsetMillis(headerDate, requestTime, responseTime) {
   // Time offset computation should move down into the HttpClient wrapper to maintain a global time correction reference
   // Requires 'Access-Control-Expose-Headers: Date' on the server response per https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS#access-control-expose-headers

src/course-home/data/thunks.js

@@ -11,6 +11,7 @@ import {
   postWeeklyLearningGoal,
   postDismissWelcomeMessage,
   postRequestCert,
+  getLiveTabIframe,
 } from './api';
 
 import {
@@ -79,6 +80,10 @@ export function fetchOutlineTab(courseId) {
   return fetchTab(courseId, 'outline', getOutlineTabData);
 }
 
+export function fetchLiveTab(courseId) {
+  return fetchTab(courseId, 'live', getLiveTabIframe);
+}
+
 export function fetchDiscussionTab(courseId) {
   return fetchTab(courseId, 'discussion');
 }

src/course-home/live-tab/LiveTab.jsx

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react';
+import { useSelector } from 'react-redux';
+
+function LiveTab() {
+  const { courseId } = useSelector(state => state.courseHome);
+  const liveModel = useSelector(state => state.models.live);
+  useEffect(() => {
+    const iframe = document.getElementById('lti-tab-embed');
+    if (iframe) {
+      iframe.className += ' vh-100 w-100 border-0';
+    }
+  }, []);
+  return (
+    <div
+      id="live_tab"
+      // eslint-disable-next-line react/no-danger
+      dangerouslySetInnerHTML={{ __html: liveModel[courseId]?.iframe }}
+    />
+  );
+}
+
+export default LiveTab;

src/index.jsx

@@ -12,7 +12,7 @@ import { Switch } from 'react-router-dom';
 
 import { messages as footerMessages } from '@edx/frontend-component-footer';
 import { messages as headerMessages } from '@edx/frontend-component-header';
-import { fetchDiscussionTab } from './course-home/data/thunks';
+import { fetchDiscussionTab, fetchLiveTab } from './course-home/data/thunks';
 import DiscussionTab from './course-home/discussion-tab/DiscussionTab';
 
 import appMessages from './i18n';
@@ -33,6 +33,7 @@ import { fetchCourse } from './courseware/data';
 import initializeStore from './store';
 import NoticesProvider from './generic/notices';
 import PathFixesProvider from './generic/path-fixes';
+import LiveTab from './course-home/live-tab/LiveTab';
 
 subscribe(APP_READY, () => {
   ReactDOM.render(
@@ -48,6 +49,11 @@ subscribe(APP_READY, () => {
                   <OutlineTab />
                 </TabContainer>
               </PageRoute>
+              <PageRoute path="/course/:courseId/live">
+                <TabContainer tab="live" fetch={fetchLiveTab} slice="courseHome">
+                  <LiveTab />
+                </TabContainer>
+              </PageRoute>
               <PageRoute path="/course/:courseId/dates">
                 <TabContainer tab="dates" fetch={fetchDatesTab} slice="courseHome">
                   <DatesTab />