+ GIF/Video switch for FileView

public/protected/db.inc.php

@@ -94,7 +94,14 @@ class db
     {
         $sql = "SELECT id, width, height, thumb_height, extension, title, timestamp FROM `" . $GLOBALS["table_prefix"] . "files` WHERE id=?";
         $result = $this->request($sql, "s", $uid);
-        return $result->fetch_assoc();
+        $array = $result->fetch_assoc();
+
+        // Add has_gif key to array
+        if ($array["extension"] === "mp4" && file_exists($GLOBALS["upload_directory"] . $array["id"] . ".gif")) {
+            $array["has_gif"] = true;
+        }
+
+        return $array;
     }
 }
 

src/@types/global.d.ts

@@ -31,6 +31,7 @@ interface Window {
     title: string;
     timestamp: number;
     fromServer?: boolean;
+    has_gif?: boolean;
   };
 }
 

src/FileView/FileView.tsx

@@ -19,6 +19,7 @@ import FVSidebarProvider from "./views/FVSidebar/FVSidebarContext";
 import FVSidebarToggleButton from "./views/FVSidebar/FVSidebarToggleButton";
 import VideoViewer from "./views/VideoViewer/VideoViewer";
 import ThumbnailViewer from "./views/ThumbnailViewer/ThumbnailViewer";
