Have access restricted messages be replaced with the audio/video player.

app/assets/javascripts/modules/media_viewer.js

@@ -7,7 +7,6 @@
 (function( global ) {
   'use strict';
   var Module = (function() {
-    var restrictedOverlaySelector = '[data-location-restricted-overlay]';
     var restrictedMessageSelector = '[data-access-restricted-message]';
     var sliderObjectSelector = '[data-slider-object]';
     var restrictedText = '(Restricted)'
@@ -174,6 +173,7 @@
     function initializeVideoJSPlayer(mediaObject) {
       removeUnusableSources(mediaObject);
       mediaObject.addClass('video-js vjs-default-skin');
+      mediaObject.show();
       videojs(mediaObject.attr('id'), videoJsOptions(mediaObject));
     }
 
@@ -193,7 +193,6 @@
         var parentDiv = mediaObject.closest(sliderSelector);
         var isRestricted = parentDiv.data('stanford-only') || parentDiv.data('location-restricted');
         if(isRestricted && data.status === 'success') {
-          parentDiv.find(restrictedOverlaySelector).hide();
           parentDiv.find(restrictedMessageSelector).hide();
           parentDiv.find('[data-auth-link]').hide();
         }

app/assets/stylesheets/media.scss

@@ -24,18 +24,8 @@
   text-align: center;
 }
 
-.#{$namespace}-media-access-restricted-container {
-  left: 0;
-  position: absolute;
-  top: 15%;
-  width: 100%;
-}
-
 .#{$namespace}-media-access-restricted {
-  @include rounded($border-radius-base);
-  background-color: $white-color;
   margin: 0 auto;
-  opacity: 0.9;
   padding: 20px 25px;
   width: 80%;
 
@@ -52,14 +42,6 @@
   }
 }
 
-.#{$namespace}-media-location-only-restricted-overlay {
-  color: $color-beige-30;
-  font-size: 20em;
-  position: absolute;
-  top: -10%;
-  width: 100%;
-}
-
 .#{$namespace}-media-slider-thumb {
   height: 75px;
   text-align: left;

lib/embed/media_tag.rb

@@ -44,6 +44,7 @@ def media_element(label, file, type)
             data-auth-url="#{authentication_url(file)}"
             controls='controls'
             class="#{'sul-embed-many-media' if many_primary_files?}"
+            style="display:none;"
             height="#{media_element_height}">
             #{enabled_streaming_sources(file)}
           </#{type}>
@@ -121,11 +122,8 @@ def access_restricted_message(stanford_only, location_restricted)
 
     def access_restricted_overlay(stanford_only, location_restricted)
       return unless stanford_only || location_restricted
-      # jvine says the -container div is necessary to style the elements so that
-      # sul-embed-media-access-restricted positions correctly
       # TODO: line1 and line1 spans should be populated by values returned from stacks
       <<-HTML.strip_heredoc
-        #{location_only_overlay(stanford_only, location_restricted)}
         <div class='sul-embed-media-access-restricted-container' data-access-restricted-message>
           <div class='sul-embed-media-access-restricted'>
             #{access_restricted_message(stanford_only, location_restricted)}
@@ -134,13 +132,6 @@ def access_restricted_overlay(stanford_only, location_restricted)
       HTML
     end
 
-    def location_only_overlay(stanford_only, location_restricted)
-      return unless location_restricted && !stanford_only
-      <<-HTML.strip_heredoc
-        <i class="sul-i-file-video-3 sul-embed-media-location-only-restricted-overlay" data-location-restricted-overlay></i>
-      HTML
-    end
-
     def streaming_settings_for(type)
       Settings.streaming[type] || {}
     end

spec/features/media_viewer_spec.rb

@@ -9,7 +9,7 @@
   end
 
   it 'renders player in html' do
-    expect(page).to have_css('video')
+    expect(page).to have_css('video', visible: false)
   end
 
   describe 'footer panels' do
