jellyfin/jellyfin-vue
1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-vue.git synced 2024-10-07 19:43:22 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(settings): add settings page

Browse Source
This commit is contained in:
MrTimscampi 2020-09-20 01:42:40 +02:00
parent 9f4ba4b4cf
commit 8239a3fcb8
21 changed files with 361 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
assets/images/devices/android.svg Normal file
View File

@ -0,0 +1,4 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M24 19H0a13.6 13.6 0 0 1 2.21-6.07A11.2 11.2 0 0 1 5.87 9.4l.41-.23-2.02-3.41a.51.51 0 0 1 .17-.7.5.5 0 0 1 .69.18l2.08 3.5a12.62 12.62 0 0 1 4.84-.9 12.2 12.2 0 0 1 4.75.9l2.07-3.5a.5.5 0 0 1 .7-.17.51.51 0 0 1 .16.7L17.7 9.19l.5.28a11.38 11.38 0 0 1 3.63 3.62A14.48 14.48 0 0 1 24 19zm-7.5-4.48a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1zm-11 0a1 1 0 0 0 1 1 1 1 0 0 0 1-1 1 1 0 0 0-1-1 1 1 0 0 0-1 1z" fill="#fff"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 563 B

1
assets/images/devices/chrome.svg Normal file
View File

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Google Chrome icon</title><path d="M16.214 8.69l6.715-1.679A12.027 12.027 0 0 1 24 11.972C24 18.57 18.569 24 11.968 24c-.302 0-.605-.011-.907-.034l4.905-8.347c.356-.376.655-.803.881-1.271a5.451 5.451 0 0 0-.043-4.748 5.156 5.156 0 0 0-.59-.91zm-3.24 8.575l-2.121 6.682C4.738 23.345 0 18.14 0 11.977 0 9.592.709 7.26 2.038 5.279l4.834 8.377c.18.539 1.119 2.581 3.067 3.327.998.382 2.041.481 3.035.282zM11.973 7.62c-2.006.019-3.878 1.544-4.281 3.512a4.478 4.478 0 0 0 1.237 4.032c1.214 1.186 3.14 1.578 4.734.927 1.408-.576 2.47-1.927 2.691-3.431.272-1.856-.788-3.832-2.495-4.629a4.413 4.413 0 0 0-1.886-.411zM7.046 9.962L2.259 4.963A12.043 12.043 0 0 1 11.997 0c4.56 0 8.744 2.592 10.774 6.675H12.558c-1.811-.125-3.288.52-4.265 1.453a5.345 5.345 0 0 0-1.247 1.834z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 863 B

