feat: Added zoom lti to programs page (#29799)

* feat: Added zoom LTI to the programs page

lms/djangoapps/learner_dashboard/programs.py

@@ -143,6 +143,7 @@ class ProgramDetailsFragmentView(EdxFragmentView):
             'program_record_url': program_record_url,
         }
         program_discussion_lti = ProgramDiscussionLTI(program_uuid, request)
+        program_live_lti = ProgramLiveLTI(program_uuid, request)
         context = {
             'urls': urls,
             'user_preferences': get_user_preferences(user),
@@ -155,6 +156,10 @@ class ProgramDetailsFragmentView(EdxFragmentView):
             'discussion_fragment': {
                 'configured': program_discussion_lti.is_configured,
                 'iframe': program_discussion_lti.render_iframe()
+            },
+            'live_fragment': {
+                'configured': program_live_lti.is_configured,
+                'iframe': program_live_lti.render_iframe()
             }
         }
 

lms/static/js/learner_dashboard/views/program_details_view.js

@@ -83,6 +83,8 @@ class ProgramDetailsView extends Backbone.View {
       industryPathways: this.options.industryPathways,
       creditPathways: this.options.creditPathways,
       discussionFragment: this.options.discussionFragment,
+      live_fragment: this.options.live_fragment,
+
     };
     data = $.extend(data, this.programModel.toJSON());
     HtmlUtils.setHtml(this.$el, this.tpl(data));
@@ -134,6 +136,13 @@ class ProgramDetailsView extends Backbone.View {
       creditPathways: this.options.creditPathways,
       programTabViewEnabled: this.options.programTabViewEnabled,
     });
+    let hasIframe = false;
+    $('#live-tab').click(() => {
+      if (!hasIframe) {
+        $('#live').html(HtmlUtils.HTML(this.options.live_fragment.iframe).toString());
+        hasIframe = true;
+      }
+    }).bind(this);
   }
 
   trackPurchase() {

lms/templates/learner_dashboard/program_details_fragment.html

@@ -21,7 +21,8 @@ ProgramDetailsFactory({
     industryPathways: ${industry_pathways | n, dump_js_escaped_json},
     creditPathways: ${credit_pathways | n, dump_js_escaped_json},
     programTabViewEnabled: ${program_tab_view_enabled | n, dump_js_escaped_json},
-    discussionFragment: ${discussion_fragment, | n, dump_js_escaped_json}
+    discussionFragment: ${discussion_fragment, | n, dump_js_escaped_json},
+    live_fragment: ${live_fragment, | n, dump_js_escaped_json}
 });
 </%static:webpack>
 </%block>

lms/templates/learner_dashboard/program_details_tab_view.underscore

@@ -12,9 +12,11 @@
         <button class="nav-link btn-link" id="profile-tab" data-toggle="tab" data-target="#community" type="button" role="tab" aria-controls="community" aria-selected="false">Community</button>
       </li>
        <% } %>
-      <li class="d-none nav-item" role="presentation">
-        <button class="nav-link btn-link" id="contact-tab" data-toggle="tab" data-target="#live" type="button" role="tab" aria-controls="live" aria-selected="false">Live</button>
+      <% if (live_fragment.configured) { %>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link btn-link" id="live-tab" data-toggle="tab" data-target="#live" type="button" role="tab" aria-controls="live" aria-selected="false">Live</button>
       </li>
+       <% } %>
       <% if (industryPathways.length > 0 || creditPathways.length > 0) { %>
       <li class="nav-item" role="presentation">
         <button class="nav-link btn-link" id="contact-tab" data-toggle="tab" data-target="#pathways" type="button" role="tab" aria-controls="pathways" aria-selected="false">Pathways</button>
@@ -105,7 +107,9 @@
   <% if (discussionFragment.configured) { %>
        <div class="tab-pane fade" id="community" role="tabpanel" aria-labelledby="community-tab"><%= HtmlUtils.HTML(discussionFragment.iframe) %></div>
   <% } %>
-  <div class="tab-pane fade" id="live" role="tabpanel" aria-labelledby="live-tab">Live tab content</div>
+  <% if (live_fragment.configured) { %>
+  <div class="tab-pane fade" id="live" role="tabpanel" aria-labelledby="live-tab"></div>
+  <% } %>
   <div class="tab-pane fade" id="pathways" role="tabpanel" aria-labelledby="pathaways-tab">
 <% if (creditPathways.length > 0) { %>
     <aside class="aside js-program-pathways program-credit-pathways">