From a63e4622a4fc64437ae348f8216d616eeebd219c Mon Sep 17 00:00:00 2001
From: NikolaBorislavovHristov <hristovnikola@protonmail.com>
Date: Sun, 8 Dec 2019 17:04:31 +0200
Subject: [PATCH] item menu options added to Library ui

---
 src/routes/Library/Library.js        | 12 ++++++++++--
 src/routes/Library/useItemOptions.js | 25 +++++++++++++++++++++++++
 2 files changed, 35 insertions(+), 2 deletions(-)
 create mode 100644 src/routes/Library/useItemOptions.js

diff --git a/src/routes/Library/Library.js b/src/routes/Library/Library.js
index f271799f8..e81046dc0 100644
--- a/src/routes/Library/Library.js
+++ b/src/routes/Library/Library.js
@@ -2,12 +2,14 @@ const React = require('react');
 const classnames = require('classnames');
 const { Button, Multiselect, MainNavBar, MetaItem } = require('stremio/common');
 const useLibrary = require('./useLibrary');
+const useItemOptions = require('./useItemOptions');
 const useSelectableInputs = require('./useSelectableInputs');
 const styles = require('./styles');
 
 const Library = ({ urlParams, queryParams }) => {
     const library = useLibrary(urlParams, queryParams);
     const [typeSelect, sortPropSelect] = useSelectableInputs(library);
+    const [options, optionOnSelect] = useItemOptions();
     return (
         <div className={styles['library-container']}>
             <MainNavBar className={styles['nav-bar']} />
@@ -51,8 +53,14 @@ const Library = ({ urlParams, queryParams }) => {
                                         </div>
                                         :
                                         <div className={styles['meta-items-container']}>
-                                            {library.lib_items.map((libItem, index) => (
-                                                <MetaItem {...libItem} key={index} />
+                                            {library.lib_items.map(({ id, videoId, ...libItem }, index) => (
+                                                <MetaItem
+                                                    {...libItem}
+                                                    key={index}
+                                                    dataset={{ id, videoId, type: libItem.type }}
+                                                    options={options}
+                                                    optionOnSelect={optionOnSelect}
+                                                />
                                             ))}
                                         </div>
                 }
diff --git a/src/routes/Library/useItemOptions.js b/src/routes/Library/useItemOptions.js
new file mode 100644
index 000000000..870c14936
--- /dev/null
+++ b/src/routes/Library/useItemOptions.js
@@ -0,0 +1,25 @@
+const React = require('react');
+
+const PLAY_OPTION = {
+    label: 'Play',
+    value: 'play'
+};
+
+const DISMISS_OPTION = {
+    label: 'Dismiss',
+    value: 'dismiss'
+};
+
+const onSelect = (event) => {
+    // TODO {{event.value}} {{event.dataset}}
+};
+
+const useItemOptions = () => {
+    const options = React.useMemo(() => ([
+        PLAY_OPTION,
+        DISMISS_OPTION
+    ]), []);
+    return [options, onSelect];
+};
+
+module.exports = useItemOptions;