diff --git a/package-lock.json b/package-lock.json index b7ff70a..3adb8e9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5710,6 +5710,14 @@ "safer-buffer": ">= 2.1.2 < 3" } }, + "id3-parser": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/id3-parser/-/id3-parser-2.0.0.tgz", + "integrity": "sha512-bkGeAtUX70rC9sq2mjzIrkmPZjUsGuqCjZKGFJnugKXqYVDuJgfWDa8MehUZaCqlkoCaXkYevYeaRxkHOJsv9w==", + "requires": { + "promise-a-plus": "^0.7.0" + } + }, "ieee754": { "version": "1.1.13", "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz", @@ -8198,6 +8206,14 @@ "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-2.2.0.tgz", "integrity": "sha512-2kaC1itlEMxiMAPJ320hOpcwU9vhvjbKQCZ1Go6bGhYjJtqG7eYvhNP7mM9IhFz1/afG2tBryJPySWmFUGhRpA==" }, + "ngx-file-drop": { + "version": "8.0.7", + "resolved": "https://registry.npmjs.org/ngx-file-drop/-/ngx-file-drop-8.0.7.tgz", + "integrity": "sha512-o+PrT+H1TM0GdobMdfwlBD6hMM8nkhiLe9yhPxjBoHhnLPxxQ4uaKF9lv9TxSNzYLbEW/S2qTifj1CrsQEy0gg==", + "requires": { + "tslib": "^1.9.0" + } + }, "nice-try": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz", @@ -9110,6 +9126,11 @@ "asap": "~2.0.3" } }, + "promise-a-plus": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/promise-a-plus/-/promise-a-plus-0.7.0.tgz", + "integrity": "sha512-cWbWdSKaHiNGWP3aUSAq5nkZFYL1A6glTMgGc/LpFZ6DEJ5FRXzu7T2k4mmi+cD/R5EJ9DHHzWezXnO1IMPb5w==" + }, "promise-inflight": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz", diff --git a/package.json b/package.json index c352986..cb6246d 100644 --- a/package.json +++ b/package.json @@ -37,10 +37,12 @@ "chart.js": "^2.8.0", "d3": "^5.9.7", "hammerjs": "^2.0.8", + "id3-parser": "^2.0.0", "lodash": "^4.17.15", "moment": "^2.24.0", "ng2-charts": "^2.3.0", "ngx-cookie-service": "^2.2.0", + "ngx-file-drop": "^8.0.7", "perfect-scrollbar": "^1.4.0", "prismjs": "^1.17.1", "rxjs": "^6.5.2", diff --git a/src/@fuse/scss/partials/_page-layouts.scss b/src/@fuse/scss/partials/_page-layouts.scss index 830cda3..32e5664 100644 --- a/src/@fuse/scss/partials/_page-layouts.scss +++ b/src/@fuse/scss/partials/_page-layouts.scss @@ -2,79 +2,66 @@ // @ Theming // ----------------------------------------------------------------------------------------------------- @mixin page-layouts-theme($theme) { + $background: map-get($theme, background); + $foreground: map-get($theme, foreground); - $background: map-get($theme, background); - $foreground: map-get($theme, foreground); + .page-layout { + // Carded layout + &.carded { + // Fullwidth + &.fullwidth { + > .center { + > .content-card { + background: map-get($background, card); + border-radius: 8px 8px 0 0; - .page-layout { - - // Carded layout - &.carded { - - // Fullwidth - &.fullwidth { - - > .center { - - > .content-card { - background: map-get($background, card); - border-radius: 8px 8px 0 0; - - > .toolbar { - border-bottom-color: map-get($foreground, divider); - } - } - } - } - - // Left / Right sidebar - &.left-sidebar, - &.right-sidebar { - - > .center { - - > .content-card { - background: map-get($background, card); - border-radius: 8px 8px 0 0; - - > .toolbar { - border-bottom-color: map-get($foreground, divider); - } - } - } + > .toolbar { + border-bottom-color: map-get($foreground, divider); } + } } + } - // Simple layout - &.simple { + // Left / Right sidebar + &.left-sidebar, + &.right-sidebar { + > .center { + > .content-card { + background: map-get($background, card); + border-radius: 8px 8px 0 0; - // Left / Right sidebar - &.left-sidebar, - &.right-sidebar { - - > .center { - - > .content { - background: map-get($background, card); - } - } - - // Inner sidebar - &.inner-sidebar { - - > .content { - - > .center { - - > .content { - background: map-get($background, card); - } - } - } - } + > .toolbar { + border-bottom-color: map-get($foreground, divider); } + } } + } } + + // Simple layout + &.simple { + // Left / Right sidebar + &.left-sidebar, + &.right-sidebar { + > .center { + > .content { + background: map-get($background, card); + } + } + + // Inner sidebar + &.inner-sidebar { + > .content { + > .center { + > .content { + background: map-get($background, card); + } + } + } + } + } + } + } } // ----------------------------------------------------------------------------------------------------- @@ -85,610 +72,569 @@ $carded-toolbar-height: 64px !default; $header-height: 120px !default; // Calculate toolbar-less carded header height -$carded-header-height-without-toolbar: $carded-header-height - $carded-toolbar-height; +$carded-header-height-without-toolbar: $carded-header-height - + $carded-toolbar-height; .page-layout { - position: relative; - overflow: hidden; - - // Carded layout - &.carded { - display: flex; - flex-direction: column; - flex: 1 0 auto; - width: 100%; - min-width: 100%; - - // Top bg - > .top-bg { - position: absolute; - z-index: 1; - top: 0; - right: 0; - left: 0; - height: $carded-header-height; - } - - // Fullwidth - &.fullwidth { - - // Center - > .center { - display: flex; - flex-direction: column; - flex: 1 0 auto; - position: relative; - z-index: 2; - padding: 0 32px; - width: 100%; - min-width: 0; - max-width: 100%; - height: 100%; - max-height: 100%; - - > .header { - height: $carded-header-height-without-toolbar !important; - min-height: $carded-header-height-without-toolbar !important; - max-height: $carded-header-height-without-toolbar !important; - } - - > .content-card { - display: flex; - flex-direction: column; - flex: 1 0 auto; - overflow: hidden; - @include mat-elevation(1); - - > .toolbar { - display: flex; - justify-content: flex-start; - align-items: center; - border-bottom: 1px solid; - height: $carded-toolbar-height; - min-height: $carded-toolbar-height; - max-height: $carded-toolbar-height; - } - - > .content { - flex: 1 0 auto; - } - } - } - - // Tabbed - &.tabbed { - - > .center { - width: 100%; - min-width: 0; - - > .header { - flex: 1 1 auto; - } - - > .content-card { - - > .content { - display: flex; - - > .mat-tab-group { - overflow: hidden; - width: 100%; - - .mat-tab-header { - - .mat-tab-label { - height: 64px; - } - } - - .mat-tab-body { - overflow: hidden; - - .mat-tab-body-content { - overflow: hidden; - - .tab-content { - position: relative; - width: 100%; - height: 100%; - } - } - } - } - } - } - } - } - - // Inner scroll - &.inner-scroll { - flex: 1 1 auto; - - > .center { - flex: 1 1 auto; - - > .content-card { - flex: 1 1 auto; - - > .content { - flex: 1 1 auto; - overflow: auto; - -webkit-overflow-scrolling: touch; - } - } - } - - // Tabbed - &.tabbed { - - > .center { - - > .content-card { - - > .content { - - > .mat-tab-group { - - .mat-tab-body { - - .mat-tab-body-content { - - .tab-content { - overflow: auto; - -webkit-overflow-scrolling: touch; - } - } - } - } - } - } - } - } - } - } - - // Left / Right sidebar - &.left-sidebar, - &.right-sidebar { - flex-direction: row; - - // Sidebar - > .sidebar { - display: flex; - flex-direction: column; - flex: 1 1 auto; - width: 240px; - min-width: 240px; - max-width: 240px; - height: auto; - overflow: hidden; - @include mat-elevation(7); - - &.locked-open { - background: none; - box-shadow: none; - - + .center { - z-index: 1001; - } - - &.left-positioned { - - + .center { - margin-left: 0; - } - } - - &.right-positioned { - - + .center { - margin-right: 0; - } - } - } - - .header { - height: $carded-header-height; - min-height: $carded-header-height; - max-height: $carded-header-height; - } - - .content { - background: transparent; - flex: 1 1 auto; - } - } - - // Center - > .center { - display: flex; - flex-direction: column; - flex: 1 1 auto; - position: relative; - z-index: 3; - margin-left: 32px; - margin-right: 32px; - width: 100%; - min-width: 0; - - > .header { - display: flex; - height: $carded-header-height-without-toolbar; - min-height: $carded-header-height-without-toolbar; - max-height: $carded-header-height-without-toolbar; - } - - > .content-card { - display: flex; - flex-direction: column; - flex: 1 1 auto; - overflow: hidden; - @include mat-elevation(1); - - > .toolbar { - display: flex; - justify-content: flex-start; - align-items: center; - flex: 1 1 auto; - border-bottom: 1px solid; - height: $carded-toolbar-height; - min-height: $carded-toolbar-height; - max-height: $carded-toolbar-height; - - .sidebar-toggle { - margin: 0 8px 0 0 !important; - padding: 0 !important; - border-radius: 0; - } - } - - > .content { - flex: 1 1 auto; - } - } - } - - // Tabbed - &.tabbed { - - > .center { - width: calc(100% - 32px); - min-width: 0; - - @include media-breakpoint('lt-lg') { - width: calc(100% - 64px); - } - - > .header { - flex: 1 1 auto; - } - - > .content-card { - - > .content { - display: flex; - - > .mat-tab-group { - overflow: hidden; - - .mat-tab-header { - - .mat-tab-label { - height: 64px; - } - } - - .mat-tab-body { - overflow: hidden; - - .mat-tab-body-content { - overflow: hidden; - - .tab-content { - position: relative; - width: 100%; - height: 100%; - } - } - } - } - } - } - } - } - - // Inner scroll - &.inner-scroll { - flex: 1 1 auto; - - > .sidebar { - - .content { - overflow: auto; - -webkit-overflow-scrolling: touch; - } - } - - > .center { - flex: 1 1 auto; - - > .content-card { - flex: 1 1 auto; - - > .content { - flex: 1 1 auto; - overflow: auto; - -webkit-overflow-scrolling: touch; - } - } - } - - // Tabbed - &.tabbed { - - > .center { - - > .content-card { - - > .content { - - > .mat-tab-group { - - .mat-tab-body { - - .mat-tab-body-content { - - .tab-content { - overflow: auto; - -webkit-overflow-scrolling: touch; - } - } - } - } - } - } - } - } - } - } - - // Right sidebar specific - &.right-sidebar { - - > .sidebar { - order: 2; - } - - > .center { - order: 1; - } - } + position: relative; + overflow: hidden; + + // Carded layout + &.carded { + display: flex; + flex-direction: column; + flex: 1 0 auto; + width: 100%; + min-width: 100%; + + // Top bg + > .top-bg { + position: absolute; + z-index: 1; + top: 0; + right: 0; + left: 0; + height: $carded-header-height; } - // Simple layout - &.simple { + // Fullwidth + &.fullwidth { + // Center + > .center { display: flex; flex-direction: column; flex: 1 0 auto; + position: relative; + z-index: 2; + padding: 0 32px; width: 100%; - min-width: 100%; + min-width: 0; + max-width: 100%; + height: 100%; + max-height: 100%; - // Fullwidth - &.fullwidth { + > .header { + height: $carded-header-height-without-toolbar !important; + min-height: $carded-header-height-without-toolbar !important; + max-height: $carded-header-height-without-toolbar !important; + } + + > .content-card { + display: flex; + flex-direction: column; + flex: 1 0 auto; + overflow: hidden; + @include mat-elevation(1); + + > .toolbar { + display: flex; + justify-content: flex-start; + align-items: center; + border-bottom: 1px solid; + height: $carded-toolbar-height; + min-height: $carded-toolbar-height; + max-height: $carded-toolbar-height; + } + + > .content { + flex: 1 0 auto; + } + } + } + + // Tabbed + &.tabbed { + > .center { + width: 100%; + min-width: 0; + + > .header { + flex: 1 1 auto; + } + + > .content-card { + > .content { + display: flex; + + > .mat-tab-group { + overflow: hidden; + width: 100%; + + .mat-tab-header { + .mat-tab-label { + height: 64px; + } + } + + .mat-tab-body { + overflow: hidden; + + .mat-tab-body-content { + overflow: hidden; + + .tab-content { + position: relative; + width: 100%; + height: 100%; + } + } + } + } + } + } + } + } + + // Inner scroll + &.inner-scroll { + flex: 1 1 auto; + + > .center { + flex: 1 1 auto; + + > .content-card { + flex: 1 1 auto; > .content { - flex: 1 1 auto; - min-width: 0; - } - } - - &.fullwidth, - &.inner-sidebar { - - > .header { - height: $header-height; - min-height: $header-height; - max-height: $header-height; - } - } - - // Left / Right sidebar - &.left-sidebar, - &.right-sidebar { - flex-direction: row; - - // Sidebar - > .sidebar { - width: 240px; - min-width: 240px; - max-width: 240px; - overflow: hidden; - @include mat-elevation(7); - - &.locked-open { - background: none; - box-shadow: none; - - + .center { - z-index: 1001; - } - - &.left-positioned { - - + .center { - margin-left: 0; - } - } - - &.right-positioned { - - + .center { - margin-right: 0; - } - } - } - - .content { - flex: 1 1 auto; - } - } - - // Center - > .center { - position: relative; - display: flex; - flex-direction: column; - flex: 1 1 auto; - z-index: 3; - min-width: 0; - width: 100%; - @include mat-elevation(1); - - > .header { - height: $header-height; - min-height: $header-height; - max-height: $header-height; - } - - > .content { - flex: 1 0 auto; - } - } - - // Inner scroll - &.inner-scroll { - flex: 1 1 auto; - - > .sidebar { - - .content { - overflow: auto; - -webkit-overflow-scrolling: touch; - } - } - - > .center { - flex: 1 1 auto; - overflow: auto; - -webkit-overflow-scrolling: touch; - } - } - - // Inner sidebar - &.inner-sidebar { - flex-direction: column; - overflow: hidden; - height: 100%; - - > .content { - display: flex; - min-height: 0; - - > .sidebar { - - &.locked-open { - background: none; - box-shadow: none; - } - - .content { - overflow: auto; - -webkit-overflow-scrolling: touch; - } - } - - > .center { - flex: 1 1 auto; - overflow: auto; - -webkit-overflow-scrolling: touch; - - > .content { - border-radius: 8px; - @include mat-elevation(1); - } - } - } - } - } - - // Right sidebar specific - &.right-sidebar { - - > .sidebar { - order: 2; - } - - > .center { - order: 1; - } - - // Inner sidebar - &.inner-sidebar { - - > .content { - - > .sidebar { - order: 2; - } - - > .center { - order: 1; - } - } + flex: 1 1 auto; + overflow: auto; + -webkit-overflow-scrolling: touch; } + } } // Tabbed &.tabbed { - min-height: 100%; - - > .header { - height: $header-height; - min-height: $header-height; - max-height: $header-height; + > .center { + > .content-card { + > .content { + > .mat-tab-group { + .mat-tab-body { + .mat-tab-body-content { + .tab-content { + overflow: auto; + -webkit-overflow-scrolling: touch; + } + } + } + } + } } + } + } + } + } + + // Left / Right sidebar + &.left-sidebar, + &.right-sidebar { + flex-direction: row; + + // Sidebar + > .sidebar { + display: flex; + flex-direction: column; + flex: 1 1 auto; + width: 240px; + min-width: 240px; + max-width: 240px; + height: auto; + overflow: hidden; + @include mat-elevation(7); + + &.locked-open { + background: none; + box-shadow: none; + + + .center { + z-index: 1001; + } + + &.left-positioned { + + .center { + margin-left: 0; + } + } + + &.right-positioned { + + .center { + margin-right: 0; + } + } + } + + .header { + height: $carded-header-height; + min-height: $carded-header-height; + max-height: $carded-header-height; + } + + .content { + background: transparent; + flex: 1 1 auto; + } + } + + // Center + > .center { + display: flex; + flex-direction: column; + flex: 1 1 auto; + position: relative; + z-index: 3; + margin-left: 32px; + margin-right: 32px; + width: 100%; + min-width: 0; + + > .header { + display: flex; + height: $carded-header-height-without-toolbar; + min-height: $carded-header-height-without-toolbar; + max-height: $carded-header-height-without-toolbar; + } + + > .content-card { + display: flex; + flex-direction: column; + flex: 1 1 auto; + overflow: hidden; + @include mat-elevation(1); + + > .toolbar { + display: flex; + justify-content: flex-start; + align-items: center; + flex: 1 1 auto; + border-bottom: 1px solid; + height: $carded-toolbar-height; + min-height: $carded-toolbar-height; + max-height: $carded-toolbar-height; + + .sidebar-toggle { + margin: 0 8px 0 0 !important; + padding: 0 !important; + border-radius: 0; + } + } + + > .content { + flex: 1 1 auto; + } + } + } + + // Tabbed + &.tabbed { + > .center { + width: calc(100% - 32px); + min-width: 0; + + @include media-breakpoint('lt-lg') { + width: calc(100% - 64px); + } + + > .header { + flex: 1 1 auto; + } + + > .content-card { + > .content { + display: flex; + + > .mat-tab-group { + overflow: hidden; + + .mat-tab-header { + .mat-tab-label { + height: 64px; + } + } + + .mat-tab-body { + overflow: hidden; + + .mat-tab-body-content { + overflow: hidden; + + .tab-content { + position: relative; + width: 100%; + height: 100%; + } + } + } + } + } + } + } + } + + // Inner scroll + &.inner-scroll { + flex: 1 1 auto; + + > .sidebar { + .content { + overflow: auto; + -webkit-overflow-scrolling: touch; + } + } + + > .center { + flex: 1 1 auto; + + > .content-card { + flex: 1 1 auto; > .content { + flex: 1 1 auto; + overflow: auto; + -webkit-overflow-scrolling: touch; + } + } + } + // Tabbed + &.tabbed { + > .center { + > .content-card { + > .content { > .mat-tab-group { - - .mat-tab-labels { - padding: 0 24px; + .mat-tab-body { + .mat-tab-body-content { + .tab-content { + overflow: auto; + -webkit-overflow-scrolling: touch; + } } + } } + } } + } } + } } - // Blank layout - &.blank { + // Right sidebar specific + &.right-sidebar { + > .sidebar { + order: 2; + } + + > .center { + order: 1; + } + } + } + + // Simple layout + &.simple { + display: flex; + flex-direction: column; + flex: 1 0 auto; + width: 100%; + min-width: 100%; + + // Fullwidth + &.fullwidth { + > .content { + flex: 1 1 auto; + min-width: 0; + } + } + + &.fullwidth, + &.inner-sidebar { + > .header { + height: $header-height; + min-height: $header-height; + max-height: $header-height; + } + } + + // Left / Right sidebar + &.left-sidebar, + &.right-sidebar { + flex-direction: row; + + // Sidebar + > .sidebar { + width: 240px; + min-width: 240px; + max-width: 240px; + overflow: hidden; + @include mat-elevation(7); + + &.locked-open { + background: none; + box-shadow: none; + + + .center { + z-index: 1001; + } + + &.left-positioned { + + .center { + margin-left: 0; + } + } + + &.right-positioned { + + .center { + margin-right: 0; + } + } + } + + .content { + flex: 1 1 auto; + } + } + + // Center + > .center { + position: relative; + display: flex; + flex-direction: column; + flex: 1 1 auto; + z-index: 3; + min-width: 0; width: 100%; - min-height: 100%; - } + @include mat-elevation(1); - @include media-breakpoint('xs') { - - // Smaller margins - &.carded { - - &.fullwidth { - - > .center { - padding: 0 16px; - } - } - - &.left-sidebar, - &.right-sidebar { - - > .center { - margin: 0 16px; - } - } + > .header { + height: $header-height; + min-height: $header-height; + max-height: $header-height; } - // End - Smaller margins + + > .content { + flex: 1 0 auto; + } + } + + // Inner scroll + &.inner-scroll { + flex: 1 1 auto; + + > .sidebar { + .content { + overflow: auto; + -webkit-overflow-scrolling: touch; + } + } + + > .center { + flex: 1 1 auto; + overflow: auto; + -webkit-overflow-scrolling: touch; + } + } + + // Inner sidebar + &.inner-sidebar { + flex-direction: column; + overflow: hidden; + height: 100%; + + > .content { + display: flex; + min-height: 0; + + > .sidebar { + &.locked-open { + background: none; + box-shadow: none; + } + + .content { + overflow: auto; + -webkit-overflow-scrolling: touch; + } + } + + > .center { + flex: 1 1 auto; + overflow: auto; + -webkit-overflow-scrolling: touch; + + > .content { + border-radius: 8px; + @include mat-elevation(1); + } + } + } + } } + + // Right sidebar specific + &.right-sidebar { + > .sidebar { + order: 2; + } + + > .center { + order: 1; + } + + // Inner sidebar + &.inner-sidebar { + > .content { + > .sidebar { + order: 2; + } + + > .center { + order: 1; + } + } + } + } + + // Tabbed + &.tabbed { + min-height: 100%; + + > .header { + height: $header-height; + min-height: $header-height; + max-height: $header-height; + } + + > .content { + > .mat-tab-group { + .mat-tab-labels { + padding: 0 24px; + } + } + } + } + } + + // Blank layout + &.blank { + width: 100%; + min-height: 100%; + } + + @include media-breakpoint('xs') { + // Smaller margins + &.carded { + &.fullwidth { + > .center { + padding: 0 16px; + } + } + + &.left-sidebar, + &.right-sidebar { + > .center { + margin: 0 16px; + } + } + } + // End - Smaller margins + } } - - diff --git a/src/app/pages/medias/media/component/detail.component.html b/src/app/pages/medias/media/component/detail.component.html index fc07b2e..84ec30e 100644 --- a/src/app/pages/medias/media/component/detail.component.html +++ b/src/app/pages/medias/media/component/detail.component.html @@ -21,10 +21,13 @@ arrow_back - +
+ +
-
- - -
- --> + + +
+
+
+
+
{{ id3Tag?.title }}
+
{{ id3Tag?.subtitle }}
+
+ +
+ +
+ + + +
+
+ + + - - - - + > + --> + + - + --> - Tags - + - -
- + --> +
+ - -
- -
- +
+ - -
- - - + +
+ + +
diff --git a/src/app/pages/medias/media/component/detail.component.scss b/src/app/pages/medias/media/component/detail.component.scss index ded7d59..f1daae9 100644 --- a/src/app/pages/medias/media/component/detail.component.scss +++ b/src/app/pages/medias/media/component/detail.component.scss @@ -60,3 +60,21 @@ } } } + +.uploadfilecontainer { + background-image: url('/assets/images/file-manager/cloud-2044823_960_720.png'); + background-repeat: no-repeat; + background-size: 80px; + background-position: center; + // height: 200px; + // width: 80%; + // margin: 20px auto; + border: 2px dashed #1c8adb; + border-radius: 10px; +} + +.uploadfilecontainer:hover { + cursor: pointer; + background-color: #9ecbec !important; + opacity: 0.8; +} diff --git a/src/app/pages/medias/media/component/detail.component.ts b/src/app/pages/medias/media/component/detail.component.ts index c268b38..628ec30 100644 --- a/src/app/pages/medias/media/component/detail.component.ts +++ b/src/app/pages/medias/media/component/detail.component.ts @@ -1,4 +1,11 @@ -import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { + Component, + OnDestroy, + OnInit, + ViewEncapsulation, + ViewChild, + ElementRef +} from '@angular/core'; import { FormBuilder, FormGroup } from '@angular/forms'; import { Location } from '@angular/common'; import { MatSnackBar } from '@angular/material/snack-bar'; @@ -8,6 +15,11 @@ import { takeUntil } from 'rxjs/operators'; import { fuseAnimations } from 'src/@fuse/animations'; import { FuseUtils } from 'src/@fuse/utils'; +import universalParse from 'id3-parser/lib/universal'; +import { IID3Tag } from 'id3-parser/lib/interface'; + +import { NgxFileDropEntry, FileSystemFileEntry } from 'ngx-file-drop'; + @Component({ selector: 'app-pages-medias-media-detail', templateUrl: './detail.component.html', @@ -19,6 +31,10 @@ export class DetailComponent implements OnInit, OnDestroy { media: any; pageType: string; mediaForm: FormGroup; + id3Tag: IID3Tag | null; + + @ViewChild('testImage', { static: true }) + testImage: ElementRef; // Private private _unsubscribeAll: Subject; @@ -58,4 +74,31 @@ export class DetailComponent implements OnInit, OnDestroy { // ----------------------------------------------------------------------------------------------------- // @ Public methods // ----------------------------------------------------------------------------------------------------- + onMediaAdded(ev: any): void { + universalParse(ev.target.files[0]).then(tags => { + this.id3Tag = tags; + const b64encoded = + `data:${tags.image.mime};base64,` + + btoa(String.fromCharCode.apply(null, tags.image.data)); + console.log(b64encoded); + this.testImage.nativeElement.src = b64encoded; + }); + } + + onFileDropped(files: NgxFileDropEntry[]) { + console.log(files[0].fileEntry); + + const fileEntry = files[0].fileEntry as FileSystemFileEntry; + + fileEntry.file((file: File) => { + universalParse(file).then(tags => { + this.id3Tag = tags; + const b64encoded = + `data:${tags.image.mime};base64,` + + btoa(String.fromCharCode.apply(null, tags.image.data)); + + this.testImage.nativeElement.src = b64encoded; + }); + }); + } } diff --git a/src/app/pages/medias/media/medias-media.module.ts b/src/app/pages/medias/media/medias-media.module.ts index 0ff2f0d..0bcf180 100644 --- a/src/app/pages/medias/media/medias-media.module.ts +++ b/src/app/pages/medias/media/medias-media.module.ts @@ -15,6 +15,8 @@ import { MatTableModule } from '@angular/material/table'; import { MatTabsModule } from '@angular/material/tabs'; import { MatCheckboxModule } from '@angular/material/checkbox'; +import { NgxFileDropModule } from 'ngx-file-drop'; + import { FuseSharedModule } from 'src/@fuse/shared.module'; import { FuseWidgetModule } from 'src/@fuse/components/widget/widget.module'; @@ -39,6 +41,8 @@ import { COMPONENTS } from './component'; MatTabsModule, MatCheckboxModule, + NgxFileDropModule, + FuseSharedModule, FuseWidgetModule, diff --git a/src/assets/images/file-manager/cloud-2044823_960_720.png b/src/assets/images/file-manager/cloud-2044823_960_720.png new file mode 100644 index 0000000..c3ea3f0 Binary files /dev/null and b/src/assets/images/file-manager/cloud-2044823_960_720.png differ diff --git a/src/modules/audio-player/audio-player.module.ts b/src/modules/audio-player/audio-player.module.ts new file mode 100644 index 0000000..ed6d00e --- /dev/null +++ b/src/modules/audio-player/audio-player.module.ts @@ -0,0 +1,25 @@ +import { NgModule, ModuleWithProviders } from '@angular/core'; +import { CommonModule } from '@angular/common'; + +import { COMPONENTS } from './component'; +import { SERVICES } from './service'; + +@NgModule({ + imports: [], + exports: [] +}) +export class AudioPlayerRootModule {} + +@NgModule({ + declarations: [...COMPONENTS], + imports: [CommonModule], + exports: [] +}) +export class AudioPlayerModule { + public static forRoot(): ModuleWithProviders { + return { + ngModule: AudioPlayerRootModule, + providers: [SERVICES] + }; + } +} diff --git a/src/modules/audio-player/component/index.ts b/src/modules/audio-player/component/index.ts new file mode 100644 index 0000000..c2ef00c --- /dev/null +++ b/src/modules/audio-player/component/index.ts @@ -0,0 +1 @@ +export const COMPONENTS = []; diff --git a/src/modules/audio-player/service/index.ts b/src/modules/audio-player/service/index.ts new file mode 100644 index 0000000..cda3e9a --- /dev/null +++ b/src/modules/audio-player/service/index.ts @@ -0,0 +1 @@ +export const SERVICES = [];