Avalon 7.1

.circleci/config.yml

@@ -5,16 +5,18 @@ jobs:
   build:
     docker:
      # Primary container image where all steps run.
-     - image: avalonmediasystem/avalon:7.0-slim-dev-20200106
+     - image: avalonmediasystem/avalon:7.0-slim-dev-20200225
        environment:
         - DATABASE_URL=postgresql://postgres@localhost:5432/postgres
         - FEDORA_URL=http://localhost:8080/fcrepo/rest
+        - FEDORA_TIMEOUT=300
         - RAILS_ENV=test
      # Secondary container image on common network.
      - image: postgres:10-alpine
        environment:
          - POSTGRES_USER=postgres
          - POSTGRES_DB=avalon
+         - POSTGRES_PASSWORD=password
      - image: ualbertalib/docker-fcrepo4:4.7
        environment:
          CATALINA_OPTS: "-Djava.awt.headless=true -Dfile.encoding=UTF-8 -server -Xms512m -Xmx1024m -XX:NewSize=256m -XX:MaxNewSize=256m -XX:PermSize=256m -XX:MaxPermSize=256m -XX:+DisableExplicitGC"

.dependabot/config.yml

@@ -0,0 +1,10 @@
+version: 1
+update_configs:
+  - package_manager: "javascript"
+    directory: "/"
+    update_schedule: "weekly"
+    target_branch: "develop"
+  - package_manager: "ruby:bundler"
+    directory: "/"
+    update_schedule: "weekly"
+    target_branch: "develop"

.gitignore

@@ -73,3 +73,6 @@ yarn-debug.log*
 /yarn-error.log
 yarn-debug.log*
 .yarn-integrity
+
+# Cypress test output
+/cypress

Gemfile

@@ -63,9 +63,9 @@ gem 'omniauth-lti', git: "https://github.com/avalonmediasystem/omniauth-lti.git"
 gem 'active_encode', '~> 0.7.0'
 gem 'audio_waveform-ruby', require: 'audio_waveform'
 gem 'browse-everything', '~> 0.13.0'
+gem 'fastimage'
 gem 'media_element_add_to_playlist', git: 'https://github.com/avalonmediasystem/media-element-add-to-playlist.git', tag: 'avalon-r6.5'
 gem 'mediainfo', git: "https://github.com/avalonmediasystem/mediainfo.git", tag: 'avalon-r6.5'
-gem 'mini_magick', '~> 4.9'
 gem 'rest-client', '~> 2.0'
 gem 'roo'
 gem 'wavefile', '~> 1.0.1'

Gemfile.lock

@@ -320,7 +320,7 @@ GEM
     connection_pool (2.2.2)
     crack (0.4.3)
       safe_yaml (~> 1.0.0)
-    crass (1.0.5)
+    crass (1.0.6)
     daemons (1.3.1)
     dalli (2.7.10)
     database_cleaner (1.7.0)
@@ -401,6 +401,7 @@ GEM
       multipart-post (>= 1.2, < 3)
     faraday-encoding (0.0.4)
       faraday
+    fastimage (2.1.7)
     fcrepo_wrapper (0.9.0)
       ruby-progressbar
     ffi (1.10.0)
@@ -539,7 +540,6 @@ GEM
       mime-types-data (~> 3.2015)
     mime-types-data (3.2019.0331)
     mimemagic (0.3.3)
-    mini_magick (4.9.5)
     mini_mime (1.0.1)
     mini_portile2 (2.4.0)
     minitest (5.11.3)
@@ -558,7 +558,7 @@ GEM
     noid-rails (3.0.1)
       actionpack (>= 5.0.0, < 6)
       noid (~> 0.9)
-    nokogiri (1.10.5)
+    nokogiri (1.10.8)
       mini_portile2 (~> 2.4.0)
     nom-xml (1.1.0)
       activesupport (>= 3.2.18)
@@ -631,16 +631,16 @@ GEM
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
-    rails-html-sanitizer (1.0.4)
-      loofah (~> 2.2, >= 2.2.2)
+    rails-html-sanitizer (1.3.0)
+      loofah (~> 2.3)
     railties (5.2.3)
       actionpack (= 5.2.3)
       activesupport (= 5.2.3)
       method_source
       rake (>= 0.8.7)
       thor (>= 0.19.0, < 2.0)
     rainbow (3.0.0)
-    rake (12.3.2)
+    rake (12.3.3)
     rb-fsevent (0.10.3)
     rb-inotify (0.10.0)
       ffi (~> 1.0)
@@ -940,6 +940,7 @@ DEPENDENCIES
   factory_bot_rails
   fakefs
   faker
+  fastimage
   fcrepo_wrapper
   fedora-migrate!
   google-analytics-rails (= 1.1.0)
@@ -966,7 +967,6 @@ DEPENDENCIES
   mediaelement-track-scrubber!
   mediaelement_rails!
   mediainfo!
