Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

directionMNGT #31

Merged
merged 2 commits into from
May 14, 2021
Merged

directionMNGT #31

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
255d64c
directionMNGT
dvirberlo May 13, 2021
3e26020
Merge branch 'master' into directionMNGT
dvirberlo May 13, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 22 additions & 19 deletions src/app/components/content-list/content-list.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="header">
<div class="header {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<h2>
<svg *ngIf="tipo == 'playlist'" xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-list"
width="32" height="32" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round"
Expand Down Expand Up @@ -57,12 +57,12 @@ <h2>
</div>
</div>

<div class="listagem-conteudo list-group" [ngClass]="{'mobile-mode': modoMobile}">
<div class="listagem-conteudo list-group {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}" [ngClass]="{'mobile-mode': modoMobile}">
<div [ngClass]="{'active': (tipo == 'track' || tipo == 'album') && (playerState?.item.id == getRootItem(item).id || playerState?.item.album.id == getRootItem(item).id)}"
class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
*ngFor="let item of lista" (click)="abrirArtista(tipo == 'artist' ? getRootItem(item).id : null)">

<div class="img mr-1" *ngIf="canLoadImage()">
<div class="img me-1" *ngIf="canLoadImage()">
<img *ngIf="tipo == 'track'" style="max-width: 60px" onerror="this.src = 'assets/standart-album-icon.png'"
[src]="album ? album.images[0].url : getRootItem(item).album.images[0]?.url"
alt="getRootItem(item).album.name" />
Expand All @@ -77,37 +77,40 @@ <h2>
<a [routerLink]="['/album/' + ( album ? album.id : getRootItem(item).album.id)]">
{{ album ? album.name : getRootItem(item).album.name }}
</a>
-
<span> - </span>
<a [routerLink]="['/artist/' + (album != null ? album.artists[0].id : getRootItem(item).album.artists[0].id)]">
{{ album ? album.artists[0].name : getRootItem(item).album.artists[0].name }}
</a>
</span>

<span *ngIf="tipo == 'album'">
<span *ngIf="tipo == 'album'" class="d-flex flex-row flex-wrap">
<a [routerLink]="['/album/' + getRootItem(item).id]">
{{ getRootItem(item).name }}
</a>
-
&nbsp;-&nbsp;
<a [routerLink]="['/artist/' + getRootItem(item).artists[0].id]">
{{ getRootItem(item).artists[0].name }}
</a>
-
{{ getRootItem(item).total_tracks }} <span style="text-transform: lowercase;">{{ getRootItem(item).total_tracks > 1 || getRootItem(item).total_tracks == 0 ? ('MusicListTracksPlural' | translate) : ('MusicListTracks' | translate) }}</span>
</a>&nbsp;-&nbsp;<span>{{
getRootItem(item).total_tracks }}&nbsp;<span style="text-transform: lowercase;">{{ getRootItem(item).total_tracks > 1 || getRootItem(item).total_tracks == 0 ? ('MusicListTracksPlural' | translate) : ('MusicListTracks' | translate) }}</span></span>
</span>

<span *ngIf="tipo == 'playlist'">
<span *ngIf="tipo == 'playlist'" class="d-flex flex-row flex-wrap">
<a [routerLink]="['/playlist/' + getRootItem(item).id]">
{{ getRootItem(item).name }}
</a>
-
{{ getRootItem(item).owner.display_name }} - {{
getRootItem(item).tracks.total | numberLocale:this.translateService.currentLang }}
<span style="text-transform: lowercase;">{{ getRootItem(item).tracks.total > 1 || getRootItem(item).tracks.total == 0 ? ('MusicListTracksPlural' | translate) : ('MusicListTracks' | translate) }}</span></span>

<span *ngIf="tipo == 'artist'">{{ getRootItem(item).name }} - {{
getRootItem(item).followers.total | numberLocale:this.translateService.currentLang }}

