- Next
+
-
${this._getProfileView()}
diff --git a/src/views/header/language-composite.js b/src/views/header/language-composite.js
index 2b3a28f..97d5810 100644
--- a/src/views/header/language-composite.js
+++ b/src/views/header/language-composite.js
@@ -2,13 +2,13 @@ import { html, css } from "lit-element";
import { DwPopoverDialog } from "@dreamworld/dw-dialog/dw-popover-dialog.js";
//dw-components
-import '@dreamworld/dw-list-item/dw-list-item.js';
+import "@dreamworld/dw-list-item/dw-list-item.js";
//Redux
import { connect } from "pwa-helpers/connect-mixin";
-import {store} from "../../redux/store";
+import { store } from "../../redux/store";
-import * as app from '../../redux/app';
+import * as app from "../../redux/app";
class LanguageComposite extends connect(store)(DwPopoverDialog) {
constructor() {
@@ -19,29 +19,42 @@ class LanguageComposite extends connect(store)(DwPopoverDialog) {
return {
_language: {
type: String,
- }
- }
+ },
+ };
}
static get styles() {
- return [
- super.styles,
- css`
-
- `
- ];
+ return [super.styles, css``];
}
get _contentTemplate() {
return html`
- ${this._getPageName()}
- `;
+ return html` `;
}
get _contentTemplate() {
return html`
-
-
-
- ${this.dataSet.map(row => {
+ ${this.dataSet.map((row) => {
let imageUrl = "src/img/not-found/not-available.png";
- if(row.poster_path !== null){
+ if (row.poster_path !== null) {
imageUrl = "".concat(this.imageUrl, "/w500", row.poster_path);
}
- return html`
-
`;
}
@@ -111,4 +91,4 @@ export class ListContainer extends connect(store)(localize(i18next)(LitElement))
}
}
-window.customElements.define("list-container", ListContainer);
\ No newline at end of file
+window.customElements.define("list-container", ListContainer);
diff --git a/src/views/movies/list-item.js b/src/views/movies/list-item.js
index 58e78c1..2bf35db 100644
--- a/src/views/movies/list-item.js
+++ b/src/views/movies/list-item.js
@@ -7,18 +7,18 @@ import { connect } from "pwa-helpers/connect-mixin.js";
import { store } from "../../redux/store";
//i18next
-import i18next from '@dw/i18next-esm';
-import { localize } from '@dw/pwa-helpers';
+import i18next from "@dw/i18next-esm";
+import { localize } from "@dw/pwa-helpers";
//selectors
import * as app from "../../redux/app";
-import * as router from '../../redux/router';
+import * as router from "../../redux/router";
export class ListItem extends connect(store)(localize(i18next)(DwSurface)) {
static styles = [
DwSurface.styles,
css`
- :host{
+ :host {
width: min-content;
height: 100%;
overflow: hidden;
@@ -26,23 +26,23 @@ export class ListItem extends connect(store)(localize(i18next)(DwSurface)) {
transition: transform 0.5s ease-in-out;
}
- :host(:hover){
+ :host(:hover) {
transform: scale(1.05);
box-shadow: var(--mdc-elevation--z8);
z-index: 1;
}
- ::slotted(img){
+ ::slotted(img) {
width: auto;
height: 256px;
}
- .details{
+ .details {
padding: 16px 8px 16px;
text-align: center;
}
- ::slotted(h2){
+ ::slotted(h2) {
font-size: 1rem;
margin: 0;
width: 100%;
@@ -50,7 +50,7 @@ export class ListItem extends connect(store)(localize(i18next)(DwSurface)) {
font-weight: 700;
}
- ::slotted(h3){
+ ::slotted(h3) {
font-size: 0.75rem;
width: 100%;
overflow-wrap: break-word;
@@ -58,23 +58,23 @@ export class ListItem extends connect(store)(localize(i18next)(DwSurface)) {
margin: 0;
margin-top: 8px;
}
- `
+ `,
];
static properties = {
id: {
type: Number,
- reflect: true
+ reflect: true,
},
redirect: {
- type: String
- }
- }
+ type: String,
+ },
+ };
constructor() {
super();
this.elevation = 2;
- this.addEventListener('click', this.handleClick);
+ this.addEventListener("click", this.handleClick);
}
get _getContentTemplate() {
@@ -96,4 +96,4 @@ export class ListItem extends connect(store)(localize(i18next)(DwSurface)) {
}
}
-window.customElements.define("list-item", ListItem);
\ No newline at end of file
+window.customElements.define("list-item", ListItem);
diff --git a/src/views/movies/movie-details.js b/src/views/movies/movie-details.js
index b2ac196..d3e3ed7 100644
--- a/src/views/movies/movie-details.js
+++ b/src/views/movies/movie-details.js
@@ -5,11 +5,11 @@ import { connect } from "pwa-helpers/connect-mixin.js";
import { store } from "../../redux/store";
//i18next
-import i18next from '@dw/i18next-esm';
-import { localize } from '@dw/pwa-helpers';
+import i18next from "@dw/i18next-esm";
+import { localize } from "@dw/pwa-helpers";
-import * as router from './../../redux/router';
-import * as app from './../../redux/app';
+import * as router from "./../../redux/router";
+import * as app from "./../../redux/app";
import api from "../../redux/api";
@@ -20,24 +20,25 @@ import "./list-item";
import moment from "moment/src/moment";
-export class MovieDetails extends connect(store)(localize(i18next)(LitElement)) {
-
+export class MovieDetails extends connect(store)(
+ localize(i18next)(LitElement)
+) {
static styles = [
css`
- :host{
+ :host {
flex: 1;
}
- :host([layout="mobile"]) .header{
+ :host([layout="mobile"]) .header {
flex-direction: column;
}
- :host([layout="mobile"]) .header .detail{
+ :host([layout="mobile"]) .header .detail {
padding-left: 0;
padding-top: 16px;
}
- .header{
+ .header {
display: flex;
flex: 1;
background-size: cover;
@@ -46,42 +47,42 @@ export class MovieDetails extends connect(store)(localize(i18next)(LitElement))
padding: 20px;
}
- .header .detail{
+ .header .detail {
padding-left: 16px;
}
- .header h2{
+ .header h2 {
font-weight: 700;
margin: 0;
}
- .header img{
+ .header img {
width: 320px;
height: auto;
border-radius: 8px;
align-self: center;
}
- h4{
+ h4 {
margin: 8px 0px;
}
- :host([layout='mobile']) .main{
+ :host([layout="mobile"]) .main {
justify-content: center;
}
- .main{
+ .main {
flex: 1;
display: flex;
flex-wrap: wrap;
width: 100%;
}
- .main div{
+ .main div {
margin-right: 8px;
margin-bottom: 8px;
}
- `
+ `,
];
static properties = {
@@ -89,12 +90,12 @@ export class MovieDetails extends connect(store)(localize(i18next)(LitElement))
_data: { type: Object },
layout: {
type: String,
- reflect: true
+ reflect: true,
},
_credits: {
- type: Object
- }
- }
+ type: Object,
+ },
+ };
constructor() {
super();
@@ -110,30 +111,31 @@ export class MovieDetails extends connect(store)(localize(i18next)(LitElement))
}
_getInitView() {
-
if (this._data !== undefined) {
-
-
- return html`
- ${this._headerview()}
- ${this._getBodyView()}
- `;
+ return html` ${this._headerview()} ${this._getBodyView()} `;
}
return html`
-
-
- 
-
-
`
- } )}
+ return html` ${row.title}
- -
+
+
+
+
`;
+ })}
${row.title}
+
-
+
+
-
${this._data.title}
+${this._data.title}
${this._getGenresView()} - +Overview
${this._data.overview}
@@ -143,46 +145,35 @@ export class MovieDetails extends connect(store)(localize(i18next)(LitElement)) `; } - _getGenresView(){ - + _getGenresView() { let date = moment(this._data.release_date).format("Do MMM, YYYY"); - let genresString = this._data.genres.map( (e) => e.name); - return html` - ${date} - - ${genresString.join(", ")} - - - `; + let genresString = this._data.genres.map((e) => e.name); + return html` ${date} - ${genresString.join(", ")} - `; } - _getBodyView(){ - - return html` -
- ${this._getCastView()}
-
- `;
+ _getBodyView() {
+ return html` ${this._getCastView()}
`;
}
- _getCastView(){
- if(this._credits !== undefined){
+ _getCastView() {
+ if (this._credits !== undefined) {
return html`
Cast
- ${this._credits.cast.slice(0, 20).map(row => {
+ ${this._credits.cast.slice(0, 20).map((row) => {
let imageUrl = "src/img/not-found/not-available.png";
- if(row.profile_path !== null){
+ if (row.profile_path !== null) {
imageUrl = "".concat(this.imageUrl, "/w500", row.profile_path);
}
- let releaseDate
-
- return html`
-
`;
@@ -193,13 +184,12 @@ export class MovieDetails extends connect(store)(localize(i18next)(LitElement))
_getData() {
if (this._id !== undefined) {
- api("/movie/" + this._id, 1)
- .then(res => this._data = res)
+ api("/movie/" + this._id, 1).then((res) => (this._data = res));
- api("/movie/" + this._id + "/credits", 1)
- .then(res => this._credits = res)
+ api("/movie/" + this._id + "/credits", 1).then(
+ (res) => (this._credits = res)
+ );
}
-
}
stateChanged(state) {
@@ -210,4 +200,4 @@ export class MovieDetails extends connect(store)(localize(i18next)(LitElement))
}
}
-window.customElements.define("movie-details", MovieDetails);
\ No newline at end of file
+window.customElements.define("movie-details", MovieDetails);
diff --git a/src/views/not-found.js b/src/views/not-found.js
index 568fd48..e543652 100644
--- a/src/views/not-found.js
+++ b/src/views/not-found.js
@@ -5,9 +5,8 @@ import { connect } from "pwa-helpers/connect-mixin.js";
import {store} from '../redux/store';
//Dw Components
-import '@dreamworld/dw-button';
+import '@material/mwc-button';
-import * as app from '../redux/app';
import * as router from '../redux/router';
export class NotFound extends connect(store)(LitElement){
@@ -44,7 +43,7 @@ export class NotFound extends connect(store)(LitElement){
return html`
+ let releaseDate;
+
+ return html`
- `
+
`;
})}
${row.name}
as ${row.character}
Page Not Found
-
- Next
+
Popular Persons
${this._getPersonsView()} @@ -99,12 +109,12 @@ export class AppPerson extends connect(store)(localize(i18next)(LitElement)){ return html`
- ${this._data.map( row => {
+ ${this._data.map((row) => {
let imageUrl = "src/img/not-found/not-available.png";
- if(row.profile_path !== null){
+ if (row.profile_path !== null) {
imageUrl = "".concat(this.imageUrl, "/w500", row.profile_path);
}
return html`
@@ -114,14 +124,13 @@ export class AppPerson extends connect(store)(localize(i18next)(LitElement)){
- `
+ `;
})}
${row.name}
-
+
-
file_download
- play_arrow
-
${this._data.name}
+${this._data.name}
- -Overview
${this._data.overview}
@@ -140,46 +131,38 @@ export class PersonView extends connect(store)(localize(i18next)(LitElement)) { `; } - _getGenresView(){ - + _getGenresView() { let date = new Date(this._data.release_date); - let genresString = this._data.genres.map( (e) => e.name); + let genresString = this._data.genres.map((e) => e.name); return html` - ${date.toLocaleDateString("en-US")} - - ${genresString.join(", ")} - - - `; + ${date.toLocaleDateString("en-US")} - ${genresString.join(", ")} - + `; } - _getBodyView(){ - - return html` -
- ${this._getCastView()}
-
- `;
+ _getBodyView() {
+ return html` ${this._getCastView()}
`;
}
- _getCastView(){
- if(this._credits !== undefined){
+ _getCastView() {
+ if (this._credits !== undefined) {
return html`
Known for
- ${this._credits.cast.map(row => {
-
+ ${this._credits.cast.map((row) => {
let mImageUrl = "src/img/not-found/not-available.png";
- if(row.poster_path !== null){
+ if (row.poster_path !== null) {
mImageUrl = "".concat(this.imageUrl, "/w500", row.poster_path);
- }
+ }
- return html`
-
`;
@@ -190,13 +173,12 @@ export class PersonView extends connect(store)(localize(i18next)(LitElement)) {
_getData() {
if (this._id !== undefined) {
- api("/person/" + this._id, 1)
- .then(res => this._data = res)
+ api("/person/" + this._id, 1).then((res) => (this._data = res));
- api("/person/" + this._id + "/credits", 1)
- .then(res => this._credits = res)
+ api("/person/" + this._id + "/credits", 1).then(
+ (res) => (this._credits = res)
+ );
}
-
}
stateChanged(state) {
@@ -207,4 +189,4 @@ export class PersonView extends connect(store)(localize(i18next)(LitElement)) {
}
}
-window.customElements.define("person-view", PersonView);
\ No newline at end of file
+window.customElements.define("person-view", PersonView);
diff --git a/src/views/test/test-element.js b/src/views/test/test-element.js
deleted file mode 100644
index 621f9a3..0000000
--- a/src/views/test/test-element.js
+++ /dev/null
@@ -1,225 +0,0 @@
-import { html, css } from "lit";
-
-import { DwSurface } from "../components/dw-surface";
-
-//Redux
-import { connect } from "pwa-helpers/connect-mixin.js";
-import { store } from "../../redux/store";
-
-//i18next
-import i18next from '@dw/i18next-esm';
-import { localize } from '@dw/pwa-helpers';
-
-//selectors
-import * as app from "../../redux/app";
-import * as router from '../../redux/router';
-
-import moment from "moment/src/moment";
-
-//components
-import "@dreamworld/dw-icon-button";
-import "./test-progress";
-
-export class TestElement extends connect(store)(localize(i18next)(DwSurface)){
- static styles = [
- DwSurface.styles,
- css`
- :host{
- width: min-content;
- overflow: hidden;
- cursor: pointer;
- margin-right: 20px;
- margin-bottom: 20px;
- transition: all 0.5s ease-in-out;
- overflow: hidden;
- border-radius: 16px;
- background-color: #29333D;
- color: white;
- }
-
- :host([selected]){
- transform: scale(1.12);
- box-shadow: var(--mdc-elevation--z8);
- color: #04BCD4;
- z-index: 999;
- }
-
- :host([selected]) dw-icon-button{
- --dw-icon-color: #04BCD4;
- }
-
- .image{
- overflow: hidden;
- position: relative;
- }
-
- .image::after{
- width: 100%;
- height: 100%;
- position: absolute;
- content: "";
- left:0;
- bottom:4px;
- background-image: linear-gradient(to bottom, rgba(256,256,256, 0) 85%, rgb(53,63,71,0.8) 100%);
- }
-
- .image img {
- width: auto;
- height: 200px;
- }
-
- .details{
- padding: 4px 12px;
- display: flex;
- }
-
- .icon{
- width: min-content;
- justify-content: center;
- align-items: center;
- display: flex;
- }
-
- .title{
- margin-left: 12px;
- }
-
- .title h2{
- margin: 0px;
- font-size: 20px;
- font-weight: 500;
- }
-
- .title h5{
- margin: 0;
- font-size: 12px;
- font-weight: 500;
- }
-
- dw-icon-button{
- border: solid 1px;
- border-radius: 50%;
-
- --dw-icon-color: white;
- --dw-icon-color-active: #04BCD4;
- }
- `
- ]
-
- static properties = {
- _title: {
- type: String
- },
- _length: {
- type: Number
- },
- _thumbUrl: {
- type: String
- },
- _language: {
- type: String
- },
- _recordingDate: {
- type: String
- },
- _status: {
- type: String
- },
- _size: {
- type: Number
- },
- _downloadedSize: {
- type: Number
- },
- selected: {
- type: Boolean,
- reflect: true
- }
- }
-
- constructor(){
- super();
- this.elevation = 2;
- this.selected = false;
- this.addEventListener('click', this._onClick);
-
- this._title = "Geeta A-12, SL-2, P-2";
- this._length = 45;
- this._language = "Gujrati";
- this._recordingDate = "1986-01-01";
- this._status = "SCHEDULED";
- this._size = 700000;
- this._thumbUrl = "https://image.tmdb.org/t/p/w500/eD1C60oJXvA5uYVBx3k6lq2RMve.jpg";
- this._downloadedSize = 0;
- }
-
- get _getContentTemplate(){
- let percentage = Math.round(100*this._downloadedSize/this._size);
-
- return html`
-
+ return html`
- 
+
- `
+
`;
})}
${row.title}
- ${row.character !== null && row.character !== "" ? html`as ${row.character}
` : html``} + ${row.character !== null && row.character !== "" + ? html`as ${row.character}
` + : html``}
- 
-
-
-
- `
- }
-
- _statusView(){
-
- if(this._status === "SCHEDULED"){
- return html`Download Queued ${this._size/1000} MB`
- }
-
- if(this._status === "DOWNLOADING"){
- return html`Downloading... ${this._downloadedSize/1000}/${this._size/1000} MB`
- }
-
- if(this._status === "READY"){
- return html`Ready ${this._size/1000} MB`
- }
- }
-
- _timeout(){
- if(this._downloadedSize < this._size){
- setTimeout(() => {
- this._downloadedSize = this._downloadedSize + 14000;
-
- this._timeout();
- }, 500)
- return;
- }
- this._status = "READY";
- }
-
- _onClick(e){
- if(this.selected){
- this.selected = false;
- return;
- }
- this.selected = true;
-
- }
-
- _onIconClick(e){
- if(this._status === "SCHEDULED"){
- this._status = "DOWNLOADING";
- this._timeout();
-
- }
- }
-
- stateChanged(state){
-
- }
-}
-
-window.customElements.define("test-element", TestElement);
\ No newline at end of file
diff --git a/src/views/test/test-page.js b/src/views/test/test-page.js
deleted file mode 100644
index d4b3fb4..0000000
--- a/src/views/test/test-page.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { LitElement, html, css } from "lit";
-
-//Redux
-import { connect } from "pwa-helpers/connect-mixin.js";
-import { store } from "../../redux/store";
-
-import * as app from "../../redux/app";
-import * as router from "../../redux/router";
-import api from "../../redux/api";
-
-//i18next
-import i18next from '@dw/i18next-esm';
-import { localize } from '@dw/pwa-helpers';
-
-//components
-import "./test-element";
-
-export class TestPage extends connect(store)(localize(i18next)(LitElement)){
- static styles = [
- css`
- :host{
- display: flex;
- flex: 1;
- flex-wrap: wrap;
- justify-content: start;
- padding: 16px;
- }
- `
- ]
-
- static properties = {
-
- }
-
- constructor(){
- super();
- }
-
- render(){
- return this._getInitView();
- }
-
- _getInitView(){
- return html`
-
-
-
-
- ${this._title}
-${this._length} min - ${this._language} - ${moment(this._recordingDate).format("YYYY")}
-${this._statusView()}
-
-
- `;
- }
-
- if(this.status === "READY"){
- return html`
-
-
-
-
-
- `;
- }
-
- if(this.status === "DOWNLOADING"){
- let dashoffset = Math.round(135-(135*this.progress/100)) + "px";
- return html`
-
-
-
- ${this.progress}%
-
-
- `;
- }
- }
-
-
-
- constructor(){
- super();
- this.progress = 0;
- }
-}
-
-window.customElements.define("test-progress", TestProgress);
\ No newline at end of file
diff --git a/src/views/tv-shows/tv-shows.js b/src/views/tv-shows/tv-shows.js
index d7c001c..caef3df 100644
--- a/src/views/tv-shows/tv-shows.js
+++ b/src/views/tv-shows/tv-shows.js
@@ -1,26 +1,13 @@
-import { LitElement, html, css } from "lit";
+import { LitElement, html } from "lit";
//Redux
import { connect } from "pwa-helpers/connect-mixin.js";
-import {store} from '../../redux/store';
+import { store } from "../../redux/store";
-export class TvShows extends connect(store)(LitElement){
-
- static styles = css`
-
- `;
-
- static properties = {
-
- }
-
- constructor(){
- super();
- }
-
- render(){
+export class TvShows extends connect(store)(LitElement) {
+ render() {
return html`
-
-
-
-