1
assets/images/devices/edge.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Microsoft Edge icon</title><path d="M23.158 14.25H7.821c0 .578.086 1.103.262 1.575.188.465.431.881.743 1.245.31.364.675.675 1.102.938.413.262.863.48 1.343.648.476.173.975.3 1.48.383a10.078 10.078 0 0 0 3.311-.026c.564-.105 1.111-.244 1.651-.42.54-.177 1.061-.387 1.583-.627.525-.24 1.057-.502 1.605-.795v5.085c-.612.3-1.212.552-1.812.769-.6.21-1.2.394-1.81.54-.612.15-1.23.263-1.865.33a18.41 18.41 0 0 1-1.957.105c-.9 0-1.77-.105-2.606-.311a10.217 10.217 0 0 1-2.355-.893 9.869 9.869 0 0 1-2.018-1.417 8.957 8.957 0 0 1-2.595-4.148 9.359 9.359 0 0 1-.356-2.61c0-.986.135-1.924.405-2.82.274-.9.66-1.717 1.17-2.467a8.92 8.92 0 0 1 1.856-1.999A9.82 9.82 0 0 1 9.426 5.91a5.206 5.206 0 0 0-1.163 1.774 7.671 7.671 0 0 0-.536 2.055h8.542c0-.863-.086-1.613-.262-2.258-.176-.645-.458-1.181-.851-1.605-.39-.427-.893-.75-1.512-.96-.618-.214-1.365-.322-2.238-.322-1.032 0-2.063.15-3.094.461-1.031.3-2.01.731-2.94 1.275-.93.551-1.785 1.2-2.565 1.942-.78.75-1.436 1.557-1.969 2.43a14 14 0 0 1 .649-2.913C1.798 6.863 2.21 6 2.706 5.2a11.606 11.606 0 0 1 1.74-2.152c.663-.645 1.398-1.2 2.212-1.65C7.472.949 8.334.585 9.272.34A13.4 13.4 0 0 1 12.257 0c.615 0 1.226.056 1.837.165.612.113 1.208.263 1.79.458 1.154.397 2.185.952 3.093 1.657a10.553 10.553 0 0 1 2.287 2.449c.62.926 1.088 1.95 1.41 3.063.323 1.114.488 2.273.488 3.477v2.981z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
assets/images/devices/edgechromium.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Microsoft Edge icon</title><path d="M21.86 17.86q.14 0 .25.12.1.13.1.25t-.11.33l-.32.46-.43.53-.44.5q-.21.25-.38.42l-.22.23q-.58.53-1.34 1.04-.76.51-1.6.91-.86.4-1.74.64t-1.67.24q-.9 0-1.69-.28-.8-.28-1.48-.78-.68-.5-1.22-1.17-.53-.66-.92-1.44-.38-.77-.58-1.6-.2-.83-.2-1.67 0-1 .32-1.96.33-.97.87-1.8.14.95.55 1.77.41.82 1.02 1.5.6.68 1.38 1.21.78.54 1.64.9.86.36 1.77.56.92.2 1.8.2 1.12 0 2.18-.24 1.06-.23 2.06-.72l.2-.1.2-.05zm-15.5-1.27q0 1.1.27 2.15.27 1.06.78 2.03.51.96 1.24 1.77.74.82 1.66 1.4-1.47-.2-2.8-.74-1.33-.55-2.48-1.37-1.15-.83-2.08-1.9-.92-1.07-1.58-2.33T.36 14.94Q0 13.54 0 12.06q0-.81.32-1.49.31-.68.83-1.23.53-.55 1.2-.96.66-.4 1.35-.66.74-.27 1.5-.39.78-.12 1.55-.12.7 0 1.42.1.72.12 1.4.35.68.23 1.32.57.63.35 1.16.83-.35 0-.7.07-.33.07-.65.23v-.02q-.63.28-1.2.74-.57.46-1.05 1.04-.48.58-.87 1.26-.38.67-.65 1.39-.27.71-.42 1.44-.15.72-.15 1.38zM11.96.06q1.7 0 3.33.39 1.63.38 3.07 1.15 1.43.77 2.62 1.93 1.18 1.16 1.98 2.7.49.94.76 1.96.28 1 .28 2.08 0 .89-.23 1.7-.24.8-.69 1.48-.45.68-1.1 1.22-.64.53-1.45.88-.54.24-1.11.36-.58.13-1.16.13-.42 0-.97-.03-.54-.03-1.1-.12-.55-.1-1.05-.28-.5-.19-.84-.5-.12-.09-.23-.24-.1-.16-.1-.33 0-.15.16-.35.16-.2.35-.5.2-.28.36-.68.16-.4.16-.95 0-1.06-.4-1.96-.4-.91-1.06-1.64-.66-.74-1.52-1.28-.86-.55-1.79-.89-.84-.3-1.72-.44-.87-.14-1.76-.14-1.55 0-3.06.45T.94 7.55q.71-1.74 1.81-3.13 1.1-1.38 2.52-2.35Q6.68 1.1 8.37.58q1.7-.52 3.58-.52Z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

1
assets/images/devices/firefox.svg Normal file
View File