<span style="text-transform: lowercase;">{{ getRootItem(item).followers.total > 1 || getRootItem(item).followers.total == 0 ? ('MusicListFollowersPlural' | translate) : ('MusicListFollowers' | translate) }}</span>
&nbsp;-&nbsp;
{{ getRootItem(item).owner.display_name }}&nbsp;-&nbsp;
<span>{{
getRootItem(item).tracks.total
}}&nbsp;<span style="text-transform: lowercase;">{{ getRootItem(item).tracks.total > 1 || getRootItem(item).tracks.total == 0 ? ('MusicListTracksPlural' | translate) : ('MusicListTracks' | translate) }}</span>
</span>
</span>

<span *ngIf="tipo == 'artist'" class="d-flex flex-row flex-wrap">{{ getRootItem(item).name }}&nbsp;-&nbsp;
<span>{{
getRootItem(item).followers.total
}}&nbsp;<span style="text-transform: lowercase;">{{ getRootItem(item).followers.total > 1 || getRootItem(item).followers.total == 0 ? ('MusicListFollowersPlural' | translate) : ('MusicListFollowers' | translate) }}</span>
</span>
</span>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/app/components/header/header.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
max-width: 240px;
width: 100%;
transition: .2s all;
right: 0;
inset-inline-end: 0;
z-index: 100;
}

Expand Down
10 changes: 5 additions & 5 deletions src/app/components/header/header.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<nav class="navbar navbar-expand-lg navbar-dark custom-bg d-flex justify-content-between align-items-center">
<nav class="navbar navbar-expand-lg navbar-dark custom-bg d-flex justify-content-between align-items-center {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<div class="navegacao d-flex align-items-center">
<a class="navbar-brand d-flex align-items-center" href="#">
<img style="max-width: 38px; margin-right: .5em;" src="assets/logo.png" alt="Litefy Logo">
<img class="me-2" style="max-width: 38px;" src="assets/logo.png" alt="Litefy Logo">
Litefy
</a>

Expand All @@ -14,7 +14,7 @@
</svg>
</div>

<ul *ngIf="auth.Autenticado()" class="menu navbar-nav mr-auto" [ngClass]="{'open': menuAberto}">
<ul *ngIf="auth.Autenticado()" class="menu navbar-nav me-auto" [ngClass]="{'open': menuAberto}">
<li class="nav-item">
<a class="nav-link" [routerLink]="['/search']" (click)="menuAberto = false">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-search" width="32" height="32"
Expand Down Expand Up @@ -59,9 +59,9 @@
</div>

<div class="d-flex justify-content-between align-items-center">
<div class="user-area mr-2" *ngIf="auth.Autenticado()">
<div class="user-area me-2" *ngIf="auth.Autenticado()">
<div class="cabecalho" (click)="userMenuAberto = !userMenuAberto">
<img *ngIf="canLoadImage()" onerror="this.src = 'assets/standart-artist-icon.png'" class="mr-2" [src]="dados?.images[0]?.url" [alt]="dados?.display_name" />
<img *ngIf="canLoadImage()" onerror="this.src = 'assets/standart-artist-icon.png'" class="me-2" [src]="dados?.images[0]?.url" [alt]="dados?.display_name" />

<div class="textos text-white hide-mobile">
<strong class="mb-0">{{ dados?.display_name }}</strong>
Expand Down
6 changes: 3 additions & 3 deletions src/app/components/player/player.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="player">
<div class="player {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<div *ngIf="premium ? playerStatus : true" class="player-wrapper d-flex justify-content-between align-items-center">
<div class="tracking" *ngIf="premium">
<input id="playerSeek" #playerSeek [ngStyle]="seekStyle" type="range" [value]="progress / 1000" min="0"
Expand All @@ -9,7 +9,7 @@
<div class="d-flex align-items-center text-white">
<a *ngIf="playerStatus && canLoadImage()" [routerLink]="['album/' + playerStatus?.item.album.id]">
<img [alt]="playerStatus?.item.album.name" [title]="playerStatus?.item.album.name"
[src]="playerStatus?.item.album.images[2].url" class="img-responsive mr-2 hide-mobile" />
[src]="playerStatus?.item.album.images[2].url" class="img-responsive me-2 hide-mobile" />
</a>