-  mini_magick (~> 4.9)
   mysql2
   net-ldap
   noid-rails (~> 3.0.1)

README.md

@@ -34,6 +34,14 @@ To run tests, first bring up the test stack then run Rspec as usual:
 * ```docker-compose up test```
 * ```docker-compose exec test bash -c "bundle exec rspec"```
 
+To run Cypress E2E tests, first bring up the development stack, manually create testing users, and then bring up the cypress container:
+* ```docker-compose up avalon```
+* Create the two testing users and one testing media object:
+  * ```docker-compose exec avalon bash -c "bundle exec rake avalon:user:create avalon_username=administrator@example.com avalon_password=password avalon_groups=administrator"```
+  * ```docker-compose exec avalon bash -c "bundle exec rake avalon:user:create avalon_username=user@example.com avalon_password=password"```
+  * ```docker-compose exec avalon bash -c "bundle exec rake avalon:test:media_object id=123456789 collection=123456789"```
+* ```docker-compose up cypress```
+
 ## (Not Recommended) Manually Setting Up an Avalon Media System Development Environment
 > **Warning**: The docker instructions above are the currently maintained development environment.  If you're unable to use docker you can try the instructions below but they may be out of date.
 

app/assets/javascripts/application.js

@@ -37,6 +37,9 @@
 //= require bootstrap-toggle
 //= require cropperjs/dist/cropper.min
 //= require url-search-params-polyfill/index.js
+//= require @babel/polyfill/dist/polyfill.min.js
+
+//= require hls.js/dist/hls.min.js
 
 // include all of our vendored js
 //= require_tree ../../../vendor/assets/javascripts/.

app/assets/javascripts/crop_upload.js

