crop images

symphony-collaboration · Sep 21, 2023 · d32dff9 · d32dff9
1 parent 71d7994
commit d32dff9
Show file tree

Hide file tree

Showing 15 changed files with 6 additions and 5 deletions.
diff --git a/docs/case-study.mdx b/docs/case-study.mdx
@@ -16,7 +16,9 @@ import HeaderLine from '@site/src/components/HeaderLine.tsx';
 
 Symphony is an open source framework designed to make it easy for developers to build collaborative web applications. Symphony handles the complexities of implementing collaboration, including conflict resolution and real-time infrastructure, freeing developers to focus on creating unique and engaging features for their applications.
 
-![Symphony Collaboration](/img/gifs/symphony.gif)
+<video loop="true" autoplay="true" playsinline="true" muted="true" class="max-w-full">
+  <source src="/img/symphony.mp4" type="video/mp4"></source>
+</video>
 
 In this case study, we’ll discuss the challenges that arise when building collaborative experiences on the web, the limitations of traditional approaches in solving these problems, and how we designed Symphony to overcome them.
 
@@ -89,14 +91,13 @@ We can concretely demonstrate how conflict arises using the following examples.
 
 Suppose that two users, Alice and Bob, are using a collaborative whiteboard. Bob changes a square shape to a circle whilst at the same time, Alice changes the square to a triangle.
 
-<video loop autoplay="true" playsinline class="max-w-full">
+<video loop="true" autoplay="true" playsinline="true" muted="true" class="max-w-full">
   <source src="/img/case-study/whiteboard-conflict.mp4" type="video/mp4"></source>
 </video>
 
-
 Or suppose that Alice and Bob are collaborating on a text document. Suddenly, Bob disconnects but Alice continued editing, overwriting earlier content. When Bob reconnects, the two states have diverged.
 
-<video loop autoplay="true"  class="max-w-full">
+<video loop="true" autoplay="true" playsinline="true" muted="true" class="max-w-full">
   <source src="/img/case-study/text-editor-conflict.mp4" type="video/mp4"></source>
 </video>
 

diff --git a/src/components/Screenshot.tsx b/src/components/Screenshot.tsx
@@ -4,7 +4,7 @@ export default function Screenshot() {
   return (
     <div className="relative flex items-center justify-center px-4 sm:px-6">
       <div className="border-1 z-10 flex justify-center rounded-2xl border-[0.5px] border-solid border-stone-200/60 bg-white/20 p-2 shadow backdrop-blur-md dark:shadow-lg dark:shadow-stone-400/30 sm:rounded-[32px] sm:p-5 md:rounded-[44px] md:p-7">
-        <video autoPlay loop className="z-20 w-full max-w-[1200px]">
+        <video autoPlay={true} loop={true} muted={true} playsInline={true} className="z-20 w-full max-w-[1200px]">
           <source src='/img/hey.mp4' type='video/mp4'></source>
         </video>
       </div>

diff --git a/static/img/case-study/architecture-overview.png b/static/img/case-study/architecture-overview.png
diff --git a/static/img/case-study/comparing-solutions.png b/static/img/case-study/comparing-solutions.png
diff --git a/static/img/case-study/conflict-comparison.png b/static/img/case-study/conflict-comparison.png
diff --git a/static/img/case-study/feedback-loop.png b/static/img/case-study/feedback-loop.png
diff --git a/static/img/case-study/load-testing.png b/static/img/case-study/load-testing.png
diff --git a/static/img/case-study/manual.png b/static/img/case-study/manual.png
diff --git a/static/img/case-study/ot.png b/static/img/case-study/ot.png
diff --git a/static/img/case-study/three-tier.png b/static/img/case-study/three-tier.png
diff --git a/static/img/gifs/symphony.gif b/static/img/gifs/symphony.gif
diff --git a/static/img/symphony.mp4 b/static/img/symphony.mp4
diff --git a/static/img/team/ethan.png b/static/img/team/ethan.png
diff --git a/static/img/team/jason.png b/static/img/team/jason.png
diff --git a/static/img/team/ryan.png b/static/img/team/ryan.png