<div class="d-flex flex-column">
Expand Down Expand Up @@ -65,7 +65,7 @@
</div>

<div class="botoes-contole">
<div class="btn-group volume-btn" role="group">
<div class="btn-group volume-btn" role="group" dir="ltr">
<button [disabled]="premium ? !playerStatus : false" type="button" (click)="previous()" class="button-custom">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-skip-back" width="24"
height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round"
Expand Down
3 changes: 3 additions & 0 deletions src/app/components/player/player.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ export class PlayerComponent extends SettingsBase implements OnInit, OnChanges {
injector: Injector
) {
super(injector);
const defaultLanguage = window.localStorage.getItem("languageSelected");
translate.addLangs(["pt", "en", "es", "he"]);
translate.setDefaultLang(defaultLanguage || "pt");
}

player: any;
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/shearch-box/shearch-box.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
background: transparent;
border: 0;
position: absolute;
right: 10px;
inset-inline-end: 10px;
top: 50%;
transform: translateY(-50%);
z-index: 8;
Expand Down
2 changes: 1 addition & 1 deletion src/app/components/shearch-box/shearch-box.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="search-container input-group">
<div class="search-container input-group {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<input type="text" [placeholder]="'SearchPlaceholderText' | translate" [(ngModel)]="termo" class="form-control search-field" />

<button type="button" (click)="buscar()" class="search-btn">
Expand Down
6 changes: 3 additions & 3 deletions src/app/components/youtube-player/youtube-player.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="player">
<div class="player {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<div *ngIf="playerService.showVideo" class="player-wrapper d-flex justify-content-between align-items-center">
<div class="d-flex align-items-center text-white">
<div class="video-wrapper" [ngClass]="{'hidden-video': !playerStatus}" class="mr-2">
<div class="video-wrapper" [ngClass]="{'hidden-video': !playerStatus}" class="me-2">
<div id="player-video"></div>
</div>

Expand Down Expand Up @@ -39,7 +39,7 @@
</div>

<div class="botoes-contole">
<div class="btn-group volume-btn" role="group">
<div class="btn-group volume-btn" role="group" dir="ltr">
<button [disabled]="!playerStatus" type="button" (click)="previous()" class="button-custom">
<svg xmlns="http://www.w3.org/2000/svg" class="icon icon-tabler icon-tabler-player-skip-back" width="24"
height="24" viewBox="0 0 24 24" stroke-width="1.5" stroke="#ffffff" fill="none" stroke-linecap="round"
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/album/album.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="app container mt-4" *ngIf="album">
<div class="app container mt-4 {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}" *ngIf="album">
<div class="row">
<div class="col-md-12">
<div class="album-header" [ngStyle]="{'background-image': canLoadImage() ? 'url(' + album?.images[0].url + ')' : ''}">
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/artist/artist.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="app container mt-4" *ngIf="artist">
<div class="app container mt-4 {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}" *ngIf="artist">
<div class="row">
<div class="col-md-12">
<div class="artist-header" [ngStyle]="{'background-image': canLoadImage() ? 'url(' + artist.images[0].url + ')' : ''}">
Expand Down
6 changes: 3 additions & 3 deletions src/app/pages/home/home.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div *ngIf="requisicoesCompletas" class="app container mt-4">
<div *ngIf="requisicoesCompletas" class="app container mt-4 {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<div class="row mt-4">
<div class="col-md-6">
<app-content-list [titulo]="'HomeArtistsText' | translate" tipo="artist" [lista]="topArtists"></app-content-list>
Expand All @@ -9,13 +9,13 @@
</div>
</div>

<div class="row mt-4">
<div class="row mt-4 {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<div class="col-md-12">
<app-content-list [titulo]="'HomeAlbumsText' | translate" tipo="album" [lista]="newAlbuns"></app-content-list>
</div>
</div>

