Avatar video fallback (#170)

* Add tile variation to avatars and place in live stream video

* Update higher resolution avatar samples

* Refactor paths to work relatively

Author: philschanely

app/assets/images/sage/avatar/alex.png

@@ -21,10 +21,10 @@
     &:not(:last-child) {
       margin-bottom: sage-spacing(md);
     }
-  }
-}
 
-.sage-live-stream-wrapper--fullscreen-demo {
-  position: absolute;
-  z-index: sage-z-index(nuclear);
+    &.sage-live-stream-wrapper--fullscreen-demo {
+      position: absolute;
+      z-index: sage-z-index(nuclear);
+    }
+  }
 }

app/assets/images/sage/avatar/chanel.png

@@ -33,14 +33,15 @@ $-live-avatar-ring-colors: (
     bg: sage-color(red, 100)
   )
 );
+$-live-avatar-tile-size: rem(216px);
 
 .sage-live-avatar {
   display: grid;
   grid-template-columns: 100%;
   grid-template-rows: 100%;
   grid-template-areas: "full";
   align-items: center;
-  justify-content: center;
+  justify-items: center;
   position: relative;
   width: $-live-avatar-min-size;
   height: $-live-avatar-min-size;
@@ -83,6 +84,11 @@ $-live-avatar-ring-colors: (
   height: 100%;
 }
 
+.sage-live-avatar--tile {
+  padding: sage-spacing(md);
+  border-radius: initial;
+}
+
 // Set up color variations
 @each $color, $settings in $-live-avatar-ring-colors {
   .sage-live-avatar--#{"" + $color} {
@@ -110,14 +116,22 @@ $-live-avatar-ring-colors: (
       fill: map-get($settings, main);
     }
   }
+
+  .sage-live-avatar--tile & {
+    max-width: $-live-avatar-tile-size;
+  }
 }
 
 .sage-live-avatar__image {
   position: relative;
   z-index: sage-z-index(default, 2);
   grid-area: full;
   width: 100%;
-  height: 100%;
   border-radius: sage-border(radius-round);
   object-fit: cover;
+
+  .sage-live-avatar--tile & {
+    max-width: $-live-avatar-tile-size;
+    max-height: $-live-avatar-tile-size;
+  }
 }

app/assets/images/sage/avatar/cj.png

@@ -24,7 +24,7 @@
     initials: "LJ",
     color: "",
     hasRing: false,
-    url: "/assets/sage/avatar/jay.png",
+    url: "../../assets/sage/avatar/jay.png",
     scale: false,
     custom_class: ""
   %>
@@ -54,7 +54,7 @@
     initials: "CJ",
     color: "sage",
     hasRing: true,
-    url: "/assets/sage/avatar/cj.png",
+    url: "../../assets/sage/avatar/cj.png",
     scale: false,
     custom_class: ""
   %>
@@ -99,7 +99,7 @@
       initials: "LJ",
       color: "",
       hasRing: false,
-      url: "/assets/sage/avatar/jay.png",
+      url: "../../assets/sage/avatar/jay.png",
       scale: true,
       custom_class: ""
     %>
@@ -109,7 +109,7 @@
       initials: "LJ",
       color: "",
       hasRing: false,
-      url: "/assets/sage/avatar/jay.png",
+      url: "../../assets/sage/avatar/jay.png",
       scale: true,
       custom_class: ""
     %>
@@ -119,7 +119,7 @@
       initials: "LJ",
       color: "",
       hasRing: false,
-      url: "/assets/sage/avatar/jay.png",
+      url: "../../assets/sage/avatar/jay.png",
       scale: true,
       custom_class: ""
     %>

app/assets/images/sage/avatar/court.png

@@ -7,7 +7,7 @@
     initials: "JC",
     color: "",
     hasRing: false,
-    url: "/assets/sage/avatar/jay.png",
+    url: "../../assets/sage/avatar/jay.png",
     iconsActive: true
   %>
 
@@ -20,7 +20,7 @@
     initials: "JC",
     color: "sage",
     hasRing: false,
-    url: "/assets/sage/avatar/cj.png",
+    url: "../../assets/sage/avatar/cj.png",
     iconsActive: false
   %>
 </ul>

app/assets/images/sage/avatar/forrest.png

@@ -1,8 +1,14 @@
-<div class="sage-live-stream-video-grid sage-live-stream-video-grid--<%= numVideos > 1 ? "#{numVideos}-up": "solo" %>">
-  <% for video in (1..numVideos) %>
+<div class="sage-live-stream-video-grid sage-live-stream-video-grid--<%= videos.size > 1 ? "#{videos.size}-up": "solo" %>">
+  <% videos.each do |video| %>
     <div class="sage-live-stream-video-grid__tile">
-      <!-- NOTE: This is just placeholder as it will be replaced with actual video containers in the interface -->
-      <img src="https://source.unsplash.com/random/780x540" class="sage-live-stream-video-grid__video" alt="Video placeholder" />
+      <%= render "sage/examples/objects/live_avatar/markup",
+        initials: video[:initials],
+        color: video[:color],
+        hasRing: false,
+        url: video[:avatarURL],
+        scale: true,
+        custom_class: "sage-live-stream-video-grid__video sage-live-avatar--tile"
+      %>
     </div>
   <% end %>
 </div>

app/assets/images/sage/avatar/isabelle.png

@@ -6,7 +6,28 @@
     runningTime: '00:32:13'
   %>
   <%= render "sage/examples/objects/live_stream_video_grid/markup", 
-    numVideos: 5
+    videos: [
+      {
+        initials: 'CJ',
+        avatarURL: '',
+        color: '',
+      },
+      {
+        initials: 'CM',
+        avatarURL: '../../assets/sage/avatar/court.png',
+        color: '',
+      },
+      {
+        initials: 'PJ',
+        avatarURL: '../../assets/sage/avatar/phil.png',
+        color: 'red',
+      },
+      {
+        initials: 'JJ',
+        avatarURL: '',
+        color: 'sage',
+      }
+    ]
   %>
   <%= render "sage/examples/objects/live_stream_footer/markup", 
     isAwake: true