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.

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

Implemented Tvshowid_int page #129

Merged
merged 4 commits into from
Aug 22, 2022
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion elm.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@
"elm-explorations/markdown": "1.0.0",
"icidasset/elm-material-icons": "7.0.0",
"mdgriffith/elm-ui": "1.1.8",
"myrho/elm-round": "1.0.4",
"phollyer/elm-ui-dropdown": "2.2.2",
"ryannhg/elm-spa": "6.0.0"
},
Expand All @@ -43,7 +44,6 @@
"fredcy/elm-parseint": "2.0.1",
"miniBill/elm-ui-with-context": "1.1.0",
"mpizenberg/elm-pointer-events": "4.0.2",
"myrho/elm-round": "1.0.4",
"noahzgordon/elm-color-extra": "1.0.2",
"phollyer/elm-cursor": "1.1.1",
"pzp1997/assoc-list": "1.0.0",
Expand Down
28 changes: 23 additions & 5 deletions public/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -285,6 +285,9 @@ h2 {
width: 100%;
height: auto;
}
.card-parent {
margin: 20px 0 0 20px !important;
}
.card-parent:hover > .card {
opacity: 1;
transition: opacity 0.3s;
Expand Down Expand Up @@ -319,20 +322,18 @@ h2 {
position: absolute !important;
cursor: pointer;
}
.image-gradient {
position: absolute !important;
}
.image-gradient > div > img {
.image-gradient img {
-webkit-mask-image: linear-gradient(
90deg,
rgba(2, 0, 36, 0) 10%,
rgba(9, 9, 121, 1) 130%
) !important;
mask-image: linear-gradient(
to right,
to left,
rgba(0, 0, 0, 1),
razzeee marked this conversation as resolved.
Show resolved Hide resolved
rgba(0, 0, 0, 0)
) !important;
height: 100%;
}
.video-modal {
z-index: 3;
Expand All @@ -356,6 +357,23 @@ h2 {
filter: grayscale(0%);
}

#description {
display: none;
}

#description:checked + label {
height: 100%;
}
.description-text {
razzeee marked this conversation as resolved.
Show resolved Hide resolved
display: block;
word-break: break-word;
white-space: normal;
overflow: hidden;
height: 22px;
line-height: 1.5em;
cursor: pointer;
}

@keyframes popup {
0% {
transform: scale(5) rotate(0);
Expand Down
49 changes: 45 additions & 4 deletions src/Components/SectionHeader.elm
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
module Components.SectionHeader exposing (view, viewAlbums, viewArtists, viewMovies, viewTvShows, viewVideos)
module Components.SectionHeader exposing (view, viewAlbums, viewArtists, viewMovies, viewSeasons, viewTvShows, viewVideos)

import Colors exposing (cardHover)
import Element as Element exposing (Attribute, Element, alignBottom, alignLeft, alignRight, alignTop, centerX, centerY, clipX, column, el, fill, fillPortion, height, image, maximum, minimum, mouseOver, padding, paddingEach, paddingXY, px, rgb, row, spacingXY, width, wrappedRow)
Expand All @@ -10,10 +10,11 @@ import Helper exposing (durationToString)
import Html.Attributes
import Material.Icons as Filled
import Material.Icons.Types as MITypes exposing (Icon)
import Round
import Spa.Generated.Route as Route exposing (Route)
import Url exposing (percentDecode, percentEncode)
import Url.Builder exposing (crossOrigin)
import WSDecoder exposing (AlbumObj, ArtistObj, ItemDetails, MovieObj, SongObj, TvshowObj, VideoObj)
import WSDecoder exposing (AlbumObj, ArtistObj, ItemDetails, MovieObj, SeasonObj, SongObj, TvshowObj, VideoObj)


view : String -> Maybe msg -> Bool -> List { title : String, action : Maybe msg } -> Element msg
Expand Down Expand Up @@ -276,12 +277,52 @@ viewTvShows buttonMsg tvshow =
, el [ alignBottom, padding 10 ] (materialButtonBig ( Filled.play_arrow, buttonMsg ))
]
, Element.link [ Element.width fill, Element.height fill, alignBottom, paddingEach { left = 10, right = 0, top = 10, bottom = 10 }, Font.color Colors.black ]
{ url = "" -- TODO : direct the link towards the individual tvshow page once the routing has been implemented
{ url = Route.toString (Route.Tvshows__Tvshowid_Int { tvshowid = tvshow.tvshowid })
, label =
column []
[ Element.text tvshow.label
, el [ paddingEach { left = 0, right = 0, top = 5, bottom = 0 }, Font.color Colors.greyscaleGray, Font.size 13 ]
(Element.text (String.slice 0 3 (String.fromFloat tvshow.rating)))
(Element.text (Round.round 1 tvshow.rating))
]
}
]


viewSeasons : msg -> SeasonObj -> Element msg
viewSeasons buttonMsg season =
column
[ Background.color (rgb 1 1 1)
, Element.htmlAttribute (Html.Attributes.class "card-parent")
, Element.height (fill |> maximum 310)
, Element.width (fill |> minimum 170 |> maximum 170)
, Element.htmlAttribute (Html.Attributes.style "box-shadow" "0px 0px 2px #888888")
]
[ case season.poster of
"" ->
image [ alignTop, width fill, height fill ]
{ src = "/thumbnail_default.png"
, description = "Default thumbnail"
}

_ ->
image [ alignTop, width fill, height fill ]
{ src = crossOrigin "http://localhost:8080" [ "image", percentEncode season.poster ] []
, description = "Poster"
}
, column [ Element.htmlAttribute (Html.Attributes.class "card"), Element.height (px 255), Element.width (fill |> minimum 170 |> maximum 170), Background.color cardHover ]
[ row [ alignTop, alignRight, paddingXY 0 10 ]
[ materialButton ( Filled.check_box_outline_blank, buttonMsg ) -- TODO : checkbox to Set Watched
, materialButtonBig ( Filled.more_vert, buttonMsg ) -- TODO : Add Dropdown
]
, el [ alignBottom, padding 10 ] (materialButtonBig ( Filled.play_arrow, buttonMsg )) -- TODO: make it functional once EpisodeObjs have been created
]
, Element.link [ Element.width fill, Element.height fill, alignBottom, paddingEach { left = 10, right = 0, top = 10, bottom = 10 }, Font.color Colors.black ]
{ url = "" --- TODO : redirect url to seasonid_int page when it gets implemented
, label =
column []
[ Element.text season.label
, el [ paddingEach { left = 0, right = 0, top = 5, bottom = 0 }, Font.color Colors.greyscaleGray, Font.size 13 ]
(Element.text (String.fromInt season.episode ++ " episodes"))
]
}
]
Expand Down
31 changes: 16 additions & 15 deletions src/Pages/Music/Album/Albumid_Int.elm
Original file line number Diff line number Diff line change
Expand Up @@ -151,8 +151,8 @@ view model =
]

Just album ->
column [ Element.height fill, Element.width fill, Background.color Colors.sidebar ]
[ row [ Element.height (fillPortion 1), Element.width fill, Background.color (Element.rgba255 50 53 55 1), Element.htmlAttribute (Html.Attributes.class "card-parent"), padding 30 ]
column [ Element.height fill, Element.width fill ]
[ row [ Element.height (fill |> maximum 300), Element.width fill, Background.color (Element.rgba255 50 53 55 1) ]
[ column [ Element.width (px 250), Element.height (px 250), Element.htmlAttribute (Html.Attributes.class "card-parent") ]
[ case album.thumbnail of
"" ->
Expand Down Expand Up @@ -181,7 +181,7 @@ view model =
)
]
]
, column [ alignTop, Element.height fill, Element.width (fillPortion 7), paddingXY 10 25 ]
, column [ Element.width fill, paddingXY 10 25 ]
[ row [] [ el [ Font.color white, Font.size 30 ] (Element.text album.label), el [ alignBottom, paddingXY 10 0, Font.size 15 ] (Element.text (String.fromInt album.year)) ]
, column [ paddingXY 0 35, spacingXY 0 10, Font.size 14 ]
[ row []
Expand Down Expand Up @@ -224,8 +224,20 @@ view model =
}
]
]
, case album.fanart of
"" ->
image [ Element.width fill, Element.height fill, Element.htmlAttribute (Html.Attributes.class "image-gradient") ]
{ src = "/concert.jpg"
, description = "Default"
}

_ ->
image [ Element.width fill, Element.height fill, Element.htmlAttribute (Html.Attributes.class "image-gradient") ]
{ src = crossOrigin "http://localhost:8080" [ "image", percentEncode album.fanart ] []
, description = "Fanart"
}
]
, column [ Element.height (fillPortion 5), Element.width fill, paddingXY 15 25, spacingXY 5 7 ]
, column [ Element.height fill, Element.width fill, paddingXY 15 25, spacingXY 5 7, Background.color (Element.rgba255 245 245 245 1) ]
(List.map
(\song ->
el [ Element.width (fill |> maximum 1200), paddingEach { left = 10, top = 0, right = 60, bottom = 0 } ]
Expand Down Expand Up @@ -255,17 +267,6 @@ view model =
)
model.song_list
)
, case album.fanart of
"" ->
Element.none