@ -0,0 +1 @@
<svg viewBox="0 0 24 24" role="img" xmlns="http://www.w3.org/2000/svg"><title>Mozilla Firefox icon</title><path d="M23.41 10.98c-.03-.21-.07-.34-.07-.34s-.08.1-.22.28c-.04-.51-.13-1.02-.27-1.51-.18-.62-.41-1.22-.7-1.79-.18-.38-.39-.75-.64-1.09-.13-.2-.24-.35-.26-.38-.43-.7-.91-1.12-1.48-1.92-.36-.61-.61-1.29-.73-1.99-.16.42-.28.86-.36 1.3-.57-.58-1.08-1-1.38-1.28C15.8.86 15.98.14 15.98.14s-2.8 3.12-1.59 6.37c.42 1.1 1.14 2.07 2.09 2.78 1.17.96 2.43 1.72 3.09 3.67-.53-1.03-1.34-1.88-2.33-2.47.3.71.45 1.46.44 2.23 0 2.92-2.37 5.29-5.3 5.29-.39 0-.79-.04-1.17-.13-.46-.09-.9-.24-1.31-.45-.62-.37-1.16-.86-1.58-1.45v-.01c.05.02.08.03.09.03.22.08.44.14.67.18.9.19 1.83.08 2.66-.31.84-.47 1.35-.81 1.76-.68.41.13.72-.26.44-.67-.5-.65-1.32-.96-2.12-.82-.84.12-1.61.71-2.7.14-.08-.04-.14-.08-.21-.12-.07-.05.24.06.16.01-.24-.12-.47-.25-.69-.41-.01-.01.17.05.15.04-.28-.19-.53-.44-.72-.73-.19-.35-.21-.78-.05-1.15.11-.19.26-.33.45-.42.14.07.23.12.23.12s-.07-.12-.1-.18c.01-.01.02 0 .04-.01.12.05.39.19.54.28.1.05.18.13.25.22 0 0 .05-.02.01-.13-.05-.13-.14-.24-.26-.31h.02c.11.06.21.12.31.2.09-.22.14-.44.13-.67.01-.13-.01-.26-.05-.37-.04-.08.02-.11.09-.03-.01-.06-.03-.12-.06-.18 0 0 .04-.06.06-.07.05-.05.1-.1.16-.13.35-.22.71-.41 1.09-.56.31-.13.56-.24.61-.27.08-.05.15-.1.22-.16.26-.22.43-.52.49-.85.01-.05.01-.09.01-.13V7.75c-.04-.17-.33-.29-1.84-.44-.53-.08-.96-.48-1.08-1.01v.01c-.02.05-.04.11-.06.17.02-.06.04-.11.06-.17V6.3c.29-.75.81-1.4 1.48-1.84.04-.03-.15.01-.11-.02.12-.06.25-.12.39-.17.07-.02-.29-.16-.61-.13-.19.01-.38.06-.56.13.08-.06.3-.14.25-.14-.41.07-.8.22-1.15.43 0-.04.01-.07.02-.1-.28.12-.53.31-.71.55v-.13c-.13.1-.24.21-.35.33h-.01c-.83-.32-1.73-.4-2.61-.22l-.01-.01h.01c-.18-.14-.34-.32-.46-.52l-.01.01-.02-.02c-.06-.08-.11-.18-.17-.29-.05-.07-.09-.16-.14-.25 0 0 0-.01-.01-.01s-.03.09-.04.06c-.15-.4-.23-.83-.21-1.25h-.01c-.25.17-.44.41-.53.7-.05.1-.08.15-.11.21v-.03l.03-.15c-.01.01-.01.02-.02.03-.07.08-.13.17-.18.27-.05.09-.09.19-.12.29v-.05c0-.04.01-.1 0-.08l-.01.03c-.32.71-.53 1.47-.6 2.25-.02.14-.02.27-.02.4v.02c-.23.25-.43.52-.61.81-.58.98-1.01 2.04-1.28 3.15.19-.42.42-.83.69-1.21C.76 10.66.5 12.04.5 13.44c.09-.41.2-.81.33-1.21-.08 1.65.24 3.3.93 4.81.93 2.08 2.47 3.83 4.43 5.01.79.54 1.66.96 2.57 1.24.12.04.25.09.37.13-.04-.02-.07-.04-.11-.05 1.08.32 2.21.49 3.34.49 4.01 0 5.33-1.53 5.46-1.68.19-.18.36-.39.47-.64.08-.03.15-.06.23-.1l.05-.02c.06-.03.09-.04.09-.04.61-.29 1.18-.64 1.7-1.06.78-.56 1.33-1.38 1.57-2.31.15-.34.15-.71.03-1.06.06-.1.11-.19.12-.21.86-1.38 1.35-2.96 1.42-4.59v-.01-.13c0-.34-.03-.69-.09-1.03z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.5 KiB

1
assets/images/devices/html5.svg Normal file
View File

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>HTML5 icon</title><path d="M1.5 0h21l-1.91 21.563L11.977 24l-8.564-2.438L1.5 0zm7.031 9.75l-.232-2.718 10.059.003.23-2.622L5.412 4.41l.698 8.01h9.126l-.326 3.426-2.91.804-2.955-.81-.188-2.11H6.248l.33 4.171L12 19.351l5.379-1.443.744-8.157H8.531z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 345 B

