chore: add mediapipe icon everywhere (#430)

functions/src/share/index.ts

@@ -31,6 +31,7 @@ const BaseHTMLContext: Record<string, string | Record<string, string>> = {
     flutterIcon: bucketPathForFile('public/flutter-icon.png'),
     firebaseIcon: bucketPathForFile('public/firebase-icon.png'),
     tensorflowIcon: bucketPathForFile('public/tensorflow-icon.png'),
+    mediapipeIcon: bucketPathForFile('public/mediapipe-icon.png'),
     holocard: bucketPathForFile('public/holocard.png'),
     notFoundBg: bucketPathForFile('public/not-found-bg.png'),
     notFoundMobileBg: bucketPathForFile('public/not-found-mobile-bg.png'),

functions/src/share/templates/footer.ts

@@ -17,6 +17,11 @@ export default `
               <img class="tensorflow-icon" src={{assetUrls.tensorflowIcon}} />
             </a>
           </li>
+          <li>
+            <a href="https://developers.google.com/mediapipe">
+              <img class="tensorflow-icon" src={{assetUrls.mediapipeIcon}} />
+            </a>
+          </li>
         </ul>
       </div>
       <div class="right">

functions/src/share/templates/share.ts

@@ -89,6 +89,9 @@ export default `
           <a href="https://www.tensorflow.org/js/" class="player-btn">
             <img class="tensorflow-icon" src={{assetUrls.tensorflowIcon}} />
           </a>
+          <a href="https://developers.google.com/mediapipe" class="player-btn">
+            <img class="mediapipe-icon" src={{assetUrls.mediapipeIcon}} />
+          </a>
           <a href="#" class="player-btn fullscreen-button">
             <img class="tensorflow-icon" src={{assetUrls.playerFullscreen}} />
           </a>

functions/src/share/templates/styles.ts

@@ -172,6 +172,11 @@ footer ul li img.tensorflow-icon {
   height: 24px;
 }
 
+footer ul li img.mediapipe-icon {
+  width: 24px;
+  height: 24px;
+}
+
 footer .left a {
   margin-right: 16px;
 }
@@ -331,6 +336,12 @@ footer .right a {
 .right-side-controls .tensorflow-icon {
   width: 20px;
   height: 22px;
+  margin-right: 6px;
+}
+
+.right-side-controls .mediapipe-icon {
+  width: 20px;
+  height: 20px;
   margin-right: 18px;
 }
 

lib/footer/widgets/simplified_footer.dart

@@ -27,7 +27,9 @@ class SimplifiedFooter extends StatelessWidget {
                 SizedBox(width: _separationSize),
                 FirebaseIconLink(),
                 SizedBox(width: _separationSize),
-                TensorflowIconLink()
+                TensorflowIconLink(),
+                SizedBox(width: _separationSize),
+                MediapipeIconLink(),
               ],
             ),
           );
@@ -43,6 +45,8 @@ class SimplifiedFooter extends StatelessWidget {
                 const FirebaseIconLink(),
                 const SizedBox(width: _separationSize),
                 const TensorflowIconLink(),
+                const SizedBox(width: _separationSize),
+                const MediapipeIconLink(),
                 if (!_platformHelper.isMobile) ...[
                   const Spacer(),
                   const MuteButton(),

test/footer/widgets/simplified_footer_test.dart

@@ -25,6 +25,7 @@ void main() {
         expect(find.byType(FlutterIconLink), findsOneWidget);
         expect(find.byType(FirebaseIconLink), findsOneWidget);
         expect(find.byType(TensorflowIconLink), findsOneWidget);
+        expect(find.byType(MediapipeIconLink), findsOneWidget);
       },
     );
 
@@ -42,6 +43,7 @@ void main() {
         expect(find.byType(FlutterIconLink), findsOneWidget);
         expect(find.byType(FirebaseIconLink), findsOneWidget);
         expect(find.byType(TensorflowIconLink), findsOneWidget);
+        expect(find.byType(MediapipeIconLink), findsOneWidget);
         expect(find.byType(MuteButton), findsOneWidget);
       },
     );