├── .gitattributes ├── .gitignore ├── BlazorMovieLive.csproj ├── BlazorMovieLive.sln ├── Components ├── App.razor ├── Layout │ ├── Footer.razor │ ├── Footer.razor.css │ ├── MainLayout.razor │ ├── TopNavLayout.razor │ ├── TopNavMenu.razor │ └── TopNavMenu.razor.css ├── Pages │ ├── Home.razor │ ├── Movie.razor │ └── Movie.razor.css ├── Ui │ ├── MovieCard.razor │ ├── Paginator.razor │ └── Paginator.razor.css └── _Imports.razor ├── Models ├── MovieDetails.cs ├── PopularMovie.cs └── PopularMoviePagedResponse.cs ├── Program.cs ├── Properties └── launchSettings.json ├── README.md ├── Services └── TMDBClient.cs └── wwwroot ├── appsettings.json ├── css ├── app.css └── themes.css ├── favicon-16x16.png ├── favicon-32x32.png ├── favicon.ico ├── images ├── BlazorMovieLogo_v2_o.png ├── BlazorMovieLogo_v2_w.png ├── MarkSpectreLogoLight.png ├── PosterPlaceHolder.png └── THEMOVEDBLogo.svg ├── index.html └── js └── vanilla-tilt.min.js /.gitattributes: -------------------------------------------------------------------------------- 1 | ############################################################################### 2 | # Set default behavior to automatically normalize line endings. 3 | ############################################################################### 4 | * text=auto 5 | 6 | ############################################################################### 7 | # Set default behavior for command prompt diff. 8 | # 9 | # This is need for earlier builds of msysgit that does not have it on by 10 | # default for csharp files. 11 | # Note: This is only used by command line 12 | ############################################################################### 13 | #*.cs diff=csharp 14 | 15 | ############################################################################### 16 | # Set the merge driver for project and solution files 17 | # 18 | # Merging from the command prompt will add diff markers to the files if there 19 | # are conflicts (Merging from VS is not affected by the settings below, in VS 20 | # the diff markers are never inserted). Diff markers may cause the following 21 | # file extensions to fail to load in VS. An alternative would be to treat 22 | # these files as binary and thus will always conflict and require user 23 | # intervention with every merge. To do so, just uncomment the entries below 24 | ############################################################################### 25 | #*.sln merge=binary 26 | #*.csproj merge=binary 27 | #*.vbproj merge=binary 28 | #*.vcxproj merge=binary 29 | #*.vcproj merge=binary 30 | #*.dbproj merge=binary 31 | #*.fsproj merge=binary 32 | #*.lsproj merge=binary 33 | #*.wixproj merge=binary 34 | #*.modelproj merge=binary 35 | #*.sqlproj merge=binary 36 | #*.wwaproj merge=binary 37 | 38 | ############################################################################### 39 | # behavior for image files 40 | # 41 | # image files are treated as binary by default. 42 | ############################################################################### 43 | #*.jpg binary 44 | #*.png binary 45 | #*.gif binary 46 | 47 | ############################################################################### 48 | # diff behavior for common document formats 49 | # 50 | # Convert binary document formats to text before diffing them. This feature 51 | # is only available from the command line. Turn it on by uncommenting the 52 | # entries below. 53 | ############################################################################### 54 | #*.doc diff=astextplain 55 | #*.DOC diff=astextplain 56 | #*.docx diff=astextplain 57 | #*.DOCX diff=astextplain 58 | #*.dot diff=astextplain 59 | #*.DOT diff=astextplain 60 | #*.pdf diff=astextplain 61 | #*.PDF diff=astextplain 62 | #*.rtf diff=astextplain 63 | #*.RTF diff=astextplain 64 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | ## Ignore Visual Studio temporary files, build results, and 2 | ## files generated by popular Visual Studio add-ons. 3 | ## 4 | ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore 5 | 6 | # User-specific files 7 | *.rsuser 8 | *.suo 9 | *.user 10 | *.userosscache 11 | *.sln.docstates 12 | 13 | # User-specific files (MonoDevelop/Xamarin Studio) 14 | *.userprefs 15 | 16 | # Mono auto generated files 17 | mono_crash.* 18 | 19 | # Build results 20 | [Dd]ebug/ 21 | [Dd]ebugPublic/ 22 | [Rr]elease/ 23 | [Rr]eleases/ 24 | x64/ 25 | x86/ 26 | [Ww][Ii][Nn]32/ 27 | [Aa][Rr][Mm]/ 28 | [Aa][Rr][Mm]64/ 29 | bld/ 30 | [Bb]in/ 31 | [Oo]bj/ 32 | [Oo]ut/ 33 | [Ll]og/ 34 | [Ll]ogs/ 35 | 36 | # Visual Studio 2015/2017 cache/options directory 37 | .vs/ 38 | # Uncomment if you have tasks that create the project's static files in wwwroot 39 | #wwwroot/ 40 | 41 | # Visual Studio 2017 auto generated files 42 | Generated\ Files/ 43 | 44 | # MSTest test Results 45 | [Tt]est[Rr]esult*/ 46 | [Bb]uild[Ll]og.* 47 | 48 | # NUnit 49 | *.VisualState.xml 50 | TestResult.xml 51 | nunit-*.xml 52 | 53 | # Build Results of an ATL Project 54 | [Dd]ebugPS/ 55 | [Rr]eleasePS/ 56 | dlldata.c 57 | 58 | # Benchmark Results 59 | BenchmarkDotNet.Artifacts/ 60 | 61 | # .NET Core 62 | project.lock.json 63 | project.fragment.lock.json 64 | artifacts/ 65 | 66 | # ASP.NET Scaffolding 67 | ScaffoldingReadMe.txt 68 | 69 | # StyleCop 70 | StyleCopReport.xml 71 | 72 | # Files built by Visual Studio 73 | *_i.c 74 | *_p.c 75 | *_h.h 76 | *.ilk 77 | *.meta 78 | *.obj 79 | *.iobj 80 | *.pch 81 | *.pdb 82 | *.ipdb 83 | *.pgc 84 | *.pgd 85 | *.rsp 86 | *.sbr 87 | *.tlb 88 | *.tli 89 | *.tlh 90 | *.tmp 91 | *.tmp_proj 92 | *_wpftmp.csproj 93 | *.log 94 | *.vspscc 95 | *.vssscc 96 | .builds 97 | *.pidb 98 | *.svclog 99 | *.scc 100 | 101 | # Chutzpah Test files 102 | _Chutzpah* 103 | 104 | # Visual C++ cache files 105 | ipch/ 106 | *.aps 107 | *.ncb 108 | *.opendb 109 | *.opensdf 110 | *.sdf 111 | *.cachefile 112 | *.VC.db 113 | *.VC.VC.opendb 114 | 115 | # Visual Studio profiler 116 | *.psess 117 | *.vsp 118 | *.vspx 119 | *.sap 120 | 121 | # Visual Studio Trace Files 122 | *.e2e 123 | 124 | # TFS 2012 Local Workspace 125 | $tf/ 126 | 127 | # Guidance Automation Toolkit 128 | *.gpState 129 | 130 | # ReSharper is a .NET coding add-in 131 | _ReSharper*/ 132 | *.[Rr]e[Ss]harper 133 | *.DotSettings.user 134 | 135 | # TeamCity is a build add-in 136 | _TeamCity* 137 | 138 | # DotCover is a Code Coverage Tool 139 | *.dotCover 140 | 141 | # AxoCover is a Code Coverage Tool 142 | .axoCover/* 143 | !.axoCover/settings.json 144 | 145 | # Coverlet is a free, cross platform Code Coverage Tool 146 | coverage*.json 147 | coverage*.xml 148 | coverage*.info 149 | 150 | # Visual Studio code coverage results 151 | *.coverage 152 | *.coveragexml 153 | 154 | # NCrunch 155 | _NCrunch_* 156 | .*crunch*.local.xml 157 | nCrunchTemp_* 158 | 159 | # MightyMoose 160 | *.mm.* 161 | AutoTest.Net/ 162 | 163 | # Web workbench (sass) 164 | .sass-cache/ 165 | 166 | # Installshield output folder 167 | [Ee]xpress/ 168 | 169 | # DocProject is a documentation generator add-in 170 | DocProject/buildhelp/ 171 | DocProject/Help/*.HxT 172 | DocProject/Help/*.HxC 173 | DocProject/Help/*.hhc 174 | DocProject/Help/*.hhk 175 | DocProject/Help/*.hhp 176 | DocProject/Help/Html2 177 | DocProject/Help/html 178 | 179 | # Click-Once directory 180 | publish/ 181 | 182 | # Publish Web Output 183 | *.[Pp]ublish.xml 184 | *.azurePubxml 185 | # Note: Comment the next line if you want to checkin your web deploy settings, 186 | # but database connection strings (with potential passwords) will be unencrypted 187 | *.pubxml 188 | *.publishproj 189 | 190 | # Microsoft Azure Web App publish settings. Comment the next line if you want to 191 | # checkin your Azure Web App publish settings, but sensitive information contained 192 | # in these scripts will be unencrypted 193 | PublishScripts/ 194 | 195 | # NuGet Packages 196 | *.nupkg 197 | # NuGet Symbol Packages 198 | *.snupkg 199 | # The packages folder can be ignored because of Package Restore 200 | **/[Pp]ackages/* 201 | # except build/, which is used as an MSBuild target. 202 | !**/[Pp]ackages/build/ 203 | # Uncomment if necessary however generally it will be regenerated when needed 204 | #!**/[Pp]ackages/repositories.config 205 | # NuGet v3's project.json files produces more ignorable files 206 | *.nuget.props 207 | *.nuget.targets 208 | 209 | # Microsoft Azure Build Output 210 | csx/ 211 | *.build.csdef 212 | 213 | # Microsoft Azure Emulator 214 | ecf/ 215 | rcf/ 216 | 217 | # Windows Store app package directories and files 218 | AppPackages/ 219 | BundleArtifacts/ 220 | Package.StoreAssociation.xml 221 | _pkginfo.txt 222 | *.appx 223 | *.appxbundle 224 | *.appxupload 225 | 226 | # Visual Studio cache files 227 | # files ending in .cache can be ignored 228 | *.[Cc]ache 229 | # but keep track of directories ending in .cache 230 | !?*.[Cc]ache/ 231 | 232 | # Others 233 | ClientBin/ 234 | ~$* 235 | *~ 236 | *.dbmdl 237 | *.dbproj.schemaview 238 | *.jfm 239 | *.pfx 240 | *.publishsettings 241 | orleans.codegen.cs 242 | 243 | # Including strong name files can present a security risk 244 | # (https://github.com/github/gitignore/pull/2483#issue-259490424) 245 | #*.snk 246 | 247 | # Since there are multiple workflows, uncomment next line to ignore bower_components 248 | # (https://github.com/github/gitignore/pull/1529#issuecomment-104372622) 249 | #bower_components/ 250 | 251 | # RIA/Silverlight projects 252 | Generated_Code/ 253 | 254 | # Backup & report files from converting an old project file 255 | # to a newer Visual Studio version. Backup files are not needed, 256 | # because we have git ;-) 257 | _UpgradeReport_Files/ 258 | Backup*/ 259 | UpgradeLog*.XML 260 | UpgradeLog*.htm 261 | ServiceFabricBackup/ 262 | *.rptproj.bak 263 | 264 | # SQL Server files 265 | *.mdf 266 | *.ldf 267 | *.ndf 268 | 269 | # Business Intelligence projects 270 | *.rdl.data 271 | *.bim.layout 272 | *.bim_*.settings 273 | *.rptproj.rsuser 274 | *- [Bb]ackup.rdl 275 | *- [Bb]ackup ([0-9]).rdl 276 | *- [Bb]ackup ([0-9][0-9]).rdl 277 | 278 | # Microsoft Fakes 279 | FakesAssemblies/ 280 | 281 | # GhostDoc plugin setting file 282 | *.GhostDoc.xml 283 | 284 | # Node.js Tools for Visual Studio 285 | .ntvs_analysis.dat 286 | node_modules/ 287 | 288 | # Visual Studio 6 build log 289 | *.plg 290 | 291 | # Visual Studio 6 workspace options file 292 | *.opt 293 | 294 | # Visual Studio 6 auto-generated workspace file (contains which files were open etc.) 295 | *.vbw 296 | 297 | # Visual Studio LightSwitch build output 298 | **/*.HTMLClient/GeneratedArtifacts 299 | **/*.DesktopClient/GeneratedArtifacts 300 | **/*.DesktopClient/ModelManifest.xml 301 | **/*.Server/GeneratedArtifacts 302 | **/*.Server/ModelManifest.xml 303 | _Pvt_Extensions 304 | 305 | # Paket dependency manager 306 | .paket/paket.exe 307 | paket-files/ 308 | 309 | # FAKE - F# Make 310 | .fake/ 311 | 312 | # CodeRush personal settings 313 | .cr/personal 314 | 315 | # Python Tools for Visual Studio (PTVS) 316 | __pycache__/ 317 | *.pyc 318 | 319 | # Cake - Uncomment if you are using it 320 | # tools/** 321 | # !tools/packages.config 322 | 323 | # Tabs Studio 324 | *.tss 325 | 326 | # Telerik's JustMock configuration file 327 | *.jmconfig 328 | 329 | # BizTalk build output 330 | *.btp.cs 331 | *.btm.cs 332 | *.odx.cs 333 | *.xsd.cs 334 | 335 | # OpenCover UI analysis results 336 | OpenCover/ 337 | 338 | # Azure Stream Analytics local run output 339 | ASALocalRun/ 340 | 341 | # MSBuild Binary and Structured Log 342 | *.binlog 343 | 344 | # NVidia Nsight GPU debugger configuration file 345 | *.nvuser 346 | 347 | # MFractors (Xamarin productivity tool) working folder 348 | .mfractor/ 349 | 350 | # Local History for Visual Studio 351 | .localhistory/ 352 | 353 | # BeatPulse healthcheck temp database 354 | healthchecksdb 355 | 356 | # Backup folder for Package Reference Convert tool in Visual Studio 2017 357 | MigrationBackup/ 358 | 359 | # Ionide (cross platform F# VS Code tools) working folder 360 | .ionide/ 361 | 362 | # Fody - auto-generated XML schema 363 | FodyWeavers.xsd -------------------------------------------------------------------------------- /BlazorMovieLive.csproj: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | net8.0 5 | enable 6 | enable 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | -------------------------------------------------------------------------------- /BlazorMovieLive.sln: -------------------------------------------------------------------------------- 1 |  2 | Microsoft Visual Studio Solution File, Format Version 12.00 3 | # Visual Studio Version 17 4 | VisualStudioVersion = 17.8.34302.71 5 | MinimumVisualStudioVersion = 10.0.40219.1 6 | Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "BlazorMovieLive", "BlazorMovieLive.csproj", "{99D0B1F6-350B-4DAF-B377-3D034D68A694}" 7 | EndProject 8 | Global 9 | GlobalSection(SolutionConfigurationPlatforms) = preSolution 10 | Debug|Any CPU = Debug|Any CPU 11 | Release|Any CPU = Release|Any CPU 12 | EndGlobalSection 13 | GlobalSection(ProjectConfigurationPlatforms) = postSolution 14 | {99D0B1F6-350B-4DAF-B377-3D034D68A694}.Debug|Any CPU.ActiveCfg = Debug|Any CPU 15 | {99D0B1F6-350B-4DAF-B377-3D034D68A694}.Debug|Any CPU.Build.0 = Debug|Any CPU 16 | {99D0B1F6-350B-4DAF-B377-3D034D68A694}.Release|Any CPU.ActiveCfg = Release|Any CPU 17 | {99D0B1F6-350B-4DAF-B377-3D034D68A694}.Release|Any CPU.Build.0 = Release|Any CPU 18 | EndGlobalSection 19 | GlobalSection(SolutionProperties) = preSolution 20 | HideSolutionNode = FALSE 21 | EndGlobalSection 22 | GlobalSection(ExtensibilityGlobals) = postSolution 23 | SolutionGuid = {947B5E5C-E7A5-4D62-9CFB-3FEC352E76B7} 24 | EndGlobalSection 25 | EndGlobal 26 | -------------------------------------------------------------------------------- /Components/App.razor: -------------------------------------------------------------------------------- 1 |  2 | 3 | 4 | 5 | 6 | 7 | Not found 8 | 9 |