11
assets/images/devices/kodi.svg Normal file
View File

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="24" height="24" version="1.1" viewBox="0 0 6.35 6.35" xmlns="http://www.w3.org/2000/svg">
<g transform="translate(-36.173 -93.796)">
<g transform="matrix(.08 0 0 .08 40.527 88.485)">
<path d="m53.295 119.35v-39.688h79.375v79.375h-79.375z" fill="#fcfdfd" stroke-width=".26458"/>
</g>
<g transform="matrix(1.3761 0 0 1.3825 -26.63 -38.456)" fill="#fff">
<path transform="matrix(.08 0 0 .08 40.527 88.485)" d="m86.822 141.89c-4.738-4.7596-5.2168-5.3235-5.2168-6.1442 0-0.82158 0.47505-1.3787 5.2329-6.1365 4.7552-4.7552 5.3153-5.2329 6.1353-5.2329 0.81617 0 1.3676 0.46161 5.7678 4.8286 4.8692 4.8324 5.6182 5.7452 5.6182 6.8466 0 0.41218-1.5697 2.1641-5.2274 5.834-4.8206 4.8367-5.3 5.2449-6.1603 5.2449-0.86046 0-1.3378-0.40681-6.1497-5.2406zm22.168-12.455c-0.43656-0.27248-2.9071-2.6371-5.4901-5.2547-4.1957-4.2519-4.6964-4.8534-4.6964-5.6418 0-0.7938 0.52954-1.414 5.2644-6.1655 4.6582-4.6746 5.362-5.2829 6.1127-5.2829 0.75071 0 1.4546 0.60829 6.1127 5.2829 4.7729 4.7898 5.2644 5.3668 5.2644 6.1818 0 0.81542-0.48628 1.3851-5.2394 6.1382-5.6104 5.6104-5.7707 5.7142-7.3283 4.742zm-40.16-5.2731c-3.5636-3.5816-4.9518-5.1483-4.9518-5.5886 0-0.75745 9.3384-10.601 10.057-10.601 0.2584 0 0.54208 0.18833 0.63041 0.41851s0.1606 4.7624 0.1606 10.072c0 9.1098-0.10948 10.677-0.74606 10.677-0.10905 0-2.4266-2.2396-5.1501-4.9768zm13.2-1.5272c-0.08833-0.23018-0.1606-5.3558-0.1606-11.39 0-8.9734 0.06852-11.102 0.37621-11.686 0.20691-0.39296 2.447-2.7683 4.9781-5.2785 4.3226-4.2871 4.6624-4.5641 5.5987-4.5641 0.94583 0 1.2591 0.26717 6.1277 5.2255 4.658 4.7439 5.1315 5.3102 5.1376 6.1439 6e-3 0.85888-0.67407 1.6-10.506 11.443-5.782 5.7887-10.71 10.525-10.952 10.525s-0.51144-0.18833-0.59977-0.41852z" fill="#fff" stroke-width=".26458"/>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
assets/images/devices/msie.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Internet Explorer icon</title><path d="M22.8 7.381c1.125-2.7 1.2-4.95-.15-6.3-1.5-1.499-5.1-1.05-8.924.75h-.45c-2.7 0-5.324.976-7.274 2.7-1.65 1.5-2.85 3.45-3.375 5.625.375-.45 2.475-2.925 4.875-4.275.075 0 .675-.375.675-.375-.075 0-1.2 1.125-1.425 1.35-5.25 5.4-8.324 13.574-5.924 15.973 1.574 1.575 4.424 1.2 7.724-.6 1.425.675 3 .975 4.724.975 2.25 0 4.35-.6 6.15-1.8 1.874-1.2 3.224-3.074 4.05-5.249h-5.85c-.75 1.425-2.475 2.4-4.275 2.4-2.55 0-4.65-2.1-4.724-4.5V13.83h15.298v-.225c0-.375.075-.825.075-1.124 0-1.8-.45-3.525-1.2-5.1zM2.477 22.38c-1.2-1.2-.824-3.524.6-6.299.675 1.875 1.8 3.525 3.225 4.725.45.375.975.75 1.5 1.05-2.4 1.274-4.35 1.5-5.325.524zm15.374-11.398H8.702v-.075c.15-2.325 2.324-4.35 4.874-4.35 2.4 0 4.35 1.875 4.5 4.35v.075zm4.574-4.2c-.45-.75-1.05-1.5-1.725-2.1a11.213 11.213 0 0 0-3.6-2.25c2.4-1.124 4.425-1.274 5.475-.224.825.975.75 2.624-.15 4.574 0 .075 0 .075 0 0 0 .075 0 .075 0 0z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1015 B

1
assets/images/devices/opera.svg Normal file
View File

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Opera icon</title><path d="M8.051 5.238c-1.328 1.566-2.186 3.883-2.246 6.48v.564c.061 2.598.918 4.912 2.246 6.479 1.721 2.236 4.279 3.654 7.139 3.654 1.756 0 3.4-.537 4.807-1.471C17.879 22.846 15.074 24 12 24c-.192 0-.383-.004-.57-.014C5.064 23.689 0 18.436 0 12 0 5.371 5.373 0 12 0h.045c3.055.012 5.84 1.166 7.953 3.055-1.408-.93-3.051-1.471-4.81-1.471-2.858 0-5.417 1.42-7.14 3.654h.003zM24 12c0 3.556-1.545 6.748-4.002 8.945-3.078 1.5-5.946.451-6.896-.205 3.023-.664 5.307-4.32 5.307-8.74 0-4.422-2.283-8.075-5.307-8.74.949-.654 3.818-1.703 6.896-.205C22.455 5.25 24 8.445 24 12z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 683 B

1
assets/images/devices/other.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0z"/><path d="M3 6h18V4H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h4v-2H3V6zm10 6H9v1.78c-.61.55-1 1.33-1 2.22s.39 1.67 1 2.22V20h4v-1.78c.61-.55 1-1.34 1-2.22s-.39-1.67-1-2.22V12zm-2 5.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM22 8h-6c-.5 0-1 .5-1 1v10c0 .5.5 1 1 1h6c.5 0 1-.5 1-1V9c0-.5-.5-1-1-1zm-1 10h-4v-8h4v8z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 453 B

1
assets/images/devices/playstation.svg Normal file
View File

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>PlayStation icon</title><path d="M8.985 2.596v17.548l3.915 1.261V6.688c0-.69.304-1.151.794-.991.636.181.76.814.76 1.505v5.876c2.441 1.193 4.362-.002 4.362-3.153 0-3.237-1.126-4.675-4.438-5.827-1.307-.448-3.728-1.186-5.391-1.502h-.002zm4.656 16.242l6.296-2.275c.715-.258.826-.625.246-.818-.586-.192-1.637-.139-2.357.123l-4.205 1.499v-2.385l.24-.085s1.201-.42 2.913-.615c1.696-.18 3.785.029 5.437.661 1.848.601 2.041 1.472 1.576 2.072s-1.622 1.036-1.622 1.036l-8.544 3.107v-2.297l.02-.023zM1.808 18.6c-1.9-.545-2.214-1.668-1.352-2.321.801-.585 2.159-1.051 2.159-1.051l5.616-2.013v2.313L4.206 17c-.705.271-.825.632-.239.826.586.195 1.637.15 2.343-.12L8.248 17v2.074c-.121.029-.256.044-.391.073-1.938.331-3.995.196-6.037-.479l-.012-.068z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 833 B

