Recommendations page bug fixes and refactoring (#2578)

* Changed Most Active Studios to Latest Studios
* dynamically create view all link and created message for view all
* created shared determineSlidesToScroll method
* removed added code in Shared/index.ts
* renamed getSlickSettings to getSlickSliderSettings
* Updated row headers to follow plex naming convention
* removed extra s in Sceness
* updated row header css to better align header text with view all anchor

ui/v2.5/src/components/Scenes/SceneRecommendationRow.tsx

@@ -0,0 +1,45 @@
+import React, { FunctionComponent } from "react";
+import { FindScenesQueryResult } from "src/core/generated-graphql";
+import Slider from "react-slick";
+import { SceneCard } from "./SceneCard";
+import { SceneQueue } from "src/models/sceneQueue";
+import { ListFilterModel } from "src/models/list-filter/filter";
+import { getSlickSliderSettings } from "src/core/recommendations";
+
+interface IProps {
+  isTouch: boolean;
+  filter: ListFilterModel;
+  result: FindScenesQueryResult;
+  queue: SceneQueue;
+  header: String;
+  linkText: String;
+}
+
+export const SceneRecommendationRow: FunctionComponent<IProps> = (
+  props: IProps
+) => {
+  const cardCount = props.result.data?.findScenes.count;
+  return (
+    <div className="recommendation-row scene-recommendations">
+      <div className="recommendation-row-head">
+        <div>
+          <h2>{props.header}</h2>
+        </div>
+        <a href={`/scenes?${props.filter.makeQueryParameters()}`}>
+          {props.linkText}
+        </a>
+      </div>
+      <Slider {...getSlickSliderSettings(cardCount!, props.isTouch)}>
+        {props.result.data?.findScenes.scenes.map((scene, index) => (
+          <SceneCard
+            key={scene.id}
+            scene={scene}
+            queue={props.queue}
+            index={index}
+            zoomIndex={1}
+          />
+        ))}
+      </Slider>
+    </div>
+  );
+};