Sorry, there's nothing at this address.

10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /Components/Layout/Footer.razor: -------------------------------------------------------------------------------- 1 | 
2 |
3 |
4 |
5 |
6 |
7 | Built By 8 | 9 |
10 |
11 | © 2023 Mark Spectre. 12 |
13 |
14 |
15 |
16 | 17 |
18 | Powered by 19 | 20 | 21 |
22 |
23 |
24 |
25 |
26 | 27 | 28 | 29 | 30 |
31 |
32 | Blog 33 | • 34 | Portfolio 35 | • 36 | Bug Tracker 37 |
38 |
39 | 40 |
41 |
42 |
43 |
44 | 45 | @code { 46 | 47 | } 48 | -------------------------------------------------------------------------------- /Components/Layout/Footer.razor.css: -------------------------------------------------------------------------------- 1 | .footerStyle{ 2 | background-color: var(--cf-theme-900); 3 | color: var(--cf-light-color); 4 | } 5 | 6 | .footerStyle a{ 7 | color: var(--cf-theme-200); 8 | } 9 | 10 | .footerStyle a:hover{ 11 | color: var(--cf-theme-core); 12 | } 13 | 14 | .footerStyle .bi{ 15 | font-size: 1.5rem; 16 | padding-inline-start: 0.5rem; 17 | } -------------------------------------------------------------------------------- /Components/Layout/MainLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | 3 | @Body 4 | -------------------------------------------------------------------------------- /Components/Layout/TopNavLayout.razor: -------------------------------------------------------------------------------- 1 | @inherits LayoutComponentBase 2 | 3 |
4 | 5 | 6 | 7 |
8 | @Body 9 |
10 | 11 |
15 | 16 | 17 | 18 | @code { 19 | 20 | } 21 | -------------------------------------------------------------------------------- /Components/Layout/TopNavMenu.razor: -------------------------------------------------------------------------------- 1 |  21 | 22 | @code { 23 | 24 | } 25 | -------------------------------------------------------------------------------- /Components/Layout/TopNavMenu.razor.css: -------------------------------------------------------------------------------- 1 | .navStyle{ 2 | background-color: var(--cf-theme-900); 3 | } 4 | 5 | .navbar-nav{ 6 | --bs-navbar-hover-color: var(--cf-theme-400); 7 | } 8 | -------------------------------------------------------------------------------- /Components/Pages/Home.razor: -------------------------------------------------------------------------------- 1 | @page "/" 2 | @using BlazorMovieLive.Models 3 | @using BlazorMovieLive.Services 4 | @inject TMDBClient TMDB 5 | @inject NavigationManager Nav 6 | 7 | Blazor Movie: Popular Movies 8 | 9 |
10 |
11 |