@@ -15,12 +15,8 @@
 */
 
 function add_cropper_handler(upload_path) {
-  let $poster = $('#poster-image');
   let $image = $('#image');
   let $input = $('#poster_input');
-  let $progress = $('#cropper-progress');
-  let $progressBar = $('#cropper-progress-bar');
-  let $alert = $('#cropper-alert');
   let $modal = $('#modal');
   let cropper;
   let width = 700;
@@ -29,12 +25,10 @@ function add_cropper_handler(upload_path) {
     let files = e.target.files;
     let done = function (url) {
       $image.prop("src", url);
-      $alert.hide();
       $modal.modal('show');
     };
     let reader;
     let file;
-    let url;
     if (files && files.length > 0) {
       file = files[0];
       if (URL) {
@@ -59,7 +53,6 @@ function add_cropper_handler(upload_path) {
     cropper = null;
   });
   $('#crop').on('click', function () {
-    let initialPosterURL;
     let canvas;
     let inputfile = $input.val().split('\\').pop();
     $modal.modal('hide');
@@ -68,45 +61,18 @@ function add_cropper_handler(upload_path) {
         width: width,
         height: width / aspectRatio,
       });
-      initialPosterURL = $poster.prop("src");
-      $poster.prop("src", canvas.toDataURL());
-      $progress.show();
-      $alert.removeClass('alert-success alert-warning');
       canvas.toBlob(function (blob) {
         let formData = new FormData();
         $input.val("")
-        $('#poster_original_name').text(inputfile)
         formData.append('admin_collection[poster]', blob, inputfile);
-        formData.append('authenticity_token', $('input[name=authenticity_token]').val())
+        formData.append('authenticity_token', $('input[name=authenticity_token]').val());
 
-        $.ajax(upload_path, {
-          method: 'POST',
-          data: formData,
-          processData: false,
-          contentType: false,
-          xhr: function () {
-            let xhr = new XMLHttpRequest();
-            xhr.upload.onprogress = function (e) {
-              let percent = '0';
-              let percentage = '0%';
-              if (e.lengthComputable) {
-                percent = Math.round((e.loaded / e.total) * 100);
-                percentage = percent + '%';
-                $progressBar.width(percentage).attr('aria-valuenow', percent).text(percentage);
-              }
-            };
-            return xhr;
-          },
-          success: function () {
-            //$alert.show().addClass('alert-success').text('Upload success');
-          },
-          error: function () {
-            $poster.prop("src", initialPosterURL);
-            $alert.show().addClass('alert-warning').text('Upload error');
-          },
-          complete: function () {
-            $progress.hide();
-          },
+        fetch(upload_path, {
+          method: "POST",
+          body: formData
+        }).then(() => {
+          // Page reload to show the flash message
+          location.reload();
         });
       });
     }

app/assets/javascripts/dynamic_fields.js.coffee

@@ -14,8 +14,8 @@
 
 
 $ ->
-  add_button_html = '<div class="input-group-btn"><button type="button" class="add-dynamic-field btn btn-success"><span class="glyphicon glyphicon-plus"></span></button></div>'
-  remove_button_html = '<div class="input-group-btn"><button type="button" class="remove-dynamic-field btn btn-success"><span class="glyphicon glyphicon-minus"></span></button></div>'
+  add_button_html = '<div class="input-group-btn"><button type="button" class="add-dynamic-field btn btn-default btn-light"><span class="glyphicon glyphicon-plus"></span></button></div>'
+  remove_button_html = '<div class="input-group-btn"><button type="button" class="remove-dynamic-field btn btn-default btn-light"><span class="glyphicon glyphicon-minus"></span></button></div>'
 
   $('.form-group.multivalued').each ->
       t = $(this)

app/assets/javascripts/import_button.js.coffee

@@ -15,7 +15,7 @@
 
 $ ->
   form = $('div.import-button').closest('form').prop('id')
-  import_button_html = '<div class="input-group-btn"><button id="media_object_bibliographic_id_btn" type="submit" name="media_object[import_bib_record]" class="btn btn-success" value="yes" >Import</button></div>'
+  import_button_html = '<div class="input-group-btn"><button id="media_object_bibliographic_id_btn" type="submit" name="media_object[import_bib_record]" class="btn btn-default btn-light" value="yes" >Import</button></div>'
   $('div.import-button').append(import_button_html)
   enable_bib_btn()
   $('#media_object_bibliographic_id').keyup -> enable_bib_btn()

app/assets/javascripts/sessions_new.js

@@ -22,8 +22,8 @@ $( document ).ready(function() {
   })
   let searchParams = new URLSearchParams(window.location.search)
   if(searchParams.has('email')){
-    $('#email-box').toggleClass('hidden')
-    $('#sign-in-select').toggleClass('hidden')
-    $('#sign-in-buttons').toggleClass('hidden')
+    $('#email-box').removeClass('hidden')
+    $('#sign-in-select').addClass('hidden')
+    $('#sign-in-buttons').addClass('hidden')
   }
 })

app/assets/stylesheets/avalon.scss

@@ -102,10 +102,8 @@ div.alert-danger {
 // Page title area (because looks like we're sneaking in
 // buttons, and other stuff horizontally positioned alongside title
 .page-title-wrapper {
-  margin-bottom: 2rem;
-
-  .headline-button {
-    margin-top: 20px;
+  h3 {
+    margin-top: 0;
   }
 }
 
@@ -356,9 +354,9 @@ a[data-trigger='submit'] {
 
 .tab-content > .tab-pane {
   padding: 10px;
-  border-bottom: 1px solid $gray;
-  border-left: 1px solid $gray;
-  border-right: 1px solid $gray;
+  border-bottom: 1px solid #ddd;
+  border-left: 1px solid #ddd;
+  border-right: 1px solid #ddd;
   overflow: hidden;
 }
 
@@ -368,6 +366,7 @@ a[data-trigger='submit'] {
 #share-link-section,
 #embed-part {
   cursor: pointer;
+  width: 100%;
 }
 
 #documents .document {
@@ -776,6 +775,10 @@ h5.panel-title {
   }
 }
 
+.mediaobject-filename {
+  word-break: break-all;
+}
+
 // Fixes the input displaying over the dropdown datepicker calendar
 .fileinput {
   position: relative;
@@ -882,7 +885,7 @@ h5.panel-title {
     text-align: left;
     position: relative;
     height: 13px;
-    margin: 8px 8px 8px 8px;
+    margin: 4px 0px;
     .completed {
       background-color: $success;
     }
@@ -943,4 +946,13 @@ h5.panel-title {
 
 #users-table th, td{
   padding-right: 6px !important;
-}
+}
+
+.create-buttons {
+  margin: 20px 0 0 5px;
+  clear: both;
+}
+
+.btn-light {
+  background-color: $btn-light-bg;
+}

app/assets/stylesheets/avalon/_collections.scss

@@ -27,7 +27,6 @@
   }
 
   .document-description {
-    text-align: justify;
     color: #666;
     white-space: pre-wrap;
   }
@@ -42,8 +41,20 @@
   }
 }
 
-form.collection_poster {
+.collection_poster {
+  display: flex;
+  justify-content: space-evenly;
+
+  form {
+    flex: auto;
+    margin-right: 5px;
+  }
+
+  form:last-child {
+    margin-right: 0px;
+  }
+
   input.btn {
-    width: 49%;
+    width: 100%;
   }
 }

app/assets/stylesheets/avalon/_header.scss

@@ -50,7 +50,6 @@
 
 .custom-header {
   @extend .mobile-hidden;
-  padding: 1rem 0 2rem;
 }
 
 header div {

app/assets/stylesheets/avalon/_playlists.scss

@@ -20,11 +20,6 @@
   }
 }
 
-// Data table applied class
-#Playlists_wrapper {
-  margin-bottom: 2rem;
-}
-
 .playlist-details-headline-wrapper {
   margin: 3rem 0 1rem;
   display: flex;
@@ -165,6 +160,14 @@
   }
 }
 
+#playlist_view_div {
+  .dl-horizontal {
+    dd {
+      margin-bottom: 5px;
+    }
+  }
+}
+
 /* Playlist show page */
 .queue {
   opacity: 0.8;