1
assets/images/devices/safari.svg Normal file
View File

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>safari icon</title><path d="M12 24C5.373 24 0 18.627 0 12S5.373 0 12 0s12 5.373 12 12-5.373 12-12 12zm0-.75c6.213 0 11.25-5.037 11.25-11.25S18.213.75 12 .75.75 5.787.75 12 5.787 23.25 12 23.25zM12 2a.25.25 0 0 1 .25.25v1a.25.25 0 1 1-.5 0v-1A.25.25 0 0 1 12 2zm0 18.5a.25.25 0 0 1 .25.25v1a.25.25 0 1 1-.5 0v-1a.25.25 0 0 1 .25-.25zm7.071-15.571a.25.25 0 0 1 0 .353l-.707.708a.25.25 0 0 1-.354-.354l.708-.707a.25.25 0 0 1 .353 0zM5.99 18.01a.25.25 0 0 1 0 .354l-.708.707a.25.25 0 1 1-.353-.353l.707-.708a.25.25 0 0 1 .354 0zM4.929 4.93a.25.25 0 0 1 .353 0l.708.707a.25.25 0 0 1-.354.354l-.707-.708a.25.25 0 0 1 0-.353zM18.01 18.01a.25.25 0 0 1 .354 0l.707.708a.25.25 0 1 1-.353.353l-.708-.707a.25.25 0 0 1 0-.354zM2 12a.25.25 0 0 1 .25-.25h1a.25.25 0 1 1 0 .5h-1A.25.25 0 0 1 2 12zm18.5 0a.25.25 0 0 1 .25-.25h1a.25.25 0 1 1 0 .5h-1a.25.25 0 0 1-.25-.25zm-4.593-9.205a.25.25 0 0 1 .133.328l-.391.92a.25.25 0 1 1-.46-.195l.39-.92a.25.25 0 0 1 .328-.133zM8.68 19.825a.25.25 0 0 1 .132.327l-.39.92a.25.25 0 0 1-.46-.195l.39-.92a.25.25 0 0 1 .328-.133zM21.272 8.253a.25.25 0 0 1-.138.325l-.927.375a.25.25 0 1 1-.188-.464l.927-.374a.25.25 0 0 1 .326.138zm-17.153 6.93a.25.25 0 0 1-.138.326l-.927.374a.25.25 0 1 1-.188-.463l.927-.375a.25.25 0 0 1 .326.138zM8.254 2.728a.25.25 0 0 1 .325.138l.375.927a.25.25 0 0 1-.464.188l-.374-.927a.25.25 0 0 1 .138-.326zm6.93 17.153a.25.25 0 0 1 .326.138l.374.927a.25.25 0 1 1-.463.188l-.375-.927a.25.25 0 0 1 .138-.326zM2.795 8.093a.25.25 0 0 1 .328-.133l.92.391a.25.25 0 0 1-.195.46l-.92-.39a.25.25 0 0 1-.133-.328zm17.03 7.228a.25.25 0 0 1 .327-.132l.92.39a.25.25 0 1 1-.195.46l-.92-.39a.25.25 0 0 1-.133-.328zM12.879 12.879L11.12 11.12l-4.141 5.9 5.899-4.142zm6.192-7.95l-5.834 8.308-8.308 5.834 5.834-8.308 8.308-5.834z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.8 KiB