_ ->
column [ Element.htmlAttribute (Html.Attributes.class "image-gradient"), alignRight, alignTop ]
[ image [ Element.width (fillPortion 2 |> maximum 550) ]
{ src = crossOrigin "http://localhost:8080" [ "image", percentEncode album.fanart ] []
, description = "Fanart"
}
]
]
]
}
16 changes: 7 additions & 9 deletions src/Pages/Music/Videos/Videoid_Int.elm
Original file line number Diff line number Diff line change
Expand Up @@ -159,8 +159,8 @@ view model =
]

Just video ->
column [ Element.height fill, Element.width fill, Background.color Colors.sidebar ]
[ row [ Element.height (fillPortion 1), Element.width fill, Background.color (Element.rgba255 50 53 55 1), Element.htmlAttribute (Html.Attributes.class "card-parent"), paddingXY 20 10 ]
column [ Element.height fill, Element.width fill ]
[ row [ Element.height (fill |> maximum 300), Element.width fill, Background.color (Element.rgba255 50 53 55 1) ]
[ column [ Element.width (px 250), Element.height (px 250), Element.htmlAttribute (Html.Attributes.class "card-parent") ]
[ case video.thumbnail of
"" ->
Expand Down Expand Up @@ -189,7 +189,7 @@ view model =
)
]
]
, column [ alignTop, Element.height fill, Element.width (fillPortion 7), paddingXY 10 35 ]
, column [ Element.height fill, Element.width fill, paddingXY 10 35 ]
[ el [ Font.color white, Font.size 30 ] (Element.text video.label)
, column [ paddingEach { top = 30, left = 0, right = 0, bottom = 0 }, spacingXY 0 12, Font.size 14 ]
[ row []
Expand Down Expand Up @@ -237,16 +237,14 @@ view model =
}
]
]
]
, column [ Element.height (fillPortion 5), Element.width fill, paddingXY 35 35, spacingXY 5 7 ]
[ el [ Font.size 30, Font.color black ] (Element.text "Related music videos from YouTube")
]
, column [ Element.htmlAttribute (Html.Attributes.class "image-gradient"), alignRight, alignTop ]
[ image [ Element.width (fillPortion 2 |> maximum 540) ]
, image [ Element.width fill, Element.height fill, Element.htmlAttribute (Html.Attributes.class "image-gradient") ]
{ src = "/concert.jpg"
, description = "Fanart"
}
]
, column [ Element.height fill, Element.width fill, paddingXY 35 35, spacingXY 5 7 ]
[ el [ Font.size 30, Font.color black ] (Element.text "Related music videos from YouTube")
]
, case model.modalstate of
Open ->
column [ Element.htmlAttribute (Html.Attributes.class "video-modal"), Element.width fill, Element.height fill ]
Expand Down
2 changes: 1 addition & 1 deletion src/Pages/Tvshows/Recent.elm
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ type alias Model =
init : Shared.Model -> Url Params -> ( Model, Cmd Msg )
init shared url =
( { currentlyPlaying = shared.currentlyPlaying, tvshow_list = shared.tvshow_list, route = url.route }
, sendAction """{"jsonrpc": "2.0", "method": "VideoLibrary.GetTvshows", "params": { "filter": {"field": "playcount", "operator": "is", "value": "0"}, "properties" : ["art", "rating", "thumbnail", "playcount", "file","year","dateadded"], "sort": { "order": "ascending", "method": "label", "ignorearticle": true } }, "id": "libTvshows"}"""
, sendAction """{"jsonrpc": "2.0", "method": "VideoLibrary.GetTvshows", "params": { "filter": {"field": "playcount", "operator": "is", "value": "0"}, "properties" : ["art", "rating", "thumbnail", "playcount", "file","year","dateadded","mpaa","genre","season","studio","episode","watchedepisodes","plot","cast"], "sort": { "order": "ascending", "method": "label", "ignorearticle": true } }, "id": "libTvshows"}"""
)


Expand Down
Loading