12 | 13 | 14 | 15 | Popular Movies 16 |

17 |
18 |
19 | 20 |
21 | @if (movies is not null) 22 | { 23 | @foreach (PopularMovie movie in movies.Results) 24 | { 25 |
26 | 27 |
28 | } 29 | } 30 | else 31 | { 32 | for (int i = 0; i < 10; i++) 33 | { 34 |
35 | 36 |
37 | } 38 | } 39 |
40 | 41 |
42 | 43 | @if (movies?.TotalPages > 1) 44 | { 45 |
46 | 51 |
52 | } 53 |
54 | 55 | @code { 56 | private PopularMoviePagedResponse? movies; 57 | 58 | [SupplyParameterFromQuery] 59 | public int Page { get; set; } = 1; 60 | 61 | protected override async Task OnParametersSetAsync() 62 | { 63 | if (Page < 1) Page = 1; 64 | else if (Page > 500) Page = 500; 65 | 66 | movies = await TMDB.GetPopularMoviesAsync(Page); 67 | } 68 | 69 | private void GetPage(int pageNum) 70 | { 71 | string url = Nav.GetUriWithQueryParameter("page", pageNum); 72 | Nav.NavigateTo(url); 73 | } 74 | } -------------------------------------------------------------------------------- /Components/Pages/Movie.razor: -------------------------------------------------------------------------------- 1 | @page "/movie/{id:int}" 2 | @inject TMDBClient TMDB 3 | 4 | 5 | @if(movieDetails is null) 6 | { 7 |

Loading the movie...

8 | } 9 | else 10 | { 11 | 12 | @movieDetails.Title 13 | 14 |
15 |
16 |
17 | 18 |
19 |
20 |

@movieDetails.Title

21 |

@movieDetails.Tagline

22 | @if(DateTime.TryParse(movieDetails.ReleaseDate, out DateTime releaseDate)) 23 | { 24 | @releaseDate.ToString("MMM dd yyy") 25 | } 26 | @{ 27 | var runtime = $"{movieDetails.Runtime / 60}h {movieDetails.Runtime % 60}m"; 28 | var rating = (movieDetails.VoteAverage * 10).ToString("F1"); 29 | } 30 | @runtime 31 | @rating% 32 |
33 |
34 | 35 | @if(!string.IsNullOrEmpty(movieDetails.Homepage)){ 36 |
37 | 38 | Website 39 | 40 |
41 | } 42 | 43 | @if(!string.IsNullOrEmpty(movieDetails.ImdbId)){ 44 |
45 | 46 | IMDB 47 | 48 |
49 | }) 50 |
51 |
52 | 53 |
54 |
55 |
56 |
57 | @if (string.IsNullOrEmpty(movieDetails.PosterPath)) 58 | { 59 | Movie Poster 60 | } 61 | else 62 | { 63 | Movie Poster 64 | } 65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 |

@movieDetails.Overview