1
assets/images/devices/samsungtv.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 24 24"><title>Samsung icon</title><path d="M19.8166 10.2808l.0459 2.6934h-.023l-.7793-2.6934h-1.2837v3.3925h.8481l-.0458-2.785h.023l.8366 2.785h1.2264v-3.3925zm-16.149 0l-.6418 3.427h.9284l.4699-3.1175h.0229l.4585 3.1174h.9169l-.6304-3.4269zm5.1805 0l-.424 2.6132h-.023l-.424-2.6132H6.5788l-.0688 3.427h.8596l.023-3.0832h.0114l.573 3.0831h.8711l.5731-3.083h.023l.0228 3.083h.8596l-.0802-3.4269zm-7.2664 2.4527c.0343.0802.0229.1949.0114.2522-.0229.1146-.1031.2292-.3324.2292-.2177 0-.3438-.126-.3438-.3095v-.3323H0v.2636c0 .7679.6074.9971 1.2493.9971.6189 0 1.1346-.2178 1.2149-.7794.0458-.298.0114-.4928 0-.5616-.1605-.722-1.467-.9283-1.5588-1.3295-.0114-.0688-.0114-.1375 0-.1834.023-.1146.1032-.2292.3095-.2292.2063 0 .321.126.321.3095v.2063h.8595v-.2407c0-.745-.6762-.8596-1.1576-.8596-.6074 0-1.1117.2063-1.2034.7564-.023.149-.0344.2866.0114.4585.1376.7106 1.364.9169 1.5358 1.3524m11.152 0c.0343.0803.0228.1834.0114.2522-.023.1146-.1032.2292-.3324.2292-.2178 0-.3438-.126-.3438-.3095v-.3323h-.917v.2636c0 .7564.596.9857 1.2379.9857.6189 0 1.1232-.2063 1.2034-.7794.0459-.298.0115-.4814 0-.5616-.1375-.7106-1.4327-.9284-1.5243-1.318-.0115-.0688-.0115-.1376 0-.1835.0229-.1146.1031-.2292.3094-.2292.1948 0 .321.126.321.3095v.2063h.848v-.2407c0-.745-.6647-.8596-1.146-.8596-.6075 0-1.1004.1948-1.192.7564-.023.149-.023.2866.0114.4585.1376.7106 1.341.9054 1.513 1.3524m2.8882.4585c.2407 0 .3094-.1605.3323-.2522.0115-.0343.0115-.0917.0115-.126v-2.533h.871v2.4642c0 .0688 0 .1948-.0114.2292-.0573.6419-.5616.8482-1.192.8482-.6303 0-1.1346-.2063-1.192-.8482 0-.0344-.0114-.1604-.0114-.2292v-2.4642h.871v2.533c0 .0458 0 .0916.0115.126 0 .0917.0688.2522.3095.2522m7.1518-.0344c.2522 0 .3324-.1605.3553-.2522.0115-.0343.0115-.0917.0115-.126v-.4929h-.3553v-.5043H24v.917c0 .0687 0 .1145-.0115.2292-.0573.6303-.596.8481-1.2034.8481-.6075 0-1.1461-.2178-1.2034-.8481-.0115-.1147-.0115-.1605-.0115-.2293v-1.444c0-.0574.0115-.172.0115-.2293.0802-.6419.596-.8482 1.2034-.8482s1.1347.2063 1.2034.8482c.0115.1031.0115.2292.0115.2292v.1146h-.8596v-.1948s0-.0803-.0115-.1261c-.0114-.0802-.0802-.2521-.3438-.2521-.2521 0-.321.1604-.3438.2521-.0115.0458-.0115.1032-.0115.1605v1.5702c0 .0458 0 .0916.0115.126 0 .0917.0917.2522.3323.2522" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

1
assets/images/devices/windows.svg Normal file
View File

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Windows icon</title><path d="M0 3.449L9.75 2.1v9.451H0m10.949-9.602L24 0v11.4H10.949M0 12.6h9.75v9.451L0 20.699M10.949 12.6H24V24l-12.9-1.801" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 241 B

1
assets/images/devices/xbox.svg Normal file
View File

@ -0,0 +1 @@
<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><title>Xbox icon</title><path d="M4.102 21.033C6.211 22.881 8.977 24 12 24c3.026 0 5.789-1.119 7.902-2.967 1.877-1.912-4.316-8.709-7.902-11.417-3.582 2.708-9.779 9.505-7.898 11.417zm11.16-14.406c2.5 2.961 7.484 10.313 6.076 12.912C23.002 17.48 24 14.861 24 12.004c0-3.34-1.365-6.362-3.57-8.536 0 0-.027-.022-.082-.042-.063-.022-.152-.045-.281-.045-.592 0-1.985.434-4.805 3.246zM3.654 3.426c-.057.02-.082.041-.086.042C1.365 5.642 0 8.664 0 12.004c0 2.854.998 5.473 2.661 7.533-1.401-2.605 3.579-9.951 6.08-12.91-2.82-2.813-4.216-3.245-4.806-3.245-.131 0-.223.021-.281.046v-.002zM12 3.551S9.055 1.828 6.755 1.746c-.903-.033-1.454.295-1.521.339C7.379.646 9.659 0 11.984 0H12c2.334 0 4.605.646 6.766 2.085-.068-.046-.615-.372-1.52-.339C14.946 1.828 12 3.545 12 3.545v.006z" fill="#fff"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 861 B

41
components/UserButton.vue
View File