@@ -37,13 +37,15 @@
   end
 
   context 'multiple A/V files' do
+    # The ajax request that displays the video does not fire in this context
+    # so we are checking for a non-visible video in the first case (even though it should be visible)
     it 'has a toggle-able thumbnail slider panel' do
       expect(page).to have_css('.sul-embed-thumb-slider-container', visible: true)
       expect(page).to have_css('.sul-embed-thumb-slider-open-close', visible: true)
       expect(page).not_to have_css('.sul-embed-thumb-slider', visible: true)
       page.find('.sul-embed-thumb-slider-open-close').click
       expect(page).to have_css('.sul-embed-thumb-slider', visible: true)
-      expect(page).to have_css('[data-slider-object="0"] video', visible: true)
+      expect(page).to have_css('[data-slider-object="0"] video', visible: false)
       expect(page).to have_css('[data-slider-object="1"] video', visible: false)
 
       within('.sul-embed-thumb-slider') do

spec/lib/embed/media_tag_spec.rb

@@ -30,25 +30,25 @@
     end
 
     it 'includes a data-src attribute for the dash player' do
-      expect(subject).to have_css('[data-src]', count: 2)
+      expect(subject).to have_css('[data-src]', count: 2, visible: false)
     end
 
     it 'includes a data attribute that includes the url to check the users auth status' do
-      expect(subject).to have_css('video[data-auth-url]', count: 2)
-      auth_url = subject.all('video[data-auth-url]').first['data-auth-url']
+      expect(subject).to have_css('video[data-auth-url]', count: 2, visible: false)
+      auth_url = subject.all('video[data-auth-url]', visible: false).first['data-auth-url']
       expect(auth_url).to match(%r{https?://stacks\.stanford\.edu.*/auth_check})
     end
 
     context 'single video' do
       let(:purl) { single_video_purl }
       it 'includes a height attribute equal to the body height' do
-        expect(subject).to have_css("video[height='#{viewer.body_height}px']")
+        expect(subject).to have_css("video[height='#{viewer.body_height}px']", visible: false)
       end
     end
 
     context 'multiple videos' do
       it 'includes a height attribute equal to the body height minus some px to make way for the thumb slider' do
-        expect(subject).to have_css('video[height="276px"]')
+        expect(subject).to have_css('video[height="276px"]', visible: false)
       end
     end
 
@@ -61,15 +61,15 @@
 
     context 'video' do
       it 'renders a video tag in the provided document' do
-        expect(subject).to have_css('video')
+        expect(subject).to have_css('video', visible: false)
       end
     end
 
     context 'audio' do
       let(:purl) { audio_purl }
 
       it 'renders an audo tag in the provided document' do
-        expect(subject).to have_css('audio')
+        expect(subject).to have_css('audio', visible: false)
       end
     end
   end
@@ -151,7 +151,7 @@
     describe '#enabled_streaming_sources' do
       before { stub_purl_response_with_fixture(purl) }
       it 'adds a source element for every enabled type' do
-        expect(subject).to have_css('source[type="application/x-mpegURL"]')
+        expect(subject).to have_css('source[type="application/x-mpegURL"]', visible: false)
       end
     end
 

spec/lib/embed/viewer/media_spec.rb

@@ -24,7 +24,7 @@
       allow(request).to receive(:rails_request).and_return(double(host_with_port: ''))
       stub_request(request)
       body_html = Capybara.string(media_viewer.body_html)
-      expect(body_html).to have_css('video')
+      expect(body_html).to have_css('video', visible: false)
     end
   end
 
@@ -33,7 +33,7 @@
     it 'does not do URL escaping on sources' do
       allow(request).to receive(:rails_request).and_return(double(host_with_port: ''))
       stub_request(request)
-      source = Capybara.string(media_viewer.body_html).all('video source').first
+      source = Capybara.string(media_viewer.body_html).all('video source', visible: false).first
       expect(source['src']).not_to include('%20')
       expect(source['src']).not_to include('&')
     end