Merge pull request #16263 from edx/tuchfarber/program_marketing_fix

Fix program marketing page when it doesn't have a video.

lms/static/sass/views/_program-marketing-page.scss

@@ -3,6 +3,7 @@
 
   .program_title {
     font-weight: bold;
+    margin-top: $baseline
   }
 
   .logo {
@@ -23,10 +24,12 @@
   .main-banner {
     color: white;
     margin-bottom: 1px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
 
     .authoring-org-logo {
       background-color: $white;
-      margin-bottom: $baseline;
     }
 
     .btn {
@@ -34,7 +37,6 @@
     }
 
     .btn,
-    .authoring-org-logo,
     h1,
     h2,
     a {
@@ -48,6 +50,7 @@
 
       button {
         background-color: transparent;
+        color: $white
       }
 
       iframe {

lms/templates/courseware/program_marketing.html

@@ -44,7 +44,7 @@ expected_learning_items = program['expected_learning_items']
 authoring_organizations = program['authoring_organizations']
 min_hours_effort_per_week = program['min_hours_effort_per_week']
 max_hours_effort_per_week = program['max_hours_effort_per_week']
-video_url = program.get('video', {}).get('src', '')
+video_url = program['video'].get('src') if program['video'] else ''
 banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
 %>
 
@@ -54,7 +54,7 @@ banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
 
 <%block name="pagetitle">${program['title']}</%block>
 <div id="program-details-page" class="container">  
-  <div class="row main-banner" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${banner_image}) no-repeat center;">
+  <div class="row main-banner" style="background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), url(${banner_image});">
     <div class="col col-12 col-md-8">
       % if authoring_organizations and authoring_organizations[0]['logo_image_url']:
       <div>
@@ -80,12 +80,14 @@ banner_image = program.get('banner_image', {}).get('large', {}).get('url', '')
       </div>
     </div>
     <div class="col col-12 col-md-4">
+      % if video_url:
       <div id="program_video">
         <button type="button" class="btn" aria-label="${_('Play')}" onclick="playVideo('${video_url}')">
           <span class="icon fa fa-4x fa-play-circle" aria-hidden="true"></span>
         </button>
         <iframe class="align-middle" title="${_('YouTube Video')}" src="" frameborder="0" allowfullscreen style="display:none;"></iframe>
       </div>
+      % endif
     </div>
   </div>
   <div class="row quick-nav">

openedx/core/djangoapps/catalog/tests/factories.py

@@ -81,6 +81,11 @@ class StdImageFactory(ImageFactoryBase):
     url = factory.Faker('image_url')
 
 
+class VideoFactory(DictFactoryBase):
+    src = factory.Faker('url')
+    description = factory.Faker('sentence')
+
+
 def generate_sized_stdimage():
     return {
         size: StdImageFactory() for size in ['large', 'medium', 'small', 'x-small']
@@ -188,6 +193,7 @@ class ProgramFactory(DictFactoryBase):
     title = factory.Faker('catch_phrase')
     type = factory.Faker('word')
     uuid = factory.Faker('uuid4')
+    video = VideoFactory()
     weeks_to_complete = fake.random_int(1, 45)