@ -17,8 +17,8 @@
</template>
<v-list dense>
<v-list-item
v-for="(item, index) in menuItems"
:key="index"
v-for="(item, index) in bottomMenuItems"
:key="`bottomMenuItems-${index}`"
@click="item.action"
>
<v-list-item-title>{{ item.title }}</v-list-item-title>
@ -35,7 +35,7 @@ export default Vue.extend({
data() {
return {
avatarSize: 48,
menuItems: [
bottomMenuItems: [
{
title: this.$t('logout'),
action: () => {
@ -48,11 +48,36 @@ export default Vue.extend({
};
},
computed: {
userImage(): string {
if (this.$auth.user?.PrimaryImageTag) {
return `${this.$axios.defaults.baseURL}/Users/${this.$auth.user.Id}/Images/Primary/?tag=${this.$auth.user.PrimaryImageTag}&maxWidth=${this.avatarSize}`;
} else {
return '';
menuItems: {
get() {
const items = [
{
title: this.$t('accountSettings'),
action: () => {
this.$router.push('/user/account');
}
}
];
if (this.$auth.user.Policy.IsAdministrator) {
items.push({
title: this.$t('serverDashboard'),
action: () => {
this.$router.push('/admin');
}
});
}
return items;
}
},
userImage: {
get() {
if (this.$auth.user?.PrimaryImageTag) {
return `${this.$axios.defaults.baseURL}/Users/${this.$auth.user.Id}/Images/Primary/?tag=${this.$auth.user.PrimaryImageTag}&maxWidth=36`;
} else {
return '';
}
}
}
},

8
layouts/default.vue
View File

@ -30,7 +30,7 @@
</v-list-item>
<v-subheader>{{ $t('libraries') }}</v-subheader>
<v-list-item
v-for="library in libraries"
v-for="library in getNavigationDrawerItems"
:key="library.Id"
:to="library.to"
router
@ -113,7 +113,7 @@
<script lang="ts">
import Vue from 'vue';
import { mapActions, mapState } from 'vuex';
import { mapActions, mapGetters, mapState } from 'vuex';
export default Vue.extend({
data() {
@ -124,6 +124,7 @@ export default Vue.extend({
},
computed: {
...mapState('page', ['opaqueAppBar']),
...mapGetters('userViews', ['getNavigationDrawerItems']),
items() {
return [
{
@ -133,9 +134,6 @@ export default Vue.extend({
}
];
},
libraries() {
return this.$store.getters['userViews/getNavigationDrawerItems'];
},
configItems() {
return [
{

1
locales/en-US.json
View File

@ -73,6 +73,7 @@
"serverAddress": "Server address",
"serverAddressMustBeUrl": "Server address must be a valid address",
"serverAddressRequired": "Server address is required",
"serverDashboard": "Server dashboard",
"serverNotFound": "Server not found",
"serverVersionTooLow": "Server version needs to be 10.7.0 or higher",
"settings": "Settings",

294
pages/settings/index.vue Normal file
View File

@ -0,0 +1,294 @@
<template>
<v-container>
<v-row>
<v-col cols="12" offset-md="1" md="4" class="pt-0 pb-4">
<v-card
v-if="!isEmpty(systemInfo) && $auth.user.Policy.IsAdministrator"
:class="{ 'mb-4': !$vuetify.breakpoint.mobile }"
>
<v-card-text>
<v-row>
<v-col>
<v-row>
<v-col cols="5" class="pt-0 pb-0">
<span>Server</span>
</v-col>
<v-col class="pt-0 pb-0">
<span>{{ systemInfo.ServerName }}</span>
</v-col>
</v-row>
<v-row>
<v-col cols="5" class="pt-0 pb-0">
<span>Version</span>
</v-col>
<v-col class="pt-0 pb-0">
<span>{{ systemInfo.Version }}</span>
</v-col>
</v-row>
<v-row>
<v-col cols="5" class="pt-0 pb-0">
<span>Operating system</span>
</v-col>
<v-col class="pt-0 pb-0">
<span>{{ systemInfo.OperatingSystemDisplayName }}</span>
</v-col>
</v-row>
<v-row>
<v-col cols="5" class="pt-0 pb-0">
<span>Architecture</span>
</v-col>
<v-col class="pt-0 pb-0">
<span>{{ systemInfo.SystemArchitecture }}</span>
</v-col>
</v-row>
</v-col>
<v-col cols="3" class="d-flex justify-end">
<v-avatar tile size="96" color="grey">
<v-icon>mdi-server</v-icon>
</v-avatar>
</v-col>
</v-row>
</v-card-text>
</v-card>
<v-card v-if="!$vuetify.breakpoint.mobile">
<v-card-text>
<v-row>
<v-col>
<p class="mb-0">
This server is powered by
<a href="https://jellyfin.org/">Jellyfin</a>
<br />
Read the
<a href="https://jellyfin.org/docs/">documentation</a>
<br />
Help
<a href="https://translate.jellyfin.org"
>translate Jellyfin</a
>
in your language
<br />
<a href="https://github.com/jellyfin/jellyfin-vue/issues/new">
Report an issue
</a>
with the Vue client
</p>
</v-col>
<v-col cols="3" class="d-flex justify-end">
<img src="~/static/icon.png" />
</v-col>
</v-row>
</v-card-text>
</v-card>
</v-col>
<v-col
cols="12"
:offset-md="isEmpty(systemInfo) ? 5 : 0"
md="5"
class="pt-0 pb-4"
>
<!-- User settings -->
<v-list two-line class="mb-4">
<v-list-item-group>
<v-list-item v-for="userItem in userItems" :key="userItem.name">
<v-list-item-avatar>
<v-icon v-text="userItem.icon" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="userItem.name" />
<v-list-item-subtitle v-text="userItem.description" />
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-chevron-right</v-icon>
</v-list-item-action>
</v-list-item>
</v-list-item-group>
</v-list>
<!-- Administrator settings -->
<v-list v-if="$auth.user.Policy.IsAdministrator" two-line class="mb-4">
<v-list-item-group>
<v-list-item v-for="adminItem in adminItems" :key="adminItem.name">
<v-list-item-avatar>
<v-icon v-text="adminItem.icon" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="adminItem.name" />
<v-list-item-subtitle v-text="adminItem.description" />
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-chevron-right</v-icon>
</v-list-item-action>
</v-list-item>
</v-list-item-group>
</v-list>
<!-- Mobile links -->
<v-list v-if="$vuetify.breakpoint.mobile">
<v-list-item-group>
<v-list-item
v-for="linkItem in linkItems"
:key="linkItem.name"
:href="linkItem.link"
>
<v-list-item-avatar>
<v-icon v-text="linkItem.icon" />
</v-list-item-avatar>
<v-list-item-content>
<v-list-item-title v-text="linkItem.name" />
</v-list-item-content>
<v-list-item-action>
<v-icon>mdi-chevron-right</v-icon>
</v-list-item-action>
</v-list-item>
</v-list-item-group>
</v-list>
</v-col>
</v-row>
</v-container>
</template>
<script lang="ts">
import { isEmpty } from 'lodash';
import Vue from 'vue';
import { mapActions } from 'vuex';
import { SystemInfo } from '~/api';
export default Vue.extend({
data() {
return {
systemInfo: {} as SystemInfo,
userItems: [
{
icon: 'mdi-account',
name: 'Account',
description: "Edit your user's information"
},
{
icon: 'mdi-home',
name: 'Home screen',
description: 'Configure your home sections and home screen layout'
},
{
icon: 'mdi-play-pause',
name: 'Playback',
description: 'Edit your playback preferences for this device'
},
{
icon: 'mdi-disc-player',
name: 'Media players',
description: 'Configure how the media players behave for this device'
},
{
icon: 'mdi-subtitles',
name: 'Subtitles',
description: 'Control how subtitles are displayed on this device'
}
],
adminItems: [
{
icon: 'mdi-server',
name: 'Server',
description: "Configure your server's language and branding"
},
{
icon: 'mdi-devices',
name: 'Devices',
description: 'See and manage the devices connected to your server'
},
{
icon: 'mdi-account-multiple',
name: 'Users',
description: 'Manage your users and their permissions'
},
{
icon: 'mdi-library-shelves',
name: 'Libraries',
description: 'Manage your libraries and their metadata'
},
{
icon: 'mdi-play-network',
name: 'Transcoding & streaming',
description:
'Manage how your server handles transcoding and streaming to clients'
},
{
icon: 'mdi-dlna',
name: 'DLNA',
description: 'Configure DLNA settings and profiles'
},
{
icon: 'mdi-television-classic',
name: 'Live TV & DVR',
description:
'Manage your TV tuners, guide data providers and DVR settings'
},
{
icon: 'mdi-network',
name: 'Networking',
description: 'Manage the network settings of your server'
},
{
icon: 'mdi-puzzle',
name: 'Plugins',
description: 'Add and configure new features for your server'
},
{
icon: 'mdi-key-chain',
name: 'API keys',
description:
'Add and revoke API keys for external access to your server'
},
{
icon: 'mdi-calendar-clock',
name: 'Scheduled tasks',
description: 'Manage scheduled tasks running on your server'
},
{
icon: 'mdi-bell',
name: 'Notifications',
description: 'Manage and configure notification sent by your server'
},
{
icon: 'mdi-text-box',
name: 'Logs',
description: 'Read and search server logs'
}
],
linkItems: [
{
icon: 'mdi-rocket-launch',
name: 'This server is powered by Jellyfin',
link: 'https://jellyfin.org/'
},
{
icon: 'mdi-book',
name: 'Read the documentation',
link: 'https://jellyfin.org/docs/'
},
{
icon: 'mdi-translate',
name: 'Help translate Jellyfin in your language',
link: 'https://translate.jellyfin.org'
},
{
icon: 'mdi-bug',
name: 'Report an issue with the Vue client',
link: 'https://github.com/jellyfin/jellyfin-vue/issues/new'
}
]
};
},
async beforeMount() {
this.setAppBarOpacity({ opaqueAppBar: true });
this.setPageTitle({ title: this.$t('settings') });
if (this.$auth.user.Policy.IsAdministrator) {
this.systemInfo = (await this.$api.system.getSystemInfo()).data;
}
},
methods: {
...mapActions('page', ['setPageTitle', 'setAppBarOpacity']),
isEmpty(object: any): boolean {
return isEmpty(object);
}
}
});
</script>

2
store/page.ts
View File

@ -7,7 +7,7 @@ export interface PageState {
export const state = (): PageState => ({
title: 'Jellyfin',
opaqueAppBar: false
opaqueAppBar: true
});
interface TitleMutationPayload {

1
tsconfig.json
View File

@ -24,6 +24,7 @@
"@nuxtjs/vuetify",
"@nuxtjs/date-fns",
"nuxt-i18n",
"@nuxtjs/date-fns",
"jest"
]
},