<div class="row mt-4">
<div class="row mt-4 {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<div class="col-md-12">
<app-content-list [titulo]="'HomePlaylistsText' | translate" tipo="playlist" [lista]="featuredPlaylists"></app-content-list>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/karaoke/karaoke.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<ng-container *ngIf="lyrics && playerStatus">
<div class="app container text-center mt-4">
<div class="app container text-center mt-4 {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<h2 *ngIf="premium" class="mb-3">{{ playerStatus.item.name }} - {{ playerStatus.item.album.artists[0]?.name }}</h2>
<h2 *ngIf="!premium" class="mb-3">{{ playerStatus.trackName }} - {{ playerStatus.artistName }}</h2>

Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/library/library.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div *ngIf="usuarioLogado" class="app container mt-4">
<div *ngIf="usuarioLogado" class="app container mt-4 {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<div class="row">
<div class="col-12">
<h2>{{ 'Hello' | translate }}, {{ usuarioLogado.display_name }}. 😁</h2>
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/login/login-authenticate/login-authenticate.component.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
#soundbars span {
width: 1.25em;
height: 1.875em;
margin-left: 1px;
margin-inline-start: 1px;
background-color: #00c36f;
display: inline-block;
transform-style: preserve-3d;
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/login/login-authenticate/login-authenticate.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="container">
<div class="container {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<div class="mt-4 text-center d-flex align-items-center justify-content-center flex-column">
<h1>{{ 'LoginDescriptionText' | translate }}</h1>
<p class="my-4">
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/playlist/playlist.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="app container mt-4" *ngIf="playlist">
<div class="app container mt-4 {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}" *ngIf="playlist">
<div class="row">
<div class="col-md-12">
<div class="playlist-header" [ngStyle]="{'background-image': canLoadImage() ? 'url(' + (playlist?.images.length > 0 ? playlist.images[0].url : 'assets/standart-album-icon.png') + ')' : ''}">
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/search/search.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="app container mt-4">
<div class="app container mt-4 {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<div class="row">
<div class="col-12">
<app-shearch-box [exportaResultados]="true" (resultadosBusca)="obterResultados($event)"></app-shearch-box>
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/settings/settings.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="app container mt-4">
<div class="app container mt-4 {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<h2 class="mb-3">⚙ {{ 'SettingsPageTitle' | translate }}</h2>

<div class="list-group">
Expand Down
2 changes: 1 addition & 1 deletion src/app/pages/user-profile/user-profile.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="app container mt-4">
<div class="app container mt-4 {{ ('direction' | translate) === 'rtl' ? 'rtl-custom' : ''}}">
<h2 class="mb-3">👤 {{ 'ProfileText' | translate }}</h2>

<div class="row">
Expand Down
2 changes: 1 addition & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!doctype html>
<html lang="pt-BR">
<html>
<head>
<meta charset="utf-8">
<title>Litefy - a litghtweight spotify client</title>
Expand Down
54 changes: 54 additions & 0 deletions src/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,4 +70,58 @@ a:hover {
.hide-mobile {
display: none !important;
}
}

/* support of RTL and LTR */
.rtl-custom{
direction: rtl;
text-align: right;
}
.ltr-custom{
direction: ltr;
text-align: left;
}
/* please consider using Bootsrap 5 (https://getbootstrap.com/docs/5.0/utilities/spacing/) */
.ms-auto{
margin-inline-start: auto!important;
}
.ms-0{
margin-inline-start: 0!important;
}
.ms-1{
margin-inline-start: .25rem!important;
}
.ms-2{
margin-inline-start: .5rem!important;
}
.ms-3{
margin-inline-start: 1rem!important;
}
.ms-4{
margin-inline-start: 1.5rem!important;
}
.ms-5{
margin-inline-start: 3rem!important;
}

.me-auto{
margin-inline-end: auto!important;
}
.me-0{
margin-inline-end: 0!important;
}
.me-1{
margin-inline-end: .25rem!important;
}
.me-2{
margin-inline-end: .5rem!important;
}
.me-3{
margin-inline-end: 1rem!important;
}
.me-4{
margin-inline-end: 1.5rem!important;
}
.me-5{
margin-inline-end: 3rem!important;
}