diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index 06870c1b2..861e53096 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -1,10 +1,10 @@
const React = require('react');
-const { Dropdown, MainNavBar } = require('stremio/common');
+const { Dropdown, MainNavBar, MetaItem } = require('stremio/common');
const useLibrary = require('./useLibrary');
const styles = require('./styles');
const Library = ({ urlParams, queryParams }) => {
- const [items, dropdowns] = useLibrary(urlParams.type, queryParams.get('sort'));
+ const [metaItems, dropdowns] = useLibrary(urlParams.type, queryParams.get('sort'));
return (
@@ -14,6 +14,15 @@ const Library = ({ urlParams, queryParams }) => {
))}
+
+ {metaItems.map((metaItem) => (
+
+ ))}
+
);
diff --git a/src/routes/Library/styles.less b/src/routes/Library/styles.less
index 9e352f3d3..a71d6f53b 100644
--- a/src/routes/Library/styles.less
+++ b/src/routes/Library/styles.less
@@ -39,5 +39,82 @@
}
}
}
+
+ .meta-items-container {
+ grid-area: meta-items-area;
+ display: grid;
+ grid-auto-rows: max-content;
+ grid-gap: 1.5rem;
+ align-items: center;
+ padding: 0 2rem;
+ overflow-y: auto;
+
+ .meta-item {
+ &.selected {
+ outline: calc(1.5 * var(--focus-outline-size)) solid var(--color-surfacelighter);
+ outline-offset: calc(-1.5 * var(--focus-outline-size));
+ }
+ }
+ }
+ }
+}
+
+@media only screen and (min-width: @xxlarge) {
+ .library-container {
+ .library-content {
+ .meta-items-container {
+ grid-template-columns: repeat(10, auto);
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: @xxlarge) {
+ .library-container {
+ .library-content {
+ .meta-items-container {
+ grid-template-columns: repeat(9, auto);
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: @normal) {
+ .library-container {
+ .library-content {
+ .meta-items-container {
+ grid-template-columns: repeat(8, auto);
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: @medium) {
+ .library-container {
+ .library-content {
+ .meta-items-container {
+ grid-template-columns: repeat(7, auto);
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: @small) {
+ .library-container {
+ .library-content {
+ .meta-items-container {
+ grid-template-columns: repeat(6, auto);
+ }
+ }
+ }
+}
+
+@media only screen and (max-width: @xsmall) {
+ .library-container {
+ .library-content {
+ .meta-items-container {
+ grid-template-columns: repeat(5, auto);
+ }
+ }
}
}
\ No newline at end of file