73 | 74 | @if (movieDetails.SpokenLanguages.Any()) 75 | { 76 |
77 | Languages: @string.Join(", ", movieDetails.SpokenLanguages.Select(sl => sl.EnglishName)) 78 |
79 | } 80 |
81 | 82 |
83 | 84 | } 85 | 86 | @code { 87 | [Parameter] 88 | public int Id { get; set; } 89 | 90 | private MovieDetails? movieDetails; 91 | 92 | protected override async Task OnInitializedAsync() 93 | { 94 | movieDetails = await TMDB.GetMovieDetailsAsync(Id); 95 | } 96 | 97 | } 98 | -------------------------------------------------------------------------------- /Components/Pages/Movie.razor.css: -------------------------------------------------------------------------------- 1 | .hero-bg{ 2 | background-image: var(--bg-img); 3 | background-size: cover; 4 | background-position: center; 5 | background-repeat: no-repeat; 6 | min-height: 400px; 7 | } 8 | 9 | .hero-container { 10 | min-height: 400px; 11 | width: 100%; 12 | height: 100%; 13 | position:relative; 14 | backdrop-filter: blur(2px) brightness(.5); 15 | margin-bottom: 2rem; 16 | } 17 | 18 | 19 | .poster-container { 20 | max-height: 24rem; 21 | aspect-ratio: 2/3; 22 | position: relative; 23 | box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px; 24 | border-radius: .5rem; 25 | margin: 0 2rem 2rem 2rem; 26 | transform: translateY(50%); 27 | 28 | } 29 | 30 | .poster-container img { 31 | max-width: 100%; 32 | max-height: 100%; 33 | object-fit: cover; 34 | } 35 | 36 | .overview{ 37 | margin-top: 12rem; 38 | } 39 | 40 | 41 | @media (min-width: 992px){ 42 | .overview { 43 | margin-left: calc((24rem * .666) + 4rem); 44 | margin-top: 2rem; 45 | } 46 | } -------------------------------------------------------------------------------- /Components/Ui/MovieCard.razor: -------------------------------------------------------------------------------- 1 | @inject IJSRuntime JS 2 | 3 | 4 | @if (Movie is not null) 5 | { 6 |
7 | @if (string.IsNullOrEmpty(Movie.PosterPath)) 8 | { 9 | Movie Poster 10 | } 11 | else 12 | { 13 | Movie Poster 14 | } 15 |
16 |
@Movie.Title
17 |

18 | @DateTime.Parse(Movie.ReleaseDate).ToString("MMMM dd, yyyy") 19 |

20 |
21 |
22 | Details 23 |
24 |
25 | } 26 | else 27 | { 28 |
29 | Movie Poster 30 |
31 |
32 | 33 |
34 |

35 | 36 |

37 |
38 |
39 | 42 |
43 |
44 | } 45 | 46 | 47 | @code { 48 | 49 | private ElementReference posterCardElement; 50 | 51 | [Parameter] 52 | public PopularMovie? Movie { get; set; } 53 | 54 | 55 | protected override async Task OnAfterRenderAsync(bool firstRender) 56 | { 57 | if (firstRender) 58 | { 59 | await JS.InvokeVoidAsync("VanillaTilt.init", posterCardElement, new 60 | { 61 | max = 15, 62 | speed = 300 63 | }); 64 | } 65 | } 66 | 67 | public void Dispose() 68 | { 69 | JS.InvokeVoidAsync("VanillaTilt.destroy", posterCardElement); 70 | } 71 | 72 | } 73 | -------------------------------------------------------------------------------- /Components/Ui/Paginator.razor: -------------------------------------------------------------------------------- 1 | 
2 | 5 | 6 | Page @CurrentPage of @TotalPages 7 | 8 | 11 |
12 | 13 | @code { 14 | [Parameter] 15 | [EditorRequired] 16 | public int CurrentPage { get; set; } 17 | 18 | [Parameter] 19 | [EditorRequired] 20 | public int TotalPages { get; set; } 21 | 22 | [Parameter] 23 | public EventCallback OnPageChange { get; set; } 24 | 25 | private async Task NextPage() 26 | { 27 | if (CurrentPage < TotalPages) 28 | { 29 | CurrentPage++; 30 | await OnPageChange.InvokeAsync(CurrentPage); 31 | } 32 | } 33 | 34 | private async Task PrevPage() 35 | { 36 | if (CurrentPage > 1) 37 | { 38 | CurrentPage--; 39 | await OnPageChange.InvokeAsync(CurrentPage); 40 | } 41 | } 42 | } 43 | -------------------------------------------------------------------------------- /Components/Ui/Paginator.razor.css: -------------------------------------------------------------------------------- 1 | .rounded-pill { 2 | aspect-ratio: 1; 3 | } -------------------------------------------------------------------------------- /Components/_Imports.razor: -------------------------------------------------------------------------------- 1 | @using System.Net.Http 2 | @using System.Net.Http.Json 3 | @using Microsoft.AspNetCore.Components.Forms 4 | @using Microsoft.AspNetCore.Components.Routing 5 | @using Microsoft.AspNetCore.Components.Web 6 | @using Microsoft.AspNetCore.Components.Web.Virtualization 7 | @using Microsoft.AspNetCore.Components.WebAssembly.Http 8 | @using Microsoft.JSInterop 9 | @using BlazorMovieLive 10 | @using BlazorMovieLive.Components 11 | @using BlazorMovieLive.Components.Layout 12 | @using BlazorMovieLive.Components.Ui 13 | @using BlazorMovieLive.Models 14 | @using BlazorMovieLive.Services 15 | -------------------------------------------------------------------------------- /Models/MovieDetails.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace BlazorMovieLive.Models 4 | { 5 | public class MovieDetails 6 | { 7 | [JsonPropertyName("adult")] 8 | public bool Adult { get; set; } 9 | 10 | [JsonPropertyName("backdrop_path")] 11 | public string? BackdropPath { get; set; } 12 | 13 | [JsonPropertyName("belongs_to_collection")] 14 | public MovieCollection? BelongsToCollection { get; set; } 15 | 16 | [JsonPropertyName("budget")] 17 | public int Budget { get; set; } 18 | 19 | [JsonPropertyName("genres")] 20 | public Genre[] Genres { get; set; } = []; 21 | 22 | [JsonPropertyName("homepage")] 23 | public string? Homepage { get; set; } 24 | 25 | [JsonPropertyName("id")] 26 | public int Id { get; set; } 27 | 28 | [JsonPropertyName("imdb_id")] 29 | public string? ImdbId { get; set; } 30 | 31 | [JsonPropertyName("original_language")] 32 | public string? OriginalLanguage { get; set; } 33 | 34 | [JsonPropertyName("original_title")] 35 | public string? OriginalTitle { get; set; } 36 | 37 | [JsonPropertyName("overview")] 38 | public string? Overview { get; set; } 39 | 40 | [JsonPropertyName("popularity")] 41 | public float Popularity { get; set; } 42 | 43 | [JsonPropertyName("poster_path")] 44 | public string? PosterPath { get; set; } 45 | 46 | [JsonPropertyName("production_companies")] 47 | public ProductionCompanies[] ProductionCompanies { get; set; } = []; 48 | 49 | [JsonPropertyName("production_countries")] 50 | public ProductionCountries[] ProductionCountries { get; set; } = []; 51 | 52 | [JsonPropertyName("release_date")] 53 | public string? ReleaseDate { get; set; } 54 | 55 | [JsonPropertyName("revenue")] 56 | public int Revenue { get; set; } 57 | 58 | [JsonPropertyName("runtime")] 59 | public int Runtime { get; set; } 60 | 61 | [JsonPropertyName("spoken_languages")] 62 | public SpokenLanguages[] SpokenLanguages { get; set; } = []; 63 | 64 | [JsonPropertyName("status")] 65 | public string? Status { get; set; } 66 | 67 | [JsonPropertyName("tagline")] 68 | public string? Tagline { get; set; } 69 | 70 | [JsonPropertyName("title")] 71 | public string? Title { get; set; } 72 | 73 | [JsonPropertyName("video")] 74 | public bool Video { get; set; } 75 | 76 | [JsonPropertyName("vote_average")] 77 | public float VoteAverage { get; set; } 78 | 79 | [JsonPropertyName("vote_count")] 80 | public int VoteCount { get; set; } 81 | } 82 | 83 | public class Genre 84 | { 85 | 86 | [JsonPropertyName("id")] 87 | public int Id { get; set; } 88 | 89 | [JsonPropertyName("name")] 90 | public string? Name { get; set; } 91 | } 92 | 93 | public class ProductionCompanies 94 | { 95 | 96 | [JsonPropertyName("id")] 97 | public int Id { get; set; } 98 | 99 | [JsonPropertyName("logo_path")] 100 | public string? LogoPath { get; set; } 101 | 102 | [JsonPropertyName("name")] 103 | public string? Name { get; set; } 104 | 105 | [JsonPropertyName("origin_country")] 106 | public string? OriginCountry { get; set; } 107 | } 108 | 109 | public class ProductionCountries 110 | { 111 | 112 | [JsonPropertyName("iso_3166_1")] 113 | public string? Iso31661 { get; set; } 114 | 115 | [JsonPropertyName("name")] 116 | public string? Name { get; set; } 117 | } 118 | 119 | public class SpokenLanguages 120 | { 121 | 122 | [JsonPropertyName("english_name")] 123 | public string? EnglishName { get; set; } 124 | 125 | [JsonPropertyName("iso_639_1")] 126 | public string? Iso_639_1 { get; set; } 127 | 128 | [JsonPropertyName("name")] 129 | public string? Name { get; set; } 130 | } 131 | 132 | 133 | public class MovieCollection 134 | { 135 | [JsonPropertyName ("id")] 136 | public int Id { get; set; } 137 | 138 | [JsonPropertyName("name")] 139 | public string? Name { get; set; } 140 | 141 | [JsonPropertyName("poster_path")] 142 | public string? PosterPath { get; set; } 143 | 144 | [JsonPropertyName("backdrop_path")] 145 | public string? BackdropPath { get; set; } 146 | } 147 | 148 | 149 | } 150 | -------------------------------------------------------------------------------- /Models/PopularMovie.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace BlazorMovieLive.Models 4 | { 5 | public class PopularMovie 6 | { 7 | [JsonPropertyName("adult")] 8 | public bool Adult { get; set; } 9 | 10 | [JsonPropertyName("backdrop_path")] 11 | public string? BackdropPath { get; set; } 12 | 13 | [JsonPropertyName("genre_ids")] 14 | public int[] GenreIds { get; set; } = []; 15 | 16 | [JsonPropertyName("id")] 17 | public int Id { get; set; } 18 | 19 | [JsonPropertyName("original_language")] 20 | public string OriginalLanguage { get; set; } = string.Empty; 21 | 22 | [JsonPropertyName("original_title")] 23 | public string? OriginalTitle { get; set; } 24 | 25 | [JsonPropertyName("overview")] 26 | public string Overview { get; set; } = string.Empty; 27 | 28 | [JsonPropertyName("popularity")] 29 | public float Popularity { get; set; } 30 | 31 | [JsonPropertyName("poster_path")] 32 | public string PosterPath { get; set; } = string.Empty; 33 | 34 | [JsonPropertyName("release_date")] 35 | public string ReleaseDate { get; set; } = string.Empty; 36 | 37 | [JsonPropertyName("title")] 38 | public string Title { get; set; } = string.Empty; 39 | 40 | [JsonPropertyName("video")] 41 | public bool Video { get; set; } 42 | 43 | [JsonPropertyName("vote_average")] 44 | public float VoteAverage { get; set; } 45 | 46 | [JsonPropertyName("vote_count")] 47 | public int VoteCount { get; set; } 48 | } 49 | 50 | 51 | } 52 | -------------------------------------------------------------------------------- /Models/PopularMoviePagedResponse.cs: -------------------------------------------------------------------------------- 1 | using System.Text.Json.Serialization; 2 | 3 | namespace BlazorMovieLive.Models 4 | { 5 | public class PopularMoviePagedResponse 6 | { 7 | [JsonPropertyName("page")] 8 | public int Page { get; set; } 9 | 10 | [JsonPropertyName("results")] 11 | public IEnumerable Results { get; set; } = []; 12 | 13 | [JsonPropertyName("total_pages")] 14 | public int TotalPages { get; set; } 15 | 16 | [JsonPropertyName("total_results")] 17 | public int TotalResults { get; set; } 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /Program.cs: -------------------------------------------------------------------------------- 1 | using BlazorMovieLive.Components; 2 | using BlazorMovieLive.Services; 3 | using Microsoft.AspNetCore.Components.Web; 4 | using Microsoft.AspNetCore.Components.WebAssembly.Hosting; 5 | 6 | var builder = WebAssemblyHostBuilder.CreateDefault(args); 7 | builder.RootComponents.Add("#app"); 8 | builder.RootComponents.Add("head::after"); 9 | 10 | 11 | builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); 12 | builder.Services.AddScoped(); 13 | 14 | await builder.Build().RunAsync(); 15 | -------------------------------------------------------------------------------- /Properties/launchSettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "http://json.schemastore.org/launchsettings.json", 3 | "iisSettings": { 4 | "windowsAuthentication": false, 5 | "anonymousAuthentication": true, 6 | "iisExpress": { 7 | "applicationUrl": "http://localhost:61179", 8 | "sslPort": 44390 9 | } 10 | }, 11 | "profiles": { 12 | "http": { 13 | "commandName": "Project", 14 | "dotnetRunMessages": true, 15 | "launchBrowser": true, 16 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 17 | "applicationUrl": "http://localhost:5004", 18 | "environmentVariables": { 19 | "ASPNETCORE_ENVIRONMENT": "Development" 20 | } 21 | }, 22 | "https": { 23 | "commandName": "Project", 24 | "dotnetRunMessages": true, 25 | "launchBrowser": true, 26 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 27 | "applicationUrl": "https://localhost:7088;http://localhost:5004", 28 | "environmentVariables": { 29 | "ASPNETCORE_ENVIRONMENT": "Development" 30 | } 31 | }, 32 | "IIS Express": { 33 | "commandName": "IISExpress", 34 | "launchBrowser": true, 35 | "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}", 36 | "environmentVariables": { 37 | "ASPNETCORE_ENVIRONMENT": "Development" 38 | } 39 | } 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # BlazorMovie Live 2 | 3 | ## Code along with us on Youtube! 4 | 5 | [![Watch the video](https://img.youtube.com/vi/5NDIqqw7HrE/maxresdefault.jpg)](https://youtu.be/5NDIqqw7HrE) 6 | -------------------------------------------------------------------------------- /Services/TMDBClient.cs: -------------------------------------------------------------------------------- 1 | using BlazorMovieLive.Models; 2 | using System.Net.Http.Json; 3 | 4 | namespace BlazorMovieLive.Services 5 | { 6 | public class TMDBClient 7 | { 8 | private readonly HttpClient _httpClient; 9 | 10 | public TMDBClient(HttpClient httpClient, IConfiguration config) 11 | { 12 | _httpClient = httpClient; 13 | 14 | _httpClient.BaseAddress = new Uri("https://api.themoviedb.org/3/"); 15 | _httpClient.DefaultRequestHeaders.Accept.Add(new("application/json")); 16 | 17 | string apiKey = config["TMDBKey"] ?? throw new Exception("TMDBKey not found!"); 18 | _httpClient.DefaultRequestHeaders.Authorization = new("Bearer", apiKey); 19 | } 20 | 21 | public Task GetPopularMoviesAsync(int page = 1) 22 | { 23 | if (page < 1) page = 1; 24 | if (page > 500) page = 500; 25 | 26 | return _httpClient.GetFromJsonAsync($"movie/popular?page={page}"); 27 | } 28 | 29 | public Task GetMovieDetailsAsync(int id) 30 | { 31 | return _httpClient.GetFromJsonAsync($"movie/{id}"); 32 | } 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /wwwroot/appsettings.json: -------------------------------------------------------------------------------- 1 | { 2 | "TMDBKey": "eyJhbGciOiJIUzI1NiJ9.eyJhdWQiOiIxOTNmNzBmYTM1OTczMGJiMmNkNmRiOWM4NjE2YTIwZSIsInN1YiI6IjY1MmVlMThlMDI0ZWM4MDEzYzU5OWY1ZSIsInNjb3BlcyI6WyJhcGlfcmVhZCJdLCJ2ZXJzaW9uIjoxfQ.AfvRTBYmtUh3aGw3FPCZ-vhYpIoiL3l4ASUALmcVZ5A" 3 | } -------------------------------------------------------------------------------- /wwwroot/css/app.css: -------------------------------------------------------------------------------- 1 | :root { 2 | /* fonts */ 3 | --cf-title-font: 'Bebas Neue', sans-serif; 4 | --cf-body-font: 'Monsterrat', sans-serif; 5 | 6 | /* colors */ 7 | --cf-dark-color: #212121; 8 | --cf-light-color: #deeefb; 9 | 10 | /* text styles */ 11 | --cf-title-color: var(--cf-dark-color); 12 | --cf-font-size: 1rem; 13 | } 14 | 15 | html, body { 16 | font-family: var(--cf-body-font); 17 | font-size: var(--cf-font-size); 18 | height: 100%; 19 | } 20 | 21 | #app { 22 | height: 100%; 23 | } 24 | 25 | h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { 26 | font-family: var(--cf-title-font); 27 | } 28 | 29 | h1:focus { 30 | outline: none; 31 | } 32 | 33 | /* #region Blazor Default Styles */ 34 | .valid.modified:not([type=checkbox]) { 35 | outline: 1px solid #26b050; 36 | } 37 | 38 | .invalid { 39 | outline: 1px solid red; 40 | } 41 | 42 | .validation-message { 43 | color: red; 44 | } 45 | 46 | #blazor-error-ui { 47 | background: lightyellow; 48 | bottom: 0; 49 | box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); 50 | display: none; 51 | left: 0; 52 | padding: 0.6rem 1.25rem 0.7rem 1.25rem; 53 | position: fixed; 54 | width: 100%; 55 | z-index: 1000; 56 | } 57 | 58 | #blazor-error-ui .dismiss { 59 | cursor: pointer; 60 | position: absolute; 61 | right: 0.75rem; 62 | top: 0.5rem; 63 | } 64 | 65 | .blazor-error-boundary { 66 | background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; 67 | padding: 1rem 1rem 1rem 3.7rem; 68 | color: white; 69 | } 70 | 71 | .blazor-error-boundary::after { 72 | content: "An error has occurred." 73 | } 74 | 75 | .loading-progress { 76 | position: relative; 77 | display: block; 78 | width: 8rem; 79 | height: 8rem; 80 | margin: 20vh auto 1rem auto; 81 | } 82 | 83 | .loading-progress circle { 84 | fill: none; 85 | stroke: #e0e0e0; 86 | stroke-width: 0.6rem; 87 | transform-origin: 50% 50%; 88 | transform: rotate(-90deg); 89 | } 90 | 91 | .loading-progress circle:last-child { 92 | stroke: #1b6ec2; 93 | stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; 94 | transition: stroke-dasharray 0.05s ease-in-out; 95 | } 96 | 97 | .loading-progress-text { 98 | position: absolute; 99 | text-align: center; 100 | font-weight: bold; 101 | inset: calc(20vh + 3.25rem) 0 auto 0.2rem; 102 | } 103 | 104 | .loading-progress-text:after { 105 | content: var(--blazor-load-percentage-text, "Loading"); 106 | } 107 | 108 | code { 109 | color: #c02d76; 110 | } 111 | 112 | /* #endregion Blazor Default Styles */ -------------------------------------------------------------------------------- /wwwroot/css/themes.css: -------------------------------------------------------------------------------- 1 | :root { 2 | --cf-theme-core: var(--cf-code-magic-core); 3 | --cf-theme-100: var(--cf-code-magic-100); 4 | --cf-theme-150: var(--cf-code-magic-150); 5 | --cf-theme-200: var(--cf-code-magic-200); 6 | --cf-theme-300: var(--cf-code-magic-300); 7 | --cf-theme-400: var(--cf-code-magic-400); 8 | --cf-theme-500: var(--cf-code-magic-500); 9 | --cf-theme-600: var(--cf-code-magic-600); 10 | --cf-theme-700: var(--cf-code-magic-700); 11 | --cf-theme-800: var(--cf-code-magic-800); 12 | --cf-theme-850: var(--cf-code-magic-850); 13 | --cf-theme-900: var(--cf-code-magic-900); 14 | 15 | /* #region code-magic */ 16 | --cf-code-magic-core: #f2c864; /* yellow accent */ 17 | --cf-code-magic-100: hsl(192, 77%, 79%); /* turqoise */ 18 | --cf-code-magic-150: hsl(192, 77%, 74%); 19 | --cf-code-magic-200: #87bbd7; 20 | --cf-code-magic-300: hsl(192, 77%, 69%); 21 | --cf-code-magic-400: #f2c864; 22 | --cf-code-magic-500: hsl(192, 77%, 49%); 23 | --cf-code-magic-600: hsl(192, 77%, 39%); 24 | --cf-code-magic-700: hsl(192, 77%, 29%); 25 | --cf-code-magic-800: hsl(192, 77%, 19%); 26 | --cf-code-magic-850: hsl(192, 77%, 15%); 27 | --cf-code-magic-900: hsl(192, 77%, 9%); 28 | /* #endregion code-magic */ 29 | 30 | /* #region blue */ 31 | --cf-blue-core: hsl(216, 98%, 52%); 32 | --cf-blue-100: hsl(216, 50%, 91%); 33 | --cf-blue-150: hsl(216, 50%, 86%); 34 | --cf-blue-200: hsl(216, 50%, 81%); 35 | --cf-blue-300: hsl(216, 50%, 71%); 36 | --cf-blue-400: hsl(216, 50%, 61%); 37 | --cf-blue-500: hsl(216, 50%, 51%); 38 | --cf-blue-600: hsl(216, 50%, 41%); 39 | --cf-blue-700: hsl(216, 50%, 31%); 40 | --cf-blue-800: hsl(216, 50%, 21%); 41 | --cf-blue-850: hsl(216, 50%, 16%); 42 | --cf-blue-900: hsl(216, 50%, 11%); 43 | /* #endregion blue */ 44 | /* #region indigo */ 45 | --cf-indigo-core: #6610f2; 46 | --cf-indigo-100: hsl(263, 88%, 90%); 47 | --cf-indigo-150: hsl(263, 88%, 85%); 48 | --cf-indigo-200: hsl(263, 88%, 80%); 49 | --cf-indigo-300: hsl(263, 88%, 70%); 50 | --cf-indigo-400: hsl(263, 88%, 60%); 51 | --cf-indigo-500: hsl(263, 88%, 50%); 52 | --cf-indigo-600: hsl(263, 88%, 40%); 53 | --cf-indigo-700: hsl(263, 88%, 30%); 54 | --cf-indigo-800: hsl(263, 88%, 20%); 55 | --cf-indigo-850: hsl(263, 88%, 15%); 56 | --cf-indigo-900: hsl(263, 88%, 10%); 57 | /* #endregion indigo */ 58 | /* #region purple */ 59 | --cf-purple-core: #6f42c1; 60 | --cf-purple-100: hsl(261, 52%, 90%); 61 | --cf-purple-150: hsl(261, 52%, 85%); 62 | --cf-purple-200: hsl(261, 52%, 80%); 63 | --cf-purple-300: hsl(261, 52%, 70%); 64 | --cf-purple-400: hsl(261, 52%, 60%); 65 | --cf-purple-500: hsl(261, 52%, 50%); 66 | --cf-purple-600: hsl(261, 52%, 40%); 67 | --cf-purple-700: hsl(261, 52%, 30%); 68 | --cf-purple-800: hsl(261, 52%, 20%); 69 | --cf-purple-850: hsl(261, 52%, 15%); 70 | --cf-purple-900: hsl(261, 52%, 10%); 71 | /* #endregion purple */ 72 | /* #region pink */ 73 | --cf-pink-core: #d63384; 74 | --cf-pink-100: hsl(331, 47%, 90%); 75 | --cf-pink-150: hsl(331, 47%, 85%); 76 | --cf-pink-200: hsl(331, 47%, 80%); 77 | --cf-pink-300: hsl(331, 47%, 70%); 78 | --cf-pink-400: hsl(331, 47%, 60%); 79 | --cf-pink-500: hsl(331, 47%, 50%); 80 | --cf-pink-600: hsl(331, 47%, 40%); 81 | --cf-pink-700: hsl(331, 47%, 30%); 82 | --cf-pink-800: hsl(331, 47%, 20%); 83 | --cf-pink-850: hsl(331, 47%, 15%); 84 | --cf-pink-900: hsl(331, 47%, 10%); 85 | /* #endregion pink */ 86 | /* #region red */ 87 | --cf-red-core: #dc3545; 88 | --cf-red-100: hsl(355, 70%, 91%); 89 | --cf-red-150: hsl(355, 70%, 86%); 90 | --cf-red-200: hsl(355, 70%, 81%); 91 | --cf-red-300: hsl(355, 70%, 71%); 92 | --cf-red-400: hsl(355, 70%, 61%); 93 | --cf-red-500: hsl(355, 70%, 51%); 94 | --cf-red-600: hsl(355, 70%, 41%); 95 | --cf-red-700: hsl(355, 70%, 31%); 96 | --cf-red-800: hsl(355, 70%, 21%); 97 | --cf-red-850: hsl(355, 70%, 16%); 98 | --cf-red-900: hsl(355, 70%, 11%); 99 | /* #endregion red */ 100 | /* #region orange */ 101 | --cf-orange-core: #fd7e14; 102 | --cf-orange-100: hsl(19, 50%, 91%); 103 | --cf-orange-150: hsl(19, 50%, 86%); 104 | --cf-orange-200: hsl(19, 50%, 81%); 105 | --cf-orange-300: hsl(19, 50%, 71%); 106 | --cf-orange-400: hsl(19, 50%, 61%); 107 | --cf-orange-500: hsl(19, 50%, 51%); 108 | --cf-orange-600: hsl(19, 50%, 41%); 109 | --cf-orange-700: hsl(19, 50%, 31%); 110 | --cf-orange-800: hsl(19, 50%, 21%); 111 | --cf-orange-850: hsl(19, 50%, 16%); 112 | --cf-orange-900: hsl(19, 50%, 11%); 113 | /* #endregion orange */ 114 | /* #region yellow */ 115 | --cf-yellow-core: #ffc107; 116 | --cf-yellow-100: hsl(46, 70%, 90%); 117 | --cf-yellow-150: hsl(46, 70%, 85%); 118 | --cf-yellow-200: hsl(46, 70%, 80%); 119 | --cf-yellow-300: hsl(46, 70%, 70%); 120 | --cf-yellow-400: hsl(46, 70%, 60%); 121 | --cf-yellow-500: hsl(46, 70%, 50%); 122 | --cf-yellow-600: hsl(46, 70%, 40%); 123 | --cf-yellow-700: hsl(46, 70%, 30%); 124 | --cf-yellow-800: hsl(46, 70%, 20%); 125 | --cf-yellow-850: hsl(46, 70%, 15%); 126 | --cf-yellow-900: hsl(46, 70%, 10%); 127 | /* #endregion yellow */ 128 | /* #region green */ 129 | --cf-green-core: #198754; 130 | --cf-green-100: hsl(152, 38%, 95%); 131 | --cf-green-150: hsl(152, 38%, 90%); 132 | --cf-green-200: hsl(152, 38%, 85%); 133 | --cf-green-300: hsl(152, 38%, 75%); 134 | --cf-green-400: hsl(152, 38%, 65%); 135 | --cf-green-500: hsl(152, 38%, 55%); 136 | --cf-green-600: hsl(152, 38%, 45%); 137 | --cf-green-700: hsl(152, 38%, 35%); 138 | --cf-green-800: hsl(152, 38%, 25%); 139 | --cf-green-850: hsl(152, 38%, 20%); 140 | --cf-green-900: hsl(152, 38%, 15%); 141 | /* #endregion green */ 142 | /* #region teal */ 143 | --cf-teal-core: #20c997; 144 | --cf-teal-100: hsl(162, 60%, 89%); 145 | --cf-teal-150: hsl(162, 60%, 84%); 146 | --cf-teal-200: hsl(162, 60%, 79%); 147 | --cf-teal-300: hsl(162, 60%, 69%); 148 | --cf-teal-400: hsl(162, 60%, 59%); 149 | --cf-teal-500: hsl(162, 60%, 49%); 150 | --cf-teal-600: hsl(162, 60%, 39%); 151 | --cf-teal-700: hsl(162, 60%, 29%); 152 | --cf-teal-800: hsl(162, 60%, 19%); 153 | --cf-teal-850: hsl(162, 60%, 14%); 154 | --cf-teal-900: hsl(162, 60%, 9%); 155 | /* #endregion teal */ 156 | /* #region cyan */ 157 | --cf-cyan-core: #0dcaf0; 158 | --cf-cyan-100: hsl(191, 60%, 90%); 159 | --cf-cyan-150: hsl(191, 60%, 85%); 160 | --cf-cyan-200: hsl(191, 60%, 80%); 161 | --cf-cyan-300: hsl(191, 60%, 70%); 162 | --cf-cyan-400: hsl(191, 60%, 60%); 163 | --cf-cyan-500: hsl(191, 60%, 50%); 164 | --cf-cyan-600: hsl(191, 60%, 40%); 165 | --cf-cyan-700: hsl(191, 60%, 30%); 166 | --cf-cyan-800: hsl(191, 60%, 20%); 167 | --cf-cyan-850: hsl(191, 60%, 15%); 168 | --cf-cyan-900: hsl(191, 60%, 10%); 169 | /* #endregion cyan */ 170 | /* #region gray */ 171 | --cf-gray-core: #adb5bd; 172 | --cf-gray-100: hsl(210, 17%, 98%); 173 | --cf-gray-150: hsl(210, 17%, 93%); 174 | --cf-gray-200: hsl(210, 17%, 88%); 175 | --cf-gray-300: hsl(210, 17%, 78%); 176 | --cf-gray-400: hsl(210, 17%, 68%); 177 | --cf-gray-500: hsl(210, 17%, 58%); 178 | --cf-gray-600: hsl(210, 17%, 48%); 179 | --cf-gray-700: hsl(210, 17%, 38%); 180 | --cf-gray-800: hsl(210, 17%, 28%); 181 | --cf-gray-850: hsl(210, 17%, 23%); 182 | --cf-gray-900: hsl(210, 17%, 18%); 183 | /* #endregion gray */ 184 | } 185 | 186 | /* #region color selectors */ 187 | [data-cf-theme="code-magic"] { 188 | --cf-theme-core: var(--cf-code-magic-core); 189 | --cf-theme-100: var(--cf-code-magic-100); 190 | --cf-theme-150: var(--cf-code-magic-150); 191 | --cf-theme-200: var(--cf-code-magic-200); 192 | --cf-theme-300: var(--cf-code-magic-300); 193 | --cf-theme-400: var(--cf-code-magic-400); 194 | --cf-theme-500: var(--cf-code-magic-500); 195 | --cf-theme-600: var(--cf-code-magic-600); 196 | --cf-theme-700: var(--cf-code-magic-700); 197 | --cf-theme-800: var(--cf-code-magic-800); 198 | --cf-theme-850: var(--cf-code-magic-850); 199 | --cf-theme-900: var(--cf-code-magic-900); 200 | } 201 | 202 | [data-cf-theme="blue"] { 203 | --cf-theme-core: var(--cf-blue-core); 204 | --cf-theme-100: var(--cf-blue-100); 205 | --cf-theme-150: var(--cf-blue-150); 206 | --cf-theme-200: var(--cf-blue-200); 207 | --cf-theme-300: var(--cf-blue-300); 208 | --cf-theme-400: var(--cf-blue-400); 209 | --cf-theme-500: var(--cf-blue-500); 210 | --cf-theme-600: var(--cf-blue-600); 211 | --cf-theme-700: var(--cf-blue-700); 212 | --cf-theme-800: var(--cf-blue-800); 213 | --cf-theme-850: var(--cf-blue-850); 214 | --cf-theme-900: var(--cf-blue-900); 215 | } 216 | 217 | [data-cf-theme="indigo"] { 218 | --cf-theme-core: var(--cf-indigo-core); 219 | --cf-theme-100: var(--cf-indigo-100); 220 | --cf-theme-150: var(--cf-indigo-150); 221 | --cf-theme-200: var(--cf-indigo-200); 222 | --cf-theme-300: var(--cf-indigo-300); 223 | --cf-theme-400: var(--cf-indigo-400); 224 | --cf-theme-500: var(--cf-indigo-500); 225 | --cf-theme-600: var(--cf-indigo-600); 226 | --cf-theme-700: var(--cf-indigo-700); 227 | --cf-theme-800: var(--cf-indigo-800); 228 | --cf-theme-850: var(--cf-indigo-850); 229 | --cf-theme-900: var(--cf-indigo-900); 230 | } 231 | 232 | [data-cf-theme="purple"] { 233 | --cf-theme-core: var(--cf-purple-core); 234 | --cf-theme-100: var(--cf-purple-100); 235 | --cf-theme-150: var(--cf-purple-150); 236 | --cf-theme-200: var(--cf-purple-200); 237 | --cf-theme-300: var(--cf-purple-300); 238 | --cf-theme-400: var(--cf-purple-400); 239 | --cf-theme-500: var(--cf-purple-500); 240 | --cf-theme-600: var(--cf-purple-600); 241 | --cf-theme-700: var(--cf-purple-700); 242 | --cf-theme-800: var(--cf-purple-800); 243 | --cf-theme-850: var(--cf-purple-850); 244 | --cf-theme-900: var(--cf-purple-900); 245 | } 246 | 247 | [data-cf-theme="pink"] { 248 | --cf-theme-core: var(--cf-pink-core); 249 | --cf-theme-100: var(--cf-pink-100); 250 | --cf-theme-150: var(--cf-pink-150); 251 | --cf-theme-200: var(--cf-pink-200); 252 | --cf-theme-300: var(--cf-pink-300); 253 | --cf-theme-400: var(--cf-pink-400); 254 | --cf-theme-500: var(--cf-pink-500); 255 | --cf-theme-600: var(--cf-pink-600); 256 | --cf-theme-700: var(--cf-pink-700); 257 | --cf-theme-800: var(--cf-pink-800); 258 | --cf-theme-850: var(--cf-pink-850); 259 | --cf-theme-900: var(--cf-pink-900); 260 | } 261 | 262 | [data-cf-theme="red"] { 263 | --cf-theme-core: var(--cf-red-core); 264 | --cf-theme-100: var(--cf-red-100); 265 | --cf-theme-150: var(--cf-red-150); 266 | --cf-theme-200: var(--cf-red-200); 267 | --cf-theme-300: var(--cf-red-300); 268 | --cf-theme-400: var(--cf-red-400); 269 | --cf-theme-500: var(--cf-red-500); 270 | --cf-theme-600: var(--cf-red-600); 271 | --cf-theme-700: var(--cf-red-700); 272 | --cf-theme-800: var(--cf-red-800); 273 | --cf-theme-850: var(--cf-red-850); 274 | --cf-theme-900: var(--cf-red-900); 275 | } 276 | 277 | [data-cf-theme="orange"] { 278 | --cf-theme-core: var(--cf-orange-core); 279 | --cf-theme-100: var(--cf-orange-100); 280 | --cf-theme-150: var(--cf-orange-150); 281 | --cf-theme-200: var(--cf-orange-200); 282 | --cf-theme-300: var(--cf-orange-300); 283 | --cf-theme-400: var(--cf-orange-400); 284 | --cf-theme-500: var(--cf-orange-500); 285 | --cf-theme-600: var(--cf-orange-600); 286 | --cf-theme-700: var(--cf-orange-700); 287 | --cf-theme-800: var(--cf-orange-800); 288 | --cf-theme-850: var(--cf-orange-850); 289 | --cf-theme-900: var(--cf-orange-900); 290 | } 291 | 292 | [data-cf-theme="yellow"] { 293 | --cf-theme-core: var(--cf-yellow-core); 294 | --cf-theme-100: var(--cf-yellow-100); 295 | --cf-theme-150: var(--cf-yellow-150); 296 | --cf-theme-200: var(--cf-yellow-200); 297 | --cf-theme-300: var(--cf-yellow-300); 298 | --cf-theme-400: var(--cf-yellow-400); 299 | --cf-theme-500: var(--cf-yellow-500); 300 | --cf-theme-600: var(--cf-yellow-600); 301 | --cf-theme-700: var(--cf-yellow-700); 302 | --cf-theme-800: var(--cf-yellow-800); 303 | --cf-theme-850: var(--cf-yellow-850); 304 | --cf-theme-900: var(--cf-yellow-900); 305 | } 306 | 307 | [data-cf-theme="green"] { 308 | --cf-theme-core: #198754; 309 | --cf-theme-100: hsl(152, 38%, 95%); 310 | --cf-theme-150: hsl(152, 38%, 90%); 311 | --cf-theme-200: hsl(152, 38%, 85%); 312 | --cf-theme-300: hsl(152, 38%, 75%); 313 | --cf-theme-400: hsl(152, 38%, 65%); 314 | --cf-theme-500: hsl(152, 38%, 55%); 315 | --cf-theme-600: hsl(152, 38%, 45%); 316 | --cf-theme-700: hsl(152, 38%, 35%); 317 | --cf-theme-800: hsl(152, 38%, 25%); 318 | --cf-theme-850: hsl(152, 38%, 20%); 319 | --cf-theme-900: hsl(152, 38%, 15%); 320 | } 321 | 322 | [data-cf-theme="teal"] { 323 | --cf-theme-core: var(--cf-teal-core); 324 | --cf-theme-100: var(--cf-teal-100); 325 | --cf-theme-150: var(--cf-teal-150); 326 | --cf-theme-200: var(--cf-teal-200); 327 | --cf-theme-300: var(--cf-teal-300); 328 | --cf-theme-400: var(--cf-teal-400); 329 | --cf-theme-500: var(--cf-teal-500); 330 | --cf-theme-600: var(--cf-teal-600); 331 | --cf-theme-700: var(--cf-teal-700); 332 | --cf-theme-800: var(--cf-teal-800); 333 | --cf-theme-850: var(--cf-teal-850); 334 | --cf-theme-900: var(--cf-teal-900); 335 | } 336 | 337 | [data-cf-theme="cyan"] { 338 | --cf-theme-core: var(--cf-cyan-core); 339 | --cf-theme-100: var(--cf-cyan-100); 340 | --cf-theme-150: var(--cf-cyan-150); 341 | --cf-theme-200: var(--cf-cyan-200); 342 | --cf-theme-300: var(--cf-cyan-300); 343 | --cf-theme-400: var(--cf-cyan-400); 344 | --cf-theme-500: var(--cf-cyan-500); 345 | --cf-theme-600: var(--cf-cyan-600); 346 | --cf-theme-700: var(--cf-cyan-700); 347 | --cf-theme-800: var(--cf-cyan-800); 348 | --cf-theme-850: var(--cf-cyan-850); 349 | --cf-theme-900: var(--cf-cyan-900); 350 | } 351 | 352 | [data-cf-theme="gray"] { 353 | --cf-theme-core: var(--cf-gray-core); 354 | --cf-theme-100: var(--cf-gray-100); 355 | --cf-theme-150: var(--cf-gray-150); 356 | --cf-theme-200: var(--cf-gray-200); 357 | --cf-theme-300: var(--cf-gray-300); 358 | --cf-theme-400: var(--cf-gray-400); 359 | --cf-theme-500: var(--cf-gray-500); 360 | --cf-theme-600: var(--cf-gray-600); 361 | --cf-theme-700: var(--cf-gray-700); 362 | --cf-theme-800: var(--cf-gray-800); 363 | --cf-theme-850: var(--cf-gray-850); 364 | --cf-theme-900: var(--cf-gray-900); 365 | } 366 | /* #endregion color selectors */ 367 | 368 | 369 | a { 370 | color: var(--cf-theme-500); 371 | } 372 | 373 | a:hover { 374 | color: var(--cf-theme-300); 375 | } 376 | 377 | .btn-primary { 378 | --bs-btn-bg: var(--cf-theme-600); 379 | --bs-btn-border-color: var(--cf-theme-600); 380 | --bs-btn-hover-bg: var(--cf-theme-700); 381 | --bs-btn-hover-border-color: var(--cf-theme-700); 382 | --bs-btn-active-bg: var(--cf-theme-800); 383 | --bs-btn-active-border-color: var(--cf-theme-800); 384 | } 385 | 386 | .btn-dark { 387 | --bs-btn-bg: var(--cf-theme-850); 388 | --bs-btn-border-color: var(--cf-theme-850); 389 | --bs-btn-hover-bg: var(--cf-theme-800); 390 | --bs-btn-hover-border-color: var(--cf-theme-800); 391 | --bs-btn-active-bg: var(--cf-theme-700); 392 | --bs-btn-active-border-color: var(--cf-theme-700); 393 | } 394 | 395 | .btn-light { 396 | --bs-btn-bg: var(--cf-theme-100); 397 | --bs-btn-border-color: var(--cf-theme-100); 398 | --bs-btn-hover-bg: var(--cf-theme-150); 399 | --bs-btn-hover-border-color: var(--cf-theme-150); 400 | --bs-btn-active-bg: var(--cf-theme-200); 401 | --bs-btn-active-border-color: var(--cf-theme-200); 402 | } 403 | -------------------------------------------------------------------------------- /wwwroot/favicon-16x16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderFoundry/BlazorMovieLive/2e4ad6c1c153cc46505b263f9a7dd5c0b5ef5942/wwwroot/favicon-16x16.png -------------------------------------------------------------------------------- /wwwroot/favicon-32x32.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderFoundry/BlazorMovieLive/2e4ad6c1c153cc46505b263f9a7dd5c0b5ef5942/wwwroot/favicon-32x32.png -------------------------------------------------------------------------------- /wwwroot/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderFoundry/BlazorMovieLive/2e4ad6c1c153cc46505b263f9a7dd5c0b5ef5942/wwwroot/favicon.ico -------------------------------------------------------------------------------- /wwwroot/images/BlazorMovieLogo_v2_o.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderFoundry/BlazorMovieLive/2e4ad6c1c153cc46505b263f9a7dd5c0b5ef5942/wwwroot/images/BlazorMovieLogo_v2_o.png -------------------------------------------------------------------------------- /wwwroot/images/BlazorMovieLogo_v2_w.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderFoundry/BlazorMovieLive/2e4ad6c1c153cc46505b263f9a7dd5c0b5ef5942/wwwroot/images/BlazorMovieLogo_v2_w.png -------------------------------------------------------------------------------- /wwwroot/images/MarkSpectreLogoLight.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderFoundry/BlazorMovieLive/2e4ad6c1c153cc46505b263f9a7dd5c0b5ef5942/wwwroot/images/MarkSpectreLogoLight.png -------------------------------------------------------------------------------- /wwwroot/images/PosterPlaceHolder.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/CoderFoundry/BlazorMovieLive/2e4ad6c1c153cc46505b263f9a7dd5c0b5ef5942/wwwroot/images/PosterPlaceHolder.png -------------------------------------------------------------------------------- /wwwroot/images/THEMOVEDBLogo.svg: -------------------------------------------------------------------------------- 1 | Asset 5 -------------------------------------------------------------------------------- /wwwroot/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | BlazorMovieLive 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 |
37 | 38 | 39 | 40 | 41 |
42 |
43 | 44 |
45 | An unhandled error has occurred. 46 | Reload 47 | 🗙 48 |
49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | -------------------------------------------------------------------------------- /wwwroot/js/vanilla-tilt.min.js: -------------------------------------------------------------------------------- 1 | var VanillaTilt=function(){"use strict";class t{constructor(e,i={}){if(!(e instanceof Node))throw"Can't initialize VanillaTilt because "+e+" is not a Node.";this.width=null,this.height=null,this.clientWidth=null,this.clientHeight=null,this.left=null,this.top=null,this.gammazero=null,this.betazero=null,this.lastgammazero=null,this.lastbetazero=null,this.transitionTimeout=null,this.updateCall=null,this.event=null,this.updateBind=this.update.bind(this),this.resetBind=this.reset.bind(this),this.element=e,this.settings=this.extendSettings(i),this.reverse=this.settings.reverse?-1:1,this.resetToStart=t.isSettingTrue(this.settings["reset-to-start"]),this.glare=t.isSettingTrue(this.settings.glare),this.glarePrerender=t.isSettingTrue(this.settings["glare-prerender"]),this.fullPageListening=t.isSettingTrue(this.settings["full-page-listening"]),this.gyroscope=t.isSettingTrue(this.settings.gyroscope),this.gyroscopeSamples=this.settings.gyroscopeSamples,this.elementListener=this.getElementListener(),this.glare&&this.prepareGlare(),this.fullPageListening&&this.updateClientSize(),this.addEventListeners(),this.reset(),!1===this.resetToStart&&(this.settings.startX=0,this.settings.startY=0)}static isSettingTrue(t){return""===t||!0===t||1===t}getElementListener(){if(this.fullPageListening)return window.document;if("string"==typeof this.settings["mouse-event-element"]){const t=document.querySelector(this.settings["mouse-event-element"]);if(t)return t}return this.settings["mouse-event-element"]instanceof Node?this.settings["mouse-event-element"]:this.element}addEventListeners(){this.onMouseEnterBind=this.onMouseEnter.bind(this),this.onMouseMoveBind=this.onMouseMove.bind(this),this.onMouseLeaveBind=this.onMouseLeave.bind(this),this.onWindowResizeBind=this.onWindowResize.bind(this),this.onDeviceOrientationBind=this.onDeviceOrientation.bind(this),this.elementListener.addEventListener("mouseenter",this.onMouseEnterBind),this.elementListener.addEventListener("mouseleave",this.onMouseLeaveBind),this.elementListener.addEventListener("mousemove",this.onMouseMoveBind),(this.glare||this.fullPageListening)&&window.addEventListener("resize",this.onWindowResizeBind),this.gyroscope&&window.addEventListener("deviceorientation",this.onDeviceOrientationBind)}removeEventListeners(){this.elementListener.removeEventListener("mouseenter",this.onMouseEnterBind),this.elementListener.removeEventListener("mouseleave",this.onMouseLeaveBind),this.elementListener.removeEventListener("mousemove",this.onMouseMoveBind),this.gyroscope&&window.removeEventListener("deviceorientation",this.onDeviceOrientationBind),(this.glare||this.fullPageListening)&&window.removeEventListener("resize",this.onWindowResizeBind)}destroy(){clearTimeout(this.transitionTimeout),null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.element.style.willChange="",this.element.style.transition="",this.element.style.transform="",this.resetGlare(),this.removeEventListeners(),this.element.vanillaTilt=null,delete this.element.vanillaTilt,this.element=null}onDeviceOrientation(t){if(null===t.gamma||null===t.beta)return;this.updateElementPosition(),this.gyroscopeSamples>0&&(this.lastgammazero=this.gammazero,this.lastbetazero=this.betazero,null===this.gammazero?(this.gammazero=t.gamma,this.betazero=t.beta):(this.gammazero=(t.gamma+this.lastgammazero)/2,this.betazero=(t.beta+this.lastbetazero)/2),this.gyroscopeSamples-=1);const e=this.settings.gyroscopeMaxAngleX-this.settings.gyroscopeMinAngleX,i=this.settings.gyroscopeMaxAngleY-this.settings.gyroscopeMinAngleY,s=e/this.width,n=i/this.height,l=(t.gamma-(this.settings.gyroscopeMinAngleX+this.gammazero))/s,a=(t.beta-(this.settings.gyroscopeMinAngleY+this.betazero))/n;null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event={clientX:l+this.left,clientY:a+this.top},this.updateCall=requestAnimationFrame(this.updateBind)}onMouseEnter(){this.updateElementPosition(),this.element.style.willChange="transform",this.setTransition()}onMouseMove(t){null!==this.updateCall&&cancelAnimationFrame(this.updateCall),this.event=t,this.updateCall=requestAnimationFrame(this.updateBind)}onMouseLeave(){this.setTransition(),this.settings.reset&&requestAnimationFrame(this.resetBind)}reset(){this.onMouseEnter(),this.fullPageListening?this.event={clientX:(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.clientWidth,clientY:(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.clientHeight}:this.event={clientX:this.left+(this.settings.startX+this.settings.max)/(2*this.settings.max)*this.width,clientY:this.top+(this.settings.startY+this.settings.max)/(2*this.settings.max)*this.height};let t=this.settings.scale;this.settings.scale=1,this.update(),this.settings.scale=t,this.resetGlare()}resetGlare(){this.glare&&(this.glareElement.style.transform="rotate(180deg) translate(-50%, -50%)",this.glareElement.style.opacity="0")}getValues(){let t,e;return this.fullPageListening?(t=this.event.clientX/this.clientWidth,e=this.event.clientY/this.clientHeight):(t=(this.event.clientX-this.left)/this.width,e=(this.event.clientY-this.top)/this.height),t=Math.min(Math.max(t,0),1),e=Math.min(Math.max(e,0),1),{tiltX:(this.reverse*(this.settings.max-t*this.settings.max*2)).toFixed(2),tiltY:(this.reverse*(e*this.settings.max*2-this.settings.max)).toFixed(2),percentageX:100*t,percentageY:100*e,angle:Math.atan2(this.event.clientX-(this.left+this.width/2),-(this.event.clientY-(this.top+this.height/2)))*(180/Math.PI)}}updateElementPosition(){let t=this.element.getBoundingClientRect();this.width=this.element.offsetWidth,this.height=this.element.offsetHeight,this.left=t.left,this.top=t.top}update(){let t=this.getValues();this.element.style.transform="perspective("+this.settings.perspective+"px) rotateX("+("x"===this.settings.axis?0:t.tiltY)+"deg) rotateY("+("y"===this.settings.axis?0:t.tiltX)+"deg) scale3d("+this.settings.scale+", "+this.settings.scale+", "+this.settings.scale+")",this.glare&&(this.glareElement.style.transform=`rotate(${t.angle}deg) translate(-50%, -50%)`,this.glareElement.style.opacity=`${t.percentageY*this.settings["max-glare"]/100}`),this.element.dispatchEvent(new CustomEvent("tiltChange",{detail:t})),this.updateCall=null}prepareGlare(){if(!this.glarePrerender){const t=document.createElement("div");t.classList.add("js-tilt-glare");const e=document.createElement("div");e.classList.add("js-tilt-glare-inner"),t.appendChild(e),this.element.appendChild(t)}this.glareElementWrapper=this.element.querySelector(".js-tilt-glare"),this.glareElement=this.element.querySelector(".js-tilt-glare-inner"),this.glarePrerender||(Object.assign(this.glareElementWrapper.style,{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",overflow:"hidden","pointer-events":"none","border-radius":"inherit"}),Object.assign(this.glareElement.style,{position:"absolute",top:"50%",left:"50%","pointer-events":"none","background-image":"linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%)",transform:"rotate(180deg) translate(-50%, -50%)","transform-origin":"0% 0%",opacity:"0"}),this.updateGlareSize())}updateGlareSize(){if(this.glare){const t=2*(this.element.offsetWidth>this.element.offsetHeight?this.element.offsetWidth:this.element.offsetHeight);Object.assign(this.glareElement.style,{width:`${t}px`,height:`${t}px`})}}updateClientSize(){this.clientWidth=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth,this.clientHeight=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight}onWindowResize(){this.updateGlareSize(),this.updateClientSize()}setTransition(){clearTimeout(this.transitionTimeout),this.element.style.transition=this.settings.speed+"ms "+this.settings.easing,this.glare&&(this.glareElement.style.transition=`opacity ${this.settings.speed}ms ${this.settings.easing}`),this.transitionTimeout=setTimeout(()=>{this.element.style.transition="",this.glare&&(this.glareElement.style.transition="")},this.settings.speed)}extendSettings(t){let e={reverse:!1,max:15,startX:0,startY:0,perspective:1e3,easing:"cubic-bezier(.03,.98,.52,.99)",scale:1,speed:300,transition:!0,axis:null,glare:!1,"max-glare":1,"glare-prerender":!1,"full-page-listening":!1,"mouse-event-element":null,reset:!0,"reset-to-start":!0,gyroscope:!0,gyroscopeMinAngleX:-45,gyroscopeMaxAngleX:45,gyroscopeMinAngleY:-45,gyroscopeMaxAngleY:45,gyroscopeSamples:10},i={};for(var s in e)if(s in t)i[s]=t[s];else if(this.element.hasAttribute("data-tilt-"+s)){let t=this.element.getAttribute("data-tilt-"+s);try{i[s]=JSON.parse(t)}catch(e){i[s]=t}}else i[s]=e[s];return i}static init(e,i){e instanceof Node&&(e=[e]),e instanceof NodeList&&(e=[].slice.call(e)),e instanceof Array&&e.forEach(e=>{"vanillaTilt"in e||(e.vanillaTilt=new t(e,i))})}}return"undefined"!=typeof document&&(window.VanillaTilt=t,t.init(document.querySelectorAll("[data-tilt]"))),t}(); --------------------------------------------------------------------------------