From 4d4fb4b4e9720675855c3243e88f2d990eded0af Mon Sep 17 00:00:00 2001
From: Artem Anufrij <artem.anufrij@live.de>
Date: Thu, 16 Feb 2023 23:59:01 +0100
Subject: [PATCH] finisch sharing functionality

---
 public/static/style.css                | 326 +++++++++++++++++++++----
 src/App.vue                            |   2 +-
 src/components/AlbumContent.vue        |  72 ++++++
 src/components/BoxContent.vue          |  78 ++++++
 src/components/Player.vue              |  36 ++-
 src/components/dialogs/AlbumViewer.vue |  21 +-
 src/components/dialogs/BoxViewer.vue   |  19 +-
 src/components/dialogs/VideoScreen.vue |   6 +
 src/store/modules/albums/actions.js    |   7 +-
 src/store/modules/boxes/actions.js     |   7 +-
 src/store/modules/share/actions.js     |  23 +-
 src/store/modules/videos/actions.js    |   2 +-
 src/views/Share.vue                    |  78 +++---
 13 files changed, 567 insertions(+), 110 deletions(-)
 create mode 100644 src/components/AlbumContent.vue
 create mode 100644 src/components/BoxContent.vue

diff --git a/public/static/style.css b/public/static/style.css
index 1b73352..34cb537 100644
--- a/public/static/style.css
+++ b/public/static/style.css
@@ -99,27 +99,35 @@ a {
 .primary-text {
   color: var(--primary);
 }
+
 .success-text {
   color: var(--success);
 }
+
 .blue-text {
   color: var(--blue);
 }
+
 .green-text {
   color: var(--green);
 }
+
 .gray-text {
   color: var(--light-gray);
 }
+
 .darkgray-text {
   color: var(--dark-gray);
 }
+
 .danger-text {
   color: var(--danger);
 }
+
 .white-text {
   color: var(--white);
 }
+
 .bold {
   font-weight: bold;
 }
@@ -134,42 +142,51 @@ input {
   border-color: var(--light-border);
   padding: 2px;
 }
+
 input[type="text"].h1,
 input[type="number"].h1,
 input[type="search"].h1 {
   font-size: 32px;
 }
+
 input[type="text"].h2,
 input[type="number"].h2,
 input[type="search"].h2 {
   font-size: 26px;
 }
+
 input[type="text"].h3,
 input[type="number"].h3,
 input[type="search"].h3 {
   font-size: 22px;
 }
+
 input[type="text"].h4,
 input[type="number"].h4,
 input[type="search"].h4 {
   font-size: 18px;
 }
+
 input[type="text"].h5,
 input[type="number"].h5,
 input[type="search"].h5 {
   font-size: 16px;
 }
+
 input[type="text"].h6,
 input[type="number"].h6,
 input[type="search"].h6 {
   font-size: 14px;
 }
+
 input:invalid {
   border-color: var(--danger);
 }
+
 input:read-only:not([type="range"]) {
   background-color: transparent !important;
 }
+
 input.borderless {
   border: none;
 }
@@ -177,16 +194,20 @@ input.borderless {
 div.blue-25 {
   background: var(--blue25);
 }
+
 div.green-25 {
   background: var(--green25);
 }
+
 div.red-25 {
   background: var(--red25);
 }
+
 div.selected {
   background-color: var(--selected);
   color: var(--white);
 }
+
 div.selectable svg.selectable {
   cursor: pointer;
 }
@@ -198,9 +219,11 @@ button {
   display: flex;
   align-items: center;
 }
+
 button:disabled * {
   opacity: 0.5;
 }
+
 button:not(:disabled) {
   cursor: pointer;
 }
@@ -211,6 +234,7 @@ select:focus,
 textarea:focus {
   outline: none;
 }
+
 button:focus {
   border-color: var(--focused-border);
 }
@@ -219,6 +243,7 @@ button:focus {
   display: flex;
   flex-direction: column;
 }
+
 #app-body {
   display: flex;
   flex-direction: column;
@@ -241,28 +266,34 @@ header {
   background-color: var(--dark);
   display: flex;
 }
-header > div,
-nav > div {
+
+header>div,
+nav>div {
   flex-grow: 1;
   display: flex;
   justify-content: center;
 }
-nav.right > div,
-nav.left > div {
+
+nav.right>div,
+nav.left>div {
   flex-direction: column;
 }
-header > div:first-child,
-nav > div:first-child {
+
+header>div:first-child,
+nav>div:first-child {
   flex-grow: 0;
 }
-header > div:last-child,
-nav > div:last-child {
+
+header>div:last-child,
+nav>div:last-child {
   flex-grow: 0;
 }
+
 header .margin {
   margin: 4px;
 }
-header .margin > *:not(:last-child) {
+
+header .margin>*:not(:last-child) {
   margin-right: 4px;
 }
 
@@ -289,10 +320,12 @@ nav {
   border-bottom: 1px solid var(--light-border);
   animation: slideToTop normal 0.25s;
 }
+
 nav.slideOverTop {
   margin-top: -47px;
   animation: slideOverTop ease 0.5s;
 }
+
 nav.right,
 nav.left {
   flex-direction: column;
@@ -300,14 +333,16 @@ nav.left {
   box-shadow: none;
   border-bottom: 0;
 }
+
 nav label {
   display: flex;
   align-items: center;
   padding: 0 12px;
 }
-nav > div > button,
+
+nav>div>button,
 nav .dropdown-activator button,
-nav > div > a {
+nav>div>a {
   padding: 11px 12px;
   font-size: 1rem;
   display: flex;
@@ -317,17 +352,21 @@ nav > div > a {
   border-radius: 0;
   flex-grow: 1;
 }
+
 nav a.clear {
   padding: 0;
 }
+
 nav.right button,
 nav.right a {
   background-color: var(--nav-secondary);
   color: var(--white);
 }
+
 nav.right button.danger {
   color: var(--danger);
 }
+
 nav.right button.primary {
   color: var(--primary);
 }
@@ -340,19 +379,17 @@ nav a img {
   height: 24px !important;
 }
 
-nav button > span,
-nav a > span {
+nav button>span,
+nav a>span {
   margin-left: 12px;
 }
 
-nav:not(.right)
-  button:hover:not(.selected):not(.secondary):not(.primary):not(:disabled),
+nav:not(.right) button:hover:not(.selected):not(.secondary):not(.primary):not(:disabled),
 nav:not(.right) a:hover:not(.router-link-active):not(.primary):not(.secondary) {
   background-color: var(--nav-button-hover);
 }
 
-nav.right
-  button:hover:not(.selected):not(.primary):not(.secondary):not(:disabled),
+nav.right button:hover:not(.selected):not(.primary):not(.secondary):not(:disabled),
 nav.right a:hover:not(.selected):not(.primary):not(.secondary) {
   background-color: var(--nav-secondary-button-hover);
 }
@@ -363,38 +400,41 @@ nav input {
   border: 0;
   background-color: var(--white);
 }
+
 nav input {
   padding: 0 12px;
   width: 204px;
   min-width: 0px;
 }
 
-nav > div > img,
-nav > div > a.clear > img {
+nav>div>img,
+nav>div>a.clear>img {
   height: 46px;
   width: auto;
 }
 
-nav:not(.right):not(.left) > button,
-nav:not(.right):not(.left) > div:first-child > button,
-nav:not(.right):not(.left) > div:first-child > a,
-nav:not(.right):not(.left) > div:first-child > input,
-nav:not(.right):not(.left) > div:first-child > img,
-nav:not(.right):not(.left) > button:hover,
-nav:not(.right):not(.left) > button:focus,
-nav:not(.right):not(.left) > div:first-child > button:hover,
-nav:not(.right):not(.left) > div:first-child > a:hover {
+nav:not(.right):not(.left)>button,
+nav:not(.right):not(.left)>div:first-child>button,
+nav:not(.right):not(.left)>div:first-child>a,
+nav:not(.right):not(.left)>div:first-child>input,
+nav:not(.right):not(.left)>div:first-child>img,
+nav:not(.right):not(.left)>button:hover,
+nav:not(.right):not(.left)>button:focus,
+nav:not(.right):not(.left)>div:first-child>button:hover,
+nav:not(.right):not(.left)>div:first-child>a:hover {
   border-right: 1px solid var(--light-border);
 }
-nav:not(.right):not(.left) > div:last-child > button,
-nav:not(.right):not(.left) > div:last-child .dropdown-activator > button,
-nav:not(.right):not(.left) > div:last-child > a,
-nav:not(.right):not(.left) > div:last-child > select,
-nav:not(.right):not(.left) > div:last-child > input,
-nav:not(.right):not(.left) > div:last-child > button:hover,
-nav:not(.right):not(.left) > div:last-child > a:hover {
+
+nav:not(.right):not(.left)>div:last-child>button,
+nav:not(.right):not(.left)>div:last-child .dropdown-activator>button,
+nav:not(.right):not(.left)>div:last-child>a,
+nav:not(.right):not(.left)>div:last-child>select,
+nav:not(.right):not(.left)>div:last-child>input,
+nav:not(.right):not(.left)>div:last-child>button:hover,
+nav:not(.right):not(.left)>div:last-child>a:hover {
   border-left: 1px solid var(--light-border);
 }
+
 nav .router-link-active:not(.clear),
 nav .selected {
   background-color: var(--nav-button-selected);
@@ -417,53 +457,64 @@ button.flat {
   background-color: transparent !important;
   border: none;
 }
+
 button.red,
 label.red {
   background-color: var(--red);
   color: var(--white);
 }
+
 button.red50,
 label.red50 {
   background-color: var(--red50) !important;
   border-color: var(--red);
 }
+
 button.blue,
 label.blue {
   background-color: var(--blue) !important;
   color: var(--white);
 }
+
 button.blue-border {
   background-color: transparent !important;
   border: 1px solid var(--blue);
   color: var(--blue);
 }
+
 button.green,
 label.green {
   background-color: var(--green) !important;
   color: var(--white);
 }
+
 button.gray,
 label.gray {
   background-color: var(--gray) !important;
   color: var(--white);
 }
+
 button.gray-border {
   background-color: transparent !important;
   border: 1px solid var(--gray);
   color: var(--gray);
 }
+
 button.yellow,
 label.yellow {
   background-color: var(--yellow) !important;
 }
+
 button.yellow50,
 label.yellow50 {
   background-color: var(--yellow50) !important;
   border-color: var(--yellow);
 }
+
 button.medium {
   padding: 8px;
 }
+
 button.large {
   padding: 12px;
 }
@@ -478,22 +529,26 @@ button.primary-border {
   border: 1px solid var(--primary);
   color: var(--primary);
 }
+
 button.primary-border:hover:not(:disabled) {
   background-color: var(--primary) !important;
   color: var(--white);
 }
+
 button.primary,
 a.primary {
   background-color: var(--primary) !important;
   border-color: var(--primary);
   color: var(--white);
 }
+
 button.primary:hover:not(:disabled),
 a.primary:hover:not(:disabled) {
   background-color: transparent !important;
   border-color: var(--primary);
   color: var(--primary);
 }
+
 button.primary:hover:not(:disabled) *,
 a.primary:hover:not(:disabled) * {
   color: var(--primary);
@@ -507,14 +562,17 @@ button.secondary-border {
   border: 1px solid var(--secondary);
   color: var(--secondary);
 }
+
 button.secondary-border:hover:not(:disabled) {
   background-color: var(--secondary) !important;
   color: var(--secondary);
 }
+
 button.secondary {
   background-color: var(--secondary) !important;
   border-color: var(--secondary);
 }
+
 button.secondary:hover:not(:disabled) {
   background-color: transparent !important;
   border-color: var(--secondary);
@@ -530,17 +588,20 @@ button.accept-border {
   border: 1px solid var(--green);
   color: var(--green);
 }
+
 button.success-border:hover:not(:disabled),
 button.accept-border:hover:not(:disabled) {
   background-color: var(--green);
   color: var(--white);
 }
+
 button.success,
 button.accept {
   background-color: var(--green);
   border-color: var(--green);
   color: var(--white);
 }
+
 button.success:hover:not(:disabled),
 button.accept:hover:not(:disabled) {
   background-color: transparent;
@@ -556,18 +617,22 @@ button.danger-border {
   border: 1px solid var(--danger);
   color: var(--danger);
 }
+
 button.danger-border:hover:not(:disabled) {
   background-color: var(--danger) !important;
   color: var(--white);
 }
+
 button.danger {
   background-color: var(--danger);
   border-color: var(--danger);
   color: var(--white);
 }
+
 button.danger svg {
   color: var(--danger);
 }
+
 button.danger:hover:not(:disabled) {
   background-color: transparent;
   border-color: var(--danger);
@@ -582,15 +647,18 @@ button.warning-border {
   border: 1px solid var(--orange);
   color: var(--orange);
 }
+
 button.warning-border:hover:not(:disabled) {
   background-color: var(--orange) !important;
   color: var(--white);
 }
+
 button.warning {
   background-color: var(--orange) !important;
   border-color: var(--orange);
   color: var(--white);
 }
+
 button.warning:hover:not(:disabled) {
   background-color: transparent !important;
   border-color: var(--orange);
@@ -605,15 +673,18 @@ button.info-border {
   border: 1px solid var(--indigo);
   color: var(--indigo);
 }
+
 button.info-border:hover:not(:disabled) {
   background-color: var(--indigo) !important;
   color: var(--white);
 }
+
 button.info {
   background-color: var(--indigo) !important;
   border-color: var(--indigo);
   color: var(--white);
 }
+
 button.info:hover:not(:disabled) {
   background-color: transparent !important;
   border-color: var(--indigo);
@@ -628,15 +699,18 @@ button.light-border {
   border: 1px solid var(--light-gray);
   color: var(--light-gray);
 }
+
 button.light-border:hover:not(:disabled) {
   background-color: var(--light-gray) !important;
   color: var(--white);
 }
+
 button.light {
   background-color: var(--light-gray) !important;
   border-color: var(--light-gray);
   color: var(--white);
 }
+
 button.light:hover:not(:disabled) {
   background-color: transparent !important;
   border-color: var(--light-gray);
@@ -651,15 +725,18 @@ button.dark-border {
   border: 1px solid var(--gray);
   color: var(--gray);
 }
+
 button.dark-border:hover:not(:disabled) {
   background-color: var(--gray) !important;
   color: var(--white);
 }
+
 button.dark {
   background-color: var(--gray) !important;
   border-color: var(--gray);
   color: var(--white);
 }
+
 button.dark:hover:not(:disabled) {
   background-color: transparent !important;
   border-color: var(--gray);
@@ -670,30 +747,39 @@ svg.danger,
 svg.error {
   color: var(--danger);
 }
+
 svg.success {
   color: var(--success);
 }
+
 svg.warning {
   color: var(--yellow);
 }
+
 svg.blue {
   color: var(--blue);
 }
+
 svg.red {
   color: var(--red);
 }
+
 svg.green {
   color: var(--green);
 }
+
 svg.orange {
   color: var(--orange);
 }
+
 svg.gray {
   color: var(--gray);
 }
+
 svg.light-gray {
   color: var(--light-gray);
 }
+
 svg.yellow {
   color: var(--yellow);
 }
@@ -703,25 +789,31 @@ ul {
   padding: 0;
   overflow-y: auto;
 }
+
 ul.navigation {
   border-right: 1px solid var(--light-border);
   flex-shrink: 0;
 }
+
 ul.navigation li {
   padding: 8px;
   cursor: pointer;
 }
+
 ul.navigation li:hover:not(.selected) {
   background-color: var(--selected25);
 }
+
 li {
   list-style: none;
 }
+
 li.selected,
 li.active {
   background-color: var(--selected);
   color: var(--white);
 }
+
 li.selected label {
   color: var(--white);
 }
@@ -735,16 +827,20 @@ table {
   width: 100%;
   border-collapse: collapse;
 }
+
 table.lined tr {
   border-bottom: 1px solid var(--light-border);
 }
+
 table.border {
   border: 1px solid var(--light-border);
 }
+
 table.lined td:not(:first-child),
 table.lined th:not(:first-child) {
   border-left: 1px solid var(--light-border);
 }
+
 table.lined th,
 table.lined td,
 table.padding th,
@@ -757,6 +853,7 @@ tr.medium td {
   padding: 4px;
   font-size: 14px;
 }
+
 tr.thin th {
   font-weight: normal;
 }
@@ -765,21 +862,25 @@ td {
   margin: 0;
   padding: 0;
 }
+
 tr.nav,
 th.nav,
 td.nav {
   background-color: var(--nav);
 }
+
 tr.red,
 th.red,
 td.red {
   background-color: var(--red25);
 }
+
 tr.green,
 th.green,
 td.green {
   background-color: var(--green25);
 }
+
 tr.blue,
 th.blue,
 td.blue {
@@ -793,24 +894,29 @@ tr.gray {
 td.pointer {
   cursor: pointer;
 }
+
 th.right,
 td.right,
 a.right {
   text-align: right;
   justify-content: flex-end;
 }
+
 th.center,
 td.center {
   text-align: center;
 }
+
 th.left,
 td.left {
   text-align: left;
 }
+
 th.slim,
 td.slim {
   width: 1px;
 }
+
 th.strech,
 td.strech {
   width: 100%;
@@ -823,11 +929,13 @@ td.strech {
   position: relative;
   display: flex;
 }
+
 .dropdown-activator {
   display: flex;
   cursor: pointer;
   flex-grow: 1;
 }
+
 .dropdown-content {
   border-radius: 2px;
   position: fixed;
@@ -840,22 +948,26 @@ td.strech {
   max-height: 50%;
   overflow: auto;
 }
+
 .dropdown-content button {
   border: 0;
   width: 100%;
   white-space: nowrap;
   padding: 8px;
 }
+
 .dropdown-content button:hover {
   background-color: var(--white);
   border: 0;
 }
-.dropdown-content button > svg {
+
+.dropdown-content button>svg {
   margin-right: 8px;
   color: var(--dark);
   width: 16px !important;
   height: 16px;
 }
+
 .dropdown-background {
   position: fixed;
   background-color: #00000000;
@@ -874,17 +986,20 @@ td.strech {
   position: absolute;
   z-index: 1500;
 }
+
 .popup-background.bottom {
   flex-direction: column;
   align-items: center;
   bottom: 0;
   width: 100%;
 }
+
 .popup-background.bottom .popup-window {
   border-bottom: 0;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
 }
+
 .popup-window {
   background-color: var(--dark);
   border: 1px solid var(--dark-border);
@@ -908,42 +1023,51 @@ td.strech {
   color: var(--neutral-gray);
   position: relative;
 }
-#message-screen > div {
+
+#message-screen>div {
   max-height: 90%;
   display: flex;
   flex-direction: column;
 }
+
 #message-screen-logo {
   width: 140px;
   position: absolute;
   top: 12px;
   right: 12px;
 }
+
 #message-screen-header {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
 }
+
 #message-screen-header svg,
 #message-screen-header img {
   margin-right: 24px;
   height: 64px;
   width: 64px;
 }
+
 #message-screen-header h1 {
   margin-top: 0;
 }
+
 #message-screen-header h1,
 #message-screen-header h2 {
   font-weight: 200;
 }
+
 #message-screen-body {
   overflow-y: auto;
 }
+
 #message-screen-body .margin-image {
   margin-left: 88px;
 }
+
 .message-screen-command {
   display: flex;
   align-items: center;
@@ -951,24 +1075,29 @@ td.strech {
   padding: 4px;
   margin-top: 12px;
 }
+
 .message-screen-command:hover {
   background-color: var(--nav);
   border: 1px solid var(--nav-button-hover);
   cursor: pointer;
 }
+
 .message-screen-command h3 {
   margin: 0 0 4px 0;
 }
+
 .message-screen-command svg,
 .message-screen-command img {
   margin-right: 12px;
   height: 32px;
   width: 32px;
 }
+
 .message-screen-list li {
   cursor: pointer;
   padding: 8px 4px;
 }
+
 .message-screen-list li:hover {
   background-color: var(--nav);
 }
@@ -982,6 +1111,7 @@ td.strech {
   cursor: pointer;
   border-bottom: 1px solid var(--light-border);
 }
+
 .expander-header h3 {
   flex-grow: 1;
   margin: 0;
@@ -1004,32 +1134,39 @@ td.strech {
   display: flex;
   align-items: center;
 }
+
 .table-filter-title {
   flex-grow: 1;
   display: flex;
   align-items: center;
   margin-right: 4px;
 }
+
 .table-filter-title.sortable {
   cursor: pointer;
 }
+
 .table-filter-body {
   display: flex;
   flex-direction: column;
   padding: 4px;
 }
-.table-filter-body > button {
+
+.table-filter-body>button {
   justify-content: center;
   margin: 4px 0;
   background-color: var(--selected50);
 }
+
 .table-filter button.filtered {
   background-color: var(--selected);
 }
+
 .table-filter svg.filtered {
   color: var(--selected);
 }
-.table-filter > svg {
+
+.table-filter>svg {
   margin-right: 4px;
 }
 
@@ -1043,6 +1180,7 @@ td.strech {
   align-items: stretch;
   min-width: 180px;
 }
+
 .sticker-icon {
   border-top-left-radius: 4px;
   border-bottom-left-radius: 4px;
@@ -1050,23 +1188,27 @@ td.strech {
   display: flex;
   align-items: center;
 }
+
 .sticker-text {
   display: flex;
   flex-direction: column;
   padding: 0 12px;
   flex-grow: 1;
 }
+
 .sticker h3 {
   font-size: 2rem;
   font-weight: 200;
   margin: 0;
 }
+
 .sticker p {
   margin: 0;
   font-weight: bold;
   font-size: 1rem;
   text-align: right;
 }
+
 .sticker svg {
   width: 32px;
   height: 32px;
@@ -1126,6 +1268,7 @@ td.strech {
   display: flex;
   align-items: center;
 }
+
 .list-item:hover:not(.selected) {
   background-color: var(--selected25);
 }
@@ -1142,36 +1285,47 @@ td.strech {
 .snackbar.primary {
   background-color: var(--primary) !important;
 }
+
 .snackbar.secondary {
   background-color: var(--secondary) !important;
 }
+
 .snackbar.success {
   background-color: var(--success) !important;
 }
+
 .snackbar.info {
   background-color: var(--info) !important;
 }
+
 .snackbar.danger {
   background-color: var(--danger) !important;
 }
+
 .snackbar.blue {
   background-color: var(--blue) !important;
 }
+
 .snackbar.gray {
   background-color: var(--gray) !important;
 }
+
 .snackbar.green {
   background-color: var(--green) !important;
 }
+
 .snackbar.indigo {
   background-color: var(--indigo) !important;
 }
+
 .snackbar.orange {
   background-color: var(--orange) !important;
 }
+
 .snackbar.yellow {
   background-color: var(--yellow) !important;
 }
+
 .snackbar.white {
   background-color: var(--white) !important;
 }
@@ -1183,59 +1337,76 @@ td.strech {
   background-color: var(--selected);
   color: var(--white);
 }
+
 .card-header {
   border-bottom: 1px solid var(--light-border);
   font-size: larger;
 }
-.card-header > div,
-.card-footer > div {
+
+.card-header>div,
+.card-footer>div {
   display: flex;
   align-items: center;
   padding: 4px;
 }
-.card-header > .card-header-center,
-.card-footer > .card-footer-center {
+
+.card-header>.card-header-center,
+.card-footer>.card-footer-center {
   flex-grow: 1;
   justify-content: center;
   margin: 0 12px;
   text-align: center;
 }
+
 .card-body {
   flex-grow: 1;
 }
+
 .card-body-center {
   display: flex;
   flex-direction: column;
   overflow-y: auto;
   flex-grow: 1;
 }
+
 .card-footer {
   border-top: 1px solid var(--light-border);
 }
+
 .card-footer button svg {
   width: 16px;
   height: 16px;
 }
 
 /* MARGINs */
+.ma-off {
+  margin: 0px;
+}
+
 .ma-top {
   margin-top: 12px;
 }
+
 .ma-bottom {
   margin-bottom: 12px;
 }
+
 .ma-right {
   margin-right: 12px;
 }
+
 .ma-left {
   margin-left: 12px;
 }
+
 .ma-horizontal {
   margin: 0 12px;
 }
+
 .ma-vertical {
   margin: 12px 0;
 }
+
 .ma {
   margin: 12px;
 }
@@ -1243,21 +1414,27 @@ td.strech {
 .ma4-top {
   margin-top: 4px;
 }
+
 .ma4-bottom {
   margin-bottom: 4px;
 }
+
 .ma4-right {
   margin-right: 4px;
 }
+
 .ma4-left {
   margin-left: 4px;
 }
+
 .ma4-vertical {
   margin: 4px 0;
 }
+
 .ma4-horizontal {
   margin: 0 4px;
 }
+
 .ma4 {
   margin: 4px;
 }
@@ -1265,21 +1442,27 @@ td.strech {
 .ma8-top {
   margin-top: 8px;
 }
+
 .ma8-bottom {
   margin-bottom: 8px;
 }
+
 .ma8-right {
   margin-right: 8px;
 }
+
 .ma8-left {
   margin-left: 8px;
 }
+
 .ma8-vertical {
   margin: 8px 0;
 }
+
 .ma8-horizontal {
   margin: 0 8px;
 }
+
 .ma8 {
   margin: 8px;
 }
@@ -1287,21 +1470,27 @@ td.strech {
 .ma24-top {
   margin-top: 24px;
 }
+
 .ma24-bottom {
   margin-bottom: 24px;
 }
+
 .ma24-right {
   margin-right: 24px;
 }
+
 .ma24-left {
   margin-left: 24px;
 }
+
 .ma24-vertical {
   margin: 24px 0;
 }
+
 .ma24-horizontal {
   margin: 0 24px;
 }
+
 .ma24 {
   margin: 24px;
 }
@@ -1328,21 +1517,27 @@ td.strech {
 .pa {
   padding: 12px;
 }
+
 .pa-vertical {
   padding: 12px 0;
 }
+
 .pa-horizontal {
   padding: 0 12px;
 }
+
 .pa-left {
   padding-left: 12px;
 }
+
 .pa-right {
   padding-right: 12px;
 }
+
 .pa-top {
   padding-top: 12px;
 }
+
 .pa-bottom {
   padding-bottom: 12px;
 }
@@ -1350,21 +1545,27 @@ td.strech {
 .pa4 {
   padding: 4px;
 }
+
 .pa4-vertical {
   padding: 4px 0;
 }
+
 .pa4-horizontal {
   padding: 0 4px;
 }
+
 .pa4-left {
   padding-left: 4px;
 }
+
 .pa4-right {
   padding-right: 4px;
 }
+
 .pa4-top {
   padding-top: 4px;
 }
+
 .pa4-bottom {
   padding-bottom: 4px;
 }
@@ -1372,21 +1573,27 @@ td.strech {
 .pa8 {
   padding: 8px;
 }
+
 .pa8-vertical {
   padding: 8px 0;
 }
+
 .pa8-horizontal {
   padding: 0 8px;
 }
+
 .pa8-left {
   padding-left: 8px;
 }
+
 .pa8-right {
   padding-right: 8px;
 }
+
 .pa8-top {
   padding-top: 8px;
 }
+
 .pa8-bottom {
   padding-bottom: 8px;
 }
@@ -1394,21 +1601,27 @@ td.strech {
 .pa12 {
   padding: 12px;
 }
+
 .pa12-vertical {
   padding: 12px 0;
 }
+
 .pa12-horizontal {
   padding: 0 12px;
 }
+
 .pa12-left {
   padding-left: 12px;
 }
+
 .pa12-rigth {
   padding-right: 12px;
 }
+
 .pa12-top {
   padding-top: 12px;
 }
+
 .pa12-bottom {
   padding-bottom: 12px;
 }
@@ -1416,21 +1629,27 @@ td.strech {
 .pa24 {
   padding: 24px;
 }
+
 .pa24-vertical {
   padding: 24px 0;
 }
+
 .pa24-horizontal {
   padding: 0 24px;
 }
+
 .pa24-left {
   padding-left: 24px;
 }
+
 .pa24-rigth {
   padding-right: 24px;
 }
+
 .pa24-top {
   padding-top: 24px;
 }
+
 .pa24-bottom {
   padding-bottom: 24px;
 }
@@ -1438,15 +1657,19 @@ td.strech {
 .border {
   border: 1px solid var(--dark-border);
 }
+
 .border-top {
   border-top: 1px solid var(--light-border);
 }
+
 .border-left {
   border-left: 1px solid var(--light-border);
 }
+
 .border-bottom {
   border-bottom: 1px solid var(--light-border);
 }
+
 .border-right {
   border-right: 1px solid var(--light-border);
 }
@@ -1458,6 +1681,7 @@ td.strech {
   display: flex;
   flex-direction: row;
 }
+
 .flex-row.center-items,
 .flex-center {
   align-items: center;
@@ -1479,6 +1703,7 @@ td.strech {
   display: flex;
   flex-direction: column;
 }
+
 .overflow-y {
   overflow-y: auto;
 }
@@ -1491,9 +1716,11 @@ td.strech {
 .shadow {
   box-shadow: 0 1px 4px var(--shadow);
 }
+
 .shadow-text {
   text-shadow: 0 1px 4px var(--shadow);
 }
+
 .glow {
   box-shadow: 0 1px 4px var(--glow);
 }
@@ -1533,9 +1760,11 @@ td.strech {
     width: 10px;
     height: 10px;
   }
+
   ::-webkit-scrollbar-track {
     background: #80808020;
   }
+
   ::-webkit-scrollbar-thumb {
     background-color: var(--nav);
     border-radius: 4px;
@@ -1544,6 +1773,7 @@ td.strech {
 }
 
 @media (max-width: 840px) {
+
   nav button span,
   nav a span {
     display: none;
@@ -1554,22 +1784,28 @@ td.strech {
   .hideOnMobilePortrait {
     display: none !important;
   }
+
   .showOnMobilePortrait {
     display: flex !important;
   }
+
   nav input {
     width: 100%;
   }
 }
 
-@media (max-width: 480px), (max-height: 480px) {
+@media (max-width: 480px),
+(max-height: 480px) {
+
   nav button,
   nav a {
     padding: 7px 8px;
   }
+
   .hideOnMobile {
     display: none !important;
   }
+
   .showOnMobile {
     display: flex !important;
   }
@@ -1579,4 +1815,4 @@ td.strech {
   .hideOnMobileLandscape {
     display: none !important;
   }
-}
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index f80335f..184f415 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -245,7 +245,7 @@ export default {
     },
     login() {
       let hash = window.location.hash.replace("#/", "");
-      if (!hash.startsWith("login") && !hash.startsWith("setup")) {
+      if (!hash.startsWith("login") && !hash.startsWith("setup") && !hash.startsWith("share")) {
         let redirect = encodeURIComponent(hash);
         if (redirect) {
           this.$router.replace({
diff --git a/src/components/AlbumContent.vue b/src/components/AlbumContent.vue
new file mode 100644
index 0000000..ec04ead
--- /dev/null
+++ b/src/components/AlbumContent.vue
@@ -0,0 +1,72 @@
+<template>
+  <div id="content" class="flex-column">
+    <div class="flex-column ma-horizontal">
+      <h1>{{ album.title }}</h1>
+      <h2>{{ album.artist_name }}</h2>
+    </div>
+    <div id="tracks" class="flex-row border-top">
+      <div class="flex-column">
+        <img id="cover" class="shadow ma24" :src="cover" />
+        <p class="center ma-off hideOnMobile">
+          <b>{{ album.tracks.length }}</b> Tracks
+        </p>
+      </div>
+      <ul id="trackList" class="tracks">
+        <li v-for="track in album.tracks" :key="track._id">
+          <TrackItem :track="track" :showCover="false" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import TrackItem from "../components/Track";
+export default {
+  data() {
+    return {
+      album: {
+        covers: {},
+        tracks: [],
+      },
+    };
+  },
+  methods: {
+    show(album) {
+      this.album = album;
+    },
+  },
+  computed: {
+    cover() {
+      if (!this.album.covers) {
+        return "/static/icons/dummy/album.svg";
+      }
+      return this.album.covers.cover256;
+    },
+  },
+  components: {
+    TrackItem,
+  },
+};
+</script>
+
+<style scoped>
+#cover {
+  align-self: center;
+  width: 256px;
+}
+
+#content,
+#tracks {
+  overflow: auto;
+}
+
+@media (max-width: 480px) {
+  #tracks {
+    flex-direction: column;
+  }
+  #trackList {
+    border-top: 1px solid var(--light-border);
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/BoxContent.vue b/src/components/BoxContent.vue
new file mode 100644
index 0000000..f1bb414
--- /dev/null
+++ b/src/components/BoxContent.vue
@@ -0,0 +1,78 @@
+<template>
+  <div id="content" class="flex-column">
+    <div class="flex-column ma-horizontal">
+      <h1>{{ box.title }}</h1>
+    </div>
+    <div id="videos" class="flex-row border-top">
+      <div class="flex-column">
+        <img id="cover" class="shadow ma24" :src="cover" />
+        <p class="center ma-off hideOnMobile">
+          <b>{{ box.videos.length }}</b> Videos
+        </p>
+      </div>
+      <ul id="videoList" class="videos">
+        <li v-for="video in box.videos" :key="video._id">
+          <VideoItem :video="video" />
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+import VideoItem from "../components/Video.vue";
+export default {
+  data() {
+    return {
+      box: {
+        covers: {},
+        videos: [],
+      },
+    };
+  },
+  methods: {
+    show(box) {
+      this.box = box;
+    },
+  },
+  computed: {
+    cover() {
+      if (!this.box.covers) {
+        return "/static/icons/dummy/box.svg";
+      }
+      return this.box.covers.cover256;
+    },
+  },
+  components: {
+    VideoItem,
+  },
+};
+</script>
+
+<style scoped>
+#cover {
+  align-self: center;
+  width: 256px;
+}
+
+#content,
+#videos {
+  overflow: auto;
+}
+
+.video {
+  max-width: 256px;
+}
+
+@media (max-width: 480px) {
+  #videos {
+    flex-direction: column;
+  }
+  #videoList {
+    border-top: 1px solid var(--light-border);
+  }
+  .video {
+    max-width: inherit;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Player.vue b/src/components/Player.vue
index 94a0f1e..8ffd475 100644
--- a/src/components/Player.vue
+++ b/src/components/Player.vue
@@ -181,6 +181,13 @@ export default {
       this.audio.pause();
       this.audio.src = url;
 
+      this.pushHistoryItem();
+    },
+    pushHistoryItem() {
+      if (!this.currentUser._id) {
+        return;
+      }
+
       let item = {
         id: this.currentTrackParent._id,
         type: this.currentTrackParentType,
@@ -258,15 +265,17 @@ export default {
       }
     },
     gotoContainer() {
-      switch (this.selectedTrack.parentType) {
-        case "album":
-          this.$router.push("/albums?id=" + this.selectedTrack.parent._id);
-          break;
-        case "artist":
-          this.$router.push(
-            "/artists?id=" + this.selectedTrack.parent.parent._id
-          );
-          break;
+      if (this.currentUser._id) {
+        switch (this.selectedTrack.parentType) {
+          case "album":
+            this.$router.push("/albums?id=" + this.selectedTrack.parent._id);
+            break;
+          case "artist":
+            this.$router.push(
+              "/artists?id=" + this.selectedTrack.parent.parent._id
+            );
+            break;
+        }
       }
     },
     switchShuffle() {
@@ -275,9 +284,15 @@ export default {
     },
     switchRepeatType() {
       this.$store.dispatch("player/switchPlayerRepeatMode");
+      if (!this.currentUser._id) {
+        return;
+      }
       this.saveUserSettings();
     },
     saveUserSettings() {
+      if (!this.currentUser._id) {
+        return;
+      }
       this.$store.dispatch("user/savePlayerSettings");
     },
     timeUpdate(event) {
@@ -314,6 +329,9 @@ export default {
       }
       return type;
     },
+    currentUser() {
+      return this.$store.getters["user/user"];
+    },
     formatedD() {
       let m = Math.floor(this.duration / 60);
       let s = Math.floor(this.duration - m * 60);
diff --git a/src/components/dialogs/AlbumViewer.vue b/src/components/dialogs/AlbumViewer.vue
index bd0544c..487f0c7 100644
--- a/src/components/dialogs/AlbumViewer.vue
+++ b/src/components/dialogs/AlbumViewer.vue
@@ -40,7 +40,13 @@
                 <button v-if="!selectedAlbum.share._id" @click="shareEnable">
                   <awesome-icon icon="share" />Share this album
                 </button>
-                <button v-else @click="shareDisable">
+                <button
+                  v-if="selectedAlbum.share._id"
+                  @click="addShareUrlToClipboard"
+                >
+                  <awesome-icon icon="clipboard" />Copy url into clipboard
+                </button>
+                <button v-if="selectedAlbum.share._id" @click="shareDisable">
                   <awesome-icon icon="share" />Remove share
                 </button>
               </div>
@@ -110,6 +116,11 @@ export default {
     };
   },
   methods: {
+    addShareUrlToClipboard() {
+      let url =
+        window.location.origin + "/#/share?id=" + this.selectedAlbum.share._id;
+      navigator.clipboard.writeText(url);
+    },
     dblclick() {
       this.$store.commit("tracks/resetSelectedTrack");
       this.$store.commit("radios/resetSelectedRadio");
@@ -208,7 +219,11 @@ export default {
       this.$store.dispatch("albums/selectAlbum", album);
     },
     shareEnable() {
-      this.$store.dispatch("albums/shareEnable", this.selectedAlbum);
+      this.$store
+        .dispatch("albums/shareEnable", this.selectedAlbum)
+        .then(() => {
+          this.addShareUrlToClipboard();
+        });
     },
     shareDisable() {
       this.$store.dispatch("albums/shareDisable", this.selectedAlbum);
@@ -342,7 +357,7 @@ export default {
   border-top: 1px solid #ffffff20;
   border-bottom: 1px solid #00000020;
 }
-#stats button {
+.dropdown-activator button {
   width: 32px;
   height: 32px;
 }
diff --git a/src/components/dialogs/BoxViewer.vue b/src/components/dialogs/BoxViewer.vue
index 37160e4..c013deb 100644
--- a/src/components/dialogs/BoxViewer.vue
+++ b/src/components/dialogs/BoxViewer.vue
@@ -41,7 +41,13 @@
                 <button v-if="!selectedBox.share._id" @click="shareEnable">
                   <awesome-icon icon="share" />Share this box
                 </button>
-                <button v-else @click="shareDisable">
+                <button
+                  v-if="selectedBox.share._id"
+                  @click="addShareUrlToClipboard"
+                >
+                  <awesome-icon icon="clipboard" />Copy url into clipboard
+                </button>
+                <button v-if="selectedBox.share._id" @click="shareDisable">
                   <awesome-icon icon="share" />Remove share
                 </button>
               </div>
@@ -95,6 +101,11 @@ import { mapGetters } from "vuex";
 
 export default {
   methods: {
+    addShareUrlToClipboard() {
+      let url =
+        window.location.origin + "/#/share?id=" + this.selectedBox.share._id;
+      navigator.clipboard.writeText(url);
+    },
     dblclick() {
       this.$store.commit("tracks/resetSelectedTrack");
       this.$store.commit("radios/resetSelectedRadio");
@@ -174,7 +185,9 @@ export default {
       this.$store.dispatch("boxes/resetCover", this.selectedBox);
     },
     shareEnable() {
-      this.$store.dispatch("boxes/shareEnable", this.selectedBox);
+      this.$store.dispatch("boxes/shareEnable", this.selectedBox).then(() => {
+        this.addShareUrlToClipboard();
+      });
     },
     shareDisable() {
       this.$store.dispatch("boxes/shareDisable", this.selectedBox);
@@ -274,7 +287,7 @@ export default {
   border-top: 1px solid #ffffff20;
   border-bottom: 1px solid #00000020;
 }
-#stats button {
+.dropdown-activator button {
   width: 32px;
   height: 32px;
 }
diff --git a/src/components/dialogs/VideoScreen.vue b/src/components/dialogs/VideoScreen.vue
index db151ec..f98bde6 100644
--- a/src/components/dialogs/VideoScreen.vue
+++ b/src/components/dialogs/VideoScreen.vue
@@ -89,6 +89,9 @@ export default {
       this.$store.dispatch("videos/playNextTo", this.selectedVideo);
     },
     pushHistoryItem() {
+      if (!this.currentUser._id) {
+        return;
+      }
       let item = {
         id: this.selectedVideo.parent._id,
         type: "box",
@@ -154,6 +157,9 @@ export default {
     },
   },
   computed: {
+    currentUser() {
+      return this.$store.getters["user/user"];
+    },
     selectedVideo() {
       return this.$store.getters["videos/selectedVideo"];
     },
diff --git a/src/store/modules/albums/actions.js b/src/store/modules/albums/actions.js
index b2496d4..17d89ee 100644
--- a/src/store/modules/albums/actions.js
+++ b/src/store/modules/albums/actions.js
@@ -155,8 +155,11 @@ export default {
     axios.put(context.rootGetters.server + "/api/albums/" + album._id, body, context.rootGetters.headers);
   },
   shareEnable(context, album) {
-    axios.post(context.rootGetters.server + "/api/albums/" + album._id + "/share", {}, context.rootGetters.headers).then(res => {
-      album.share = res.data;
+    return new Promise(resolve => {
+      axios.post(context.rootGetters.server + "/api/albums/" + album._id + "/share", {}, context.rootGetters.headers).then(res => {
+        album.share = res.data;
+        resolve();
+      });
     });
   },
   shareDisable(context, album) {
diff --git a/src/store/modules/boxes/actions.js b/src/store/modules/boxes/actions.js
index ba5ef48..a586179 100644
--- a/src/store/modules/boxes/actions.js
+++ b/src/store/modules/boxes/actions.js
@@ -131,8 +131,11 @@ export default {
     });
   },
   shareEnable(context, box) {
-    axios.post(context.rootGetters.server + "/api/boxes/" + box._id + "/share", {}, context.rootGetters.headers).then(res => {
-      box.share = res.data;
+    return new Promise(resolve => {
+      axios.post(context.rootGetters.server + "/api/boxes/" + box._id + "/share", {}, context.rootGetters.headers).then(res => {
+        box.share = res.data;
+        resolve();
+      });
     });
   },
   shareDisable(context, box) {
diff --git a/src/store/modules/share/actions.js b/src/store/modules/share/actions.js
index f41bd6b..56679c1 100644
--- a/src/store/modules/share/actions.js
+++ b/src/store/modules/share/actions.js
@@ -4,12 +4,23 @@ export default {
   get(context, id) {
     return new Promise((resolve) => {
       axios.get(context.rootGetters.server + "/api/shares/" + id, context.rootGetters.headers).then((res) => {
-        if (res.data.object.type == "album") {
-          console.log(res.data)
-          res.data.object.tracks.forEach(track => {
-            track.parent = res.data.object;
-            track.parentType = "album"
-          });
+        if (!res.data._id) {
+          resolve(res.data);
+          return;
+        }
+        switch (res.data.object.type) {
+          case "album":
+            res.data.object.tracks.forEach(track => {
+              track.parent = res.data.object;
+              track.parentType = "album"
+            });
+            break;
+          case "box":
+            res.data.object.videos.forEach(video => {
+              video.parent = res.data.object;
+              video.parentType = "box"
+            });
+            break;
         }
         resolve(res.data);
       });
diff --git a/src/store/modules/videos/actions.js b/src/store/modules/videos/actions.js
index 8164646..dc76e84 100644
--- a/src/store/modules/videos/actions.js
+++ b/src/store/modules/videos/actions.js
@@ -4,7 +4,7 @@ import router from '../../../router'
 export default {
   play(context, video) {
     context.commit("selectVideo", video);
-    if (context.rootGetters.routerQuery.play != video._id) {
+    if (context.rootGetters.routerQuery.play != video._id && context.rootGetters.routerPath != "/share") {
       router.push("/boxes?id=" + video.parent._id + "&play=" + video._id);
     }
   },
diff --git a/src/views/Share.vue b/src/views/Share.vue
index 89dcfa8..de65bbc 100644
--- a/src/views/Share.vue
+++ b/src/views/Share.vue
@@ -1,52 +1,62 @@
 <template>
   <div ref="share" id="share" class="flex-column">
-    <div class="flex-column ma-horizontal">
-      <h1>{{ object.title }}</h1>
-      <h2>{{ object.artist_name }}</h2>
-    </div>
-    <div id="content" class="flex-row border-top">
-      <div>
-        <img id="cover" class="shadow ma24" :src="cover" />
-      </div>
-      <ul id="trackList" class="tracks">
-        <li v-for="track in object.tracks" :key="track._id">
-          <TrackItem :track="track" :showCover="false" />
-        </li>
-      </ul>
-    </div>
+    <AlbumContent ref="album" v-if="type == 'album'" />
+    <BoxContent ref="box" v-if="type == 'box'" />
   </div>
 </template>
 
 <script>
-import TrackItem from "../components/Track";
+import AlbumContent from "../components/AlbumContent.vue";
+import BoxContent from "../components/BoxContent.vue";
 
 export default {
   name: "ShareView",
   data() {
     return {
-      object: {
-        covers: { cover256: "" },
-      },
+      type: "",
     };
   },
-  mounted() {
-    if (this.$route.query.id) {
-      this.$store.dispatch("share/get", this.$route.query.id).then((res) => {
-        this.$nextTick(() => {
-          this.object = res.object;
+  methods: {
+    loadShare() {
+      if (this.$route.query.id) {
+        this.$store.dispatch("share/get", this.$route.query.id).then((res) => {
+          if (!res._id) {
+            this.$router.replace("/login");
+            return;
+          }
+          this.type = res.object.type;
+          this.$nextTick(() => {
+            switch (this.type) {
+              case "album":
+                this.$refs.album.show(res.object);
+                break;
+              case "box":
+                this.$refs.box.show(res.object);
+                break;
+            }
+          });
         });
-      });
-    } else {
-      this.$router.replace("/");
-    }
+      } else {
+        this.$router.replace("/login");
+      }
+    },
   },
   computed: {
-    cover() {
-      return this.object.covers.cover256;
+    server() {
+      return this.$store.getters.server;
     },
   },
   components: {
-    TrackItem,
+    AlbumContent,
+    BoxContent,
+  },
+  watch: {
+    server() {
+      this.loadShare();
+    },
+    "$route.query.id": function () {
+      this.loadShare();
+    },
   },
 };
 </script>
@@ -55,12 +65,4 @@ export default {
 #share {
   overflow: auto;
 }
-#cover {
-  align-self: flex-start;
-  width: 256px;
-  align-self: center;
-}
-#content {
-  overflow: auto;
-}
 </style>
\ No newline at end of file