+import { classNames } from "@microsoft/fast-web-utilities";
 
 const FVSidebar: LoadableComponent<FVSidebarProps> = FullscreenLoader(
   import(/* webpackChunkName: "FVSidebar" */ "./views/FVSidebar/FVSidebar")
@@ -62,13 +63,23 @@ const headerStyles: ComponentStyles<HeaderClassNameContract, DesignSystem> = {
     zIndex: "40",
   },
   header_left: {},
+  header_right: {
+    flexShrink: "0",
+  },
+  "@media (max-width: 1270px)": {
+    header_center: {
+      ".fileView-hasGif &": {
+        position: "initial",
+      },
+    },
+  },
 };
 
 const FileView: React.FC<FileViewProps> = ({
   managedClasses,
   fileData,
 }: FileViewProps) => {
-  const { extension } = fileData;
+  const { extension, has_gif } = fileData;
 
   /**
    * Helper function as ref to prevent it from updating after
@@ -98,7 +109,9 @@ const FileView: React.FC<FileViewProps> = ({
   return (
     <FVSidebarProvider fileData={fileData}>
       <RouteInterceptionManager>
-        <div className={managedClasses.fileView}>
+        <div
+          className={classNames(managedClasses.fileView, ["fileView-hasGif", has_gif])}
+        >
           <motion.div
             className={managedClasses.fileViewBackground}
             initial={{ opacity: 0 }}
@@ -110,7 +123,13 @@ const FileView: React.FC<FileViewProps> = ({
               position="absolute"
               jssStyleSheet={headerStyles}
               centerContent={<HeaderCenterContent />}
-              rightSideContent={<HeaderRightContent onMagnify={onMagnify.current} />}
+              rightSideContent={
+                <HeaderRightContent
+                  onMagnify={onMagnify.current}
+                  isVideo={isVideo}
+                  hasGif={has_gif}
+                />
+              }
             />
             <FVSidebarToggleButton />
           </motion.div>

src/FileView/views/HeaderContent/HeaderRightContent.props.ts

@@ -12,4 +12,6 @@ export interface HeaderRightContentProps
   extends ManagedClasses<HeaderRightContentClassNameContract> {
   onMagnify?: React.MouseEventHandler;
   onShare?: React.MouseEventHandler;
+  isVideo?: boolean;
+  hasGif?: boolean;
 }

src/FileView/views/HeaderContent/HeaderRightContent.tsx

@@ -2,13 +2,20 @@ import { ButtonAppearance } from "@microsoft/fast-components-react-msft";
 import { DesignSystem, baseLayerLuminance } from "@microsoft/fast-components-styles-msft";
 import { ComponentStyles } from "@microsoft/fast-jss-manager-react";
 import React, { useContext } from "react";
-import { FaAdjust, FaSearchPlus, FaShareAlt } from "react-icons/fa";
-import { Button, DesignToolkit, useMotionValueFactory } from "../../../_DesignSystem";
+import { FaAdjust, FaSearchPlus, FaShareAlt, FaVideo, FaImage } from "react-icons/fa";
+import {
+  Button,
+  DesignToolkit,
+  useMotionValueFactory,
+  TabBar,
+} from "../../../_DesignSystem";
 import { ButtonClassNameContract } from "../../../_DesignSystem/Button/Button.props";
 import { HeaderRightContentProps } from "./HeaderRightContent.props";
 import { defaultButtonPos } from "../FVSidebar/FVSidebarToggleButton";
 import { motion } from "framer-motion";
 import { SidebarData } from "../FVSidebar/FVSidebarContext";
+import { Orientation } from "@microsoft/fast-web-utilities";
+import { TabItem } from "../../../_DesignSystem/Tabs/TabBar/TabBar.props";
 
 /**
  * Rotate the theme switcher icon based on the current theme
@@ -20,6 +27,9 @@ const customThemeSwitcherStyle: ComponentStyles<ButtonClassNameContract, DesignS
       return `rotate(${luminance > 0.5 ? 180 : 0}deg)`;
     },
     transition: "transform .3s",
+    "&:active": {
+      transition: "transform .3s, background .1s",
+    },
   },
 };
 
@@ -32,44 +42,60 @@ const marginLeftStyleSheet: ComponentStyles<ButtonClassNameContract, DesignSyste
   },
 };
 
-export const HeaderRightContent: React.ComponentType<HeaderRightContentProps> = ({
-  onMagnify,
-  onShare,
-}) => {
-  const themeCtx = useContext(DesignToolkit);
-  const { sidebarPos, isSidebarFloating } = useContext(SidebarData);
+const tabBarItems: TabItem[] = [
+  { icon: FaVideo, id: "video", title: "Video" },
+  { icon: FaImage, id: "gif", title: "Gif" },
+];
 
-  /**
-   * Move right-side header contents alongside sidebar
-   * if the window is big enough
-   */
-  const headerRightPosX = useMotionValueFactory(
-    () =>
-      isSidebarFloating
-        ? 0
-        : Math.min((sidebarPos.get() - (defaultButtonPos + 63 - 12 - 5)) * -1, 0),
-    [sidebarPos, isSidebarFloating]
-  );
+export const HeaderRightContent: React.ComponentType<HeaderRightContentProps> = React.memo(
+  ({ onMagnify, onShare, isVideo, hasGif }) => {
+    const themeCtx = useContext(DesignToolkit);
+    const { sidebarPos, isSidebarFloating } = useContext(SidebarData);
 
-  return (
-    <motion.div style={{ x: headerRightPosX }}>
-      <Button
-        appearance={ButtonAppearance.lightweight}
-        icon={FaSearchPlus}
-        onClick={onMagnify}
-      />
-      <Button
-        appearance={ButtonAppearance.lightweight}
-        icon={FaAdjust}
-        onClick={themeCtx.toggleTheme}
-        jssStyleSheet={customThemeSwitcherStyle}
-      />
-      <Button
-        appearance={ButtonAppearance.lightweight}
-        icon={FaShareAlt}
-        onClick={onShare}
-        jssStyleSheet={marginLeftStyleSheet}
-      />
-    </motion.div>
-  );
-};
+    /**
+     * Move right-side header contents alongside sidebar
+     * if the window is big enough
+     */
+    const headerRightPosX = useMotionValueFactory(
+      () =>
+        isSidebarFloating
+          ? 0
+          : Math.min((sidebarPos.get() - (defaultButtonPos + 63 - 12 - 5)) * -1, 0),
+      [sidebarPos, isSidebarFloating]
+    );
+
+    return (
+      <motion.div style={{ x: headerRightPosX }}>
+        {isVideo && hasGif && (
+          <>
+            <TabBar
+              id="video-gif"
+              label="Switch between video and gif view"
+              orientation={Orientation.horizontal}
+              items={tabBarItems}
+            />
+          </>
+        )}
+        {!isVideo && (
+          <Button
+            appearance={ButtonAppearance.lightweight}
+            icon={FaSearchPlus}
+            onClick={onMagnify}
+          />
+        )}
+        <Button
+          appearance={ButtonAppearance.lightweight}
+          icon={FaAdjust}
+          onClick={themeCtx.toggleTheme}
+          jssStyleSheet={customThemeSwitcherStyle}
+        />
+        <Button
+          appearance={ButtonAppearance.lightweight}
+          icon={FaShareAlt}
+          onClick={onShare}
+          jssStyleSheet={marginLeftStyleSheet}
+        />
+      </motion.div>
+    );
+  }
+);

src/_DesignSystem/Tabs/TabBar/TabBar.tsx

@@ -3,9 +3,7 @@ import { TabBarProps, TabBarClassNameContract, TabItem } from "./TabBar.props";
 import {
   DesignSystem,
   accentFillActive,
-  accentFillHover,
   neutralFillHover,
-  neutralFillActive,
 } from "@microsoft/fast-components-styles-msft";
 import manageJss, { ComponentStyles } from "@microsoft/fast-jss-manager-react";
 import Tab from "../Tab/Tab";
@@ -21,7 +19,6 @@ import {
 } from "@microsoft/fast-web-utilities";
 import tabEventEmitter from "../TabEvents";
 import { TabClassNameContract } from "../Tab/Tab.props";
-import { parseColorHexRGBA } from "@microsoft/fast-colors";
 
 const styles: ComponentStyles<TabBarClassNameContract, DesignSystem> = {
   tabBar: {