screenshots/dependencies.html
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Generated by graphviz version 2.38.0 (20140413.2041)
-->
<!-- Title: dependencies Pages: 1 -->
<svg width="6475pt" height="504pt"
viewBox="0.00 0.00 6475.00 504.00" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="graph0" class="graph" transform="scale(1 1) rotate(0) translate(4 500)">
<title>dependencies</title>
<polygon fill="white" stroke="none" points="-4,4 -4,-500 6471,-500 6471,4 -4,4"/>
<text text-anchor="start" x="3212.51" y="-42.4" font-family="sans-serif" font-weight="bold" font-size="14.00">Legend</text>
<polygon fill="#ffffb3" stroke="none" points="2999.5,-10 2999.5,-30 3019.5,-30 3019.5,-10 2999.5,-10"/>
<text text-anchor="start" x="3023.13" y="-15.4" font-family="sans-serif" font-size="14.00">  Declarations</text>
<polygon fill="#8dd3c7" stroke="none" points="3112.5,-10 3112.5,-30 3132.5,-30 3132.5,-10 3112.5,-10"/>
<text text-anchor="start" x="3136.23" y="-15.4" font-family="sans-serif" font-size="14.00">  Module</text>
<polygon fill="#80b1d3" stroke="none" points="3198.5,-10 3198.5,-30 3218.5,-30 3218.5,-10 3198.5,-10"/>
<text text-anchor="start" x="3222.28" y="-15.4" font-family="sans-serif" font-size="14.00">  Bootstrap</text>
<polygon fill="#fdb462" stroke="none" points="3295.5,-10 3295.5,-30 3315.5,-30 3315.5,-10 3295.5,-10"/>
<text text-anchor="start" x="3319.17" y="-15.4" font-family="sans-serif" font-size="14.00">  Providers</text>
<polygon fill="#fb8072" stroke="none" points="3391.5,-10 3391.5,-30 3411.5,-30 3411.5,-10 3391.5,-10"/>
<text text-anchor="start" x="3415.23" y="-15.4" font-family="sans-serif" font-size="14.00">  Exports</text>
<g id="clust1" class="cluster"><title>cluster_AppModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="2568,-146 2568,-488 4038,-488 4038,-146 2568,-146"/>
</g>
<g id="clust2" class="cluster"><title>cluster_AppModule_declarations</title>
<polygon fill="none" stroke="black" points="3744,-298 3744,-350 4030,-350 4030,-298 3744,-298"/>
</g>
<g id="clust5" class="cluster"><title>cluster_AppModule_imports</title>
<polygon fill="none" stroke="black" points="2982,-154 2982,-350 3736,-350 3736,-154 2982,-154"/>
</g>
<g id="clust7" class="cluster"><title>cluster_AppModule_bootstrap</title>
<polygon fill="none" stroke="black" points="3307,-428 3307,-480 3431,-480 3431,-428 3307,-428"/>
</g>
<g id="clust8" class="cluster"><title>cluster_AppModule_providers</title>
<polygon fill="none" stroke="black" points="2576,-298 2576,-350 2974,-350 2974,-298 2576,-298"/>
</g>
<g id="clust9" class="cluster"><title>cluster_CoreModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="3318,-70 3318,-138 3863,-138 3863,-70 3318,-70"/>
</g>
<g id="clust11" class="cluster"><title>cluster_CoreModule_imports</title>
<polygon fill="none" stroke="black" points="3755,-78 3755,-130 3855,-130 3855,-78 3755,-78"/>
</g>
<g id="clust14" class="cluster"><title>cluster_CoreModule_providers</title>
<polygon fill="none" stroke="black" points="3326,-78 3326,-130 3747,-130 3747,-78 3326,-78"/>
</g>
<g id="clust15" class="cluster"><title>cluster_HomeModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="5035,-222 5035,-290 5415,-290 5415,-222 5035,-222"/>
</g>
<g id="clust16" class="cluster"><title>cluster_HomeModule_declarations</title>
<polygon fill="none" stroke="black" points="5249,-230 5249,-282 5407,-282 5407,-230 5249,-230"/>
</g>
<g id="clust18" class="cluster"><title>cluster_HomeModule_imports</title>
<polygon fill="none" stroke="black" points="5043,-230 5043,-282 5241,-282 5241,-230 5043,-230"/>
</g>
<g id="clust22" class="cluster"><title>cluster_PlayerModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="5062,-146 5062,-214 6459,-214 6459,-146 5062,-146"/>
</g>
<g id="clust23" class="cluster"><title>cluster_PlayerModule_declarations</title>
<polygon fill="none" stroke="black" points="5070,-154 5070,-206 5532,-206 5532,-154 5070,-154"/>
</g>
<g id="clust27" class="cluster"><title>cluster_PlayerModule_imports</title>
<polygon fill="none" stroke="black" points="6281,-154 6281,-206 6451,-206 6451,-154 6281,-154"/>
</g>
<g id="clust28" class="cluster"><title>cluster_PlayerModule_exports</title>
<polygon fill="none" stroke="black" points="5540,-154 5540,-206 5676,-206 5676,-154 5540,-154"/>
</g>
<g id="clust30" class="cluster"><title>cluster_PlayerModule_providers</title>
<polygon fill="none" stroke="black" points="5684,-154 5684,-206 6273,-206 6273,-154 5684,-154"/>
</g>
<g id="clust31" class="cluster"><title>cluster_SearchModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="4046,-222 4046,-290 5027,-290 5027,-222 4046,-222"/>
</g>
<g id="clust32" class="cluster"><title>cluster_SearchModule_declarations</title>
<polygon fill="none" stroke="black" points="4699,-230 4699,-282 5019,-282 5019,-230 4699,-230"/>
</g>
<g id="clust35" class="cluster"><title>cluster_SearchModule_imports</title>
<polygon fill="none" stroke="black" points="4531,-230 4531,-282 4691,-282 4691,-230 4531,-230"/>
</g>
<g id="clust36" class="cluster"><title>cluster_SearchModule_exports</title>
<polygon fill="none" stroke="black" points="4363,-230 4363,-282 4523,-282 4523,-230 4363,-230"/>
</g>
<g id="clust38" class="cluster"><title>cluster_SearchModule_providers</title>
<polygon fill="none" stroke="black" points="4054,-230 4054,-282 4355,-282 4355,-230 4054,-230"/>
</g>
<g id="clust39" class="cluster"><title>cluster_SharedModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="8,-222 8,-290 2560,-290 2560,-222 8,-222"/>
</g>
<g id="clust40" class="cluster"><title>cluster_SharedModule_declarations</title>
<polygon fill="none" stroke="black" points="1436,-230 1436,-282 2552,-282 2552,-230 1436,-230"/>
</g>
<g id="clust48" class="cluster"><title>cluster_SharedModule_imports</title>
<polygon fill="none" stroke="black" points="1300,-230 1300,-282 1428,-282 1428,-230 1300,-230"/>
</g>
<g id="clust49" class="cluster"><title>cluster_SharedModule_exports</title>
<polygon fill="none" stroke="black" points="16,-230 16,-282 1292,-282 1292,-230 16,-230"/>
</g>
<g id="clust52" class="cluster"><title>cluster_TracklistsModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="4046,-70 4046,-214 4918,-214 4918,-70 4046,-70"/>
</g>
<g id="clust53" class="cluster"><title>cluster_TracklistsModule_declarations</title>
<polygon fill="none" stroke="black" points="4054,-154 4054,-206 4910,-206 4910,-154 4054,-154"/>
</g>
<g id="clust55" class="cluster"><title>cluster_TracklistsModule_TracklistComponent_providers</title>
<polygon fill="none" stroke="black" points="4079,-78 4079,-130 4289,-130 4289,-78 4079,-78"/>
</g>
<g id="clust59" class="cluster"><title>cluster_TracklistsModule_imports</title>
<polygon fill="none" stroke="black" points="4455,-78 4455,-130 4569,-130 4569,-78 4455,-78"/>
</g>
<g id="clust60" class="cluster"><title>cluster_TracklistsModule_exports</title>
<polygon fill="none" stroke="black" points="4297,-78 4297,-130 4447,-130 4447,-78 4297,-78"/>
</g>
<g id="clust62" class="cluster"><title>cluster_TracklistsModule_providers</title>
<polygon fill="none" stroke="black" points="4577,-78 4577,-130 4910,-130 4910,-78 4577,-78"/>
</g>
<g id="clust63" class="cluster"><title>cluster_UsersModule</title>
<polygon fill="none" stroke="black" stroke-dasharray="1,5" points="5423,-222 5423,-290 6019,-290 6019,-222 5423,-222"/>
</g>
<g id="clust64" class="cluster"><title>cluster_UsersModule_declarations</title>
<polygon fill="none" stroke="black" points="5708,-230 5708,-282 6011,-282 6011,-230 5708,-230"/>
</g>
<g id="clust70" class="cluster"><title>cluster_UsersModule_providers</title>
<polygon fill="none" stroke="black" points="5431,-230 5431,-282 5700,-282 5700,-230 5431,-230"/>
</g>
<!-- AppComponent -->
<g id="node1" class="node"><title>AppComponent</title>
<polygon fill="#ffffb3" stroke="black" points="4021.94,-342 3916.06,-342 3916.06,-306 4021.94,-306 4021.94,-342"/>
<text text-anchor="middle" x="3969" y="-319.8" font-family="Times,serif" font-size="14.00">AppComponent</text>
</g>
<!-- AppModule -->
<g id="node3" class="node"><title>AppModule</title>
<polygon fill="#8dd3c7" stroke="black" points="3410.66,-407 3407.66,-411 3386.66,-411 3383.66,-407 3327.34,-407 3327.34,-371 3410.66,-371 3410.66,-407"/>
<text text-anchor="middle" x="3369" y="-384.8" font-family="Times,serif" font-size="14.00">AppModule</text>
</g>
<!-- AppComponent->AppModule -->
<g id="edge1" class="edge"><title>AppComponent->AppModule</title>
<path fill="none" stroke="black" d="M3969,-342.091C3969,-365.133 3969,-402 3969,-402 3969,-402 3420.71,-402 3420.71,-402"/>
<polygon fill="black" stroke="black" points="3420.71,-398.5 3410.71,-402 3420.71,-405.5 3420.71,-398.5"/>
</g>
<!-- AppHeaderComponent -->
<g id="node2" class="node"><title>AppHeaderComponent</title>
<polygon fill="#ffffb3" stroke="black" points="3897.85,-342 3752.15,-342 3752.15,-306 3897.85,-306 3897.85,-342"/>
<text text-anchor="middle" x="3825" y="-319.8" font-family="Times,serif" font-size="14.00">AppHeaderComponent</text>
</g>
<!-- AppHeaderComponent->AppModule -->
<g id="edge2" class="edge"><title>AppHeaderComponent->AppModule</title>
<path fill="none" stroke="black" d="M3825,-342.045C3825,-363.662 3825,-397 3825,-397 3825,-397 3420.68,-397 3420.68,-397"/>
<polygon fill="black" stroke="black" points="3420.68,-393.5 3410.68,-397 3420.68,-400.5 3420.68,-393.5"/>
</g>
<!-- AppComponent -->
<g id="node14" class="node"><title>AppComponent </title>
<polygon fill="#80b1d3" stroke="black" points="3423.44,-472 3314.56,-472 3314.56,-436 3423.44,-436 3423.44,-472"/>
<text text-anchor="middle" x="3369" y="-449.8" font-family="Times,serif" font-size="14.00">AppComponent </text>
</g>
<!-- AppModule->AppComponent -->
<g id="edge13" class="edge"><title>AppModule->AppComponent </title>
<path fill="none" stroke="black" stroke-dasharray="1,5" d="M3369,-407.106C3369,-407.106 3369,-425.991 3369,-425.991"/>
<polygon fill="black" stroke="black" points="3365.5,-425.991 3369,-435.991 3372.5,-425.991 3365.5,-425.991"/>
</g>
<!-- BrowserModule -->
<g id="node4" class="node"><title>BrowserModule</title>
<polygon fill="#8dd3c7" stroke="black" points="3213.47,-198 3210.47,-202 3189.47,-202 3186.47,-198 3106.53,-198 3106.53,-162 3213.47,-162 3213.47,-198"/>
<text text-anchor="middle" x="3160" y="-175.8" font-family="Times,serif" font-size="14.00">BrowserModule</text>
</g>
<!-- BrowserModule->AppModule -->
<g id="edge3" class="edge"><title>BrowserModule->AppModule</title>
<path fill="none" stroke="black" d="M3160,-198.015C3160,-247.697 3160,-383 3160,-383 3160,-383 3317.21,-383 3317.21,-383"/>
<polygon fill="black" stroke="black" points="3317.21,-386.5 3327.21,-383 3317.21,-379.5 3317.21,-386.5"/>
</g>
<!-- RouterModule.forRoot(args) -->
<g id="node5" class="node"><title>RouterModule.forRoot(args)</title>
<polygon fill="#8dd3c7" stroke="black" points="3408.84,-198 3405.84,-202 3384.84,-202 3381.84,-198 3231.16,-198 3231.16,-162 3408.84,-162 3408.84,-198"/>
<text text-anchor="middle" x="3320" y="-175.8" font-family="Times,serif" font-size="14.00">RouterModule.forRoot(args)</text>
</g>
<!-- RouterModule.forRoot(args)->AppModule -->
<g id="edge4" class="edge"><title>RouterModule.forRoot(args)->AppModule</title>
<path fill="none" stroke="black" d="M3354.18,-198.182C3354.18,-198.182 3354.18,-360.711 3354.18,-360.711"/>
<polygon fill="black" stroke="black" points="3350.68,-360.711 3354.18,-370.711 3357.68,-360.711 3350.68,-360.711"/>
</g>
<!-- StoreModule.provideStore(args) -->
<g id="node6" class="node"><title>StoreModule.provideStore(args)</title>
<polygon fill="#8dd3c7" stroke="black" points="3623.55,-198 3620.55,-202 3599.55,-202 3596.55,-198 3426.45,-198 3426.45,-162 3623.55,-162 3623.55,-198"/>
<text text-anchor="middle" x="3525" y="-175.8" font-family="Times,serif" font-size="14.00">StoreModule.provideStore(args)</text>
</g>
<!-- StoreModule.provideStore(args)->AppModule -->
<g id="edge5" class="edge"><title>StoreModule.provideStore(args)->AppModule</title>
<path fill="none" stroke="black" d="M3440.9,-198.168C3440.9,-200.448 3440.9,-202 3440.9,-202 3440.9,-202 3367.68,-202 3367.68,-202 3367.68,-202 3367.68,-360.729 3367.68,-360.729"/>
<polygon fill="black" stroke="black" points="3364.18,-360.729 3367.68,-370.729 3371.18,-360.729 3364.18,-360.729"/>
</g>
<!-- CoreModule -->
<g id="node7" class="node"><title>CoreModule</title>
<polygon fill="#8dd3c7" stroke="black" points="3728.26,-198 3725.26,-202 3704.26,-202 3701.26,-198 3641.74,-198 3641.74,-162 3728.26,-162 3728.26,-198"/>
<text text-anchor="middle" x="3685" y="-175.8" font-family="Times,serif" font-size="14.00">CoreModule</text>
</g>
<!-- CoreModule->AppModule -->
<g id="edge6" class="edge"><title>CoreModule->AppModule</title>
<path fill="none" stroke="black" d="M3650.22,-198.122C3650.22,-200.973 3650.22,-203 3650.22,-203 3650.22,-203 3381.18,-203 3381.18,-203 3381.18,-203 3381.18,-360.827 3381.18,-360.827"/>
<polygon fill="black" stroke="black" points="3377.68,-360.827 3381.18,-370.827 3384.68,-360.827 3377.68,-360.827"/>
</g>
<!-- HomeModule -->
<g id="node8" class="node"><title>HomeModule</title>
<polygon fill="#8dd3c7" stroke="black" points="3617.76,-342 3614.76,-346 3593.76,-346 3590.76,-342 3524.24,-342 3524.24,-306 3617.76,-306 3617.76,-342"/>
<text text-anchor="middle" x="3571" y="-319.8" font-family="Times,serif" font-size="14.00">HomeModule</text>
</g>
<!-- HomeModule->AppModule -->
<g id="edge7" class="edge"><title>HomeModule->AppModule</title>
<path fill="none" stroke="black" d="M3571,-342.222C3571,-360.829 3571,-387 3571,-387 3571,-387 3420.85,-387 3420.85,-387"/>
<polygon fill="black" stroke="black" points="3420.85,-383.5 3410.85,-387 3420.85,-390.5 3420.85,-383.5"/>
</g>
<!-- PlayerModule -->
<g id="node9" class="node"><title>PlayerModule</title>
<polygon fill="#8dd3c7" stroke="black" points="3727.81,-274 3724.81,-278 3703.81,-278 3700.81,-274 3632.19,-274 3632.19,-238 3727.81,-238 3727.81,-274"/>
<text text-anchor="middle" x="3680" y="-251.8" font-family="Times,serif" font-size="14.00">PlayerModule</text>
</g>
<!-- PlayerModule->AppModule -->
<g id="edge8" class="edge"><title>PlayerModule->AppModule</title>
<path fill="none" stroke="black" d="M3659.13,-274.058C3659.13,-278.495 3659.13,-282 3659.13,-282 3659.13,-282 3394.68,-282 3394.68,-282 3394.68,-282 3394.68,-360.849 3394.68,-360.849"/>
<polygon fill="black" stroke="black" points="3391.18,-360.849 3394.68,-370.849 3398.18,-360.849 3391.18,-360.849"/>
</g>
<!-- PlayerComponent -->
<g id="node25" class="node"><title>PlayerComponent </title>
<polygon fill="#fb8072" stroke="black" points="5668.1,-198 5547.9,-198 5547.9,-162 5668.1,-162 5668.1,-198"/>
<text text-anchor="middle" x="5608" y="-175.8" font-family="Times,serif" font-size="14.00">PlayerComponent </text>
</g>
<!-- PlayerModule->PlayerComponent -->
<g id="edge27" class="edge"><title>PlayerModule->PlayerComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M3658.83,-237.942C3658.83,-233.505 3658.83,-230 3658.83,-230 3658.83,-230 5551.46,-230 5551.46,-230 5551.46,-230 5551.46,-208.051 5551.46,-208.051"/>
<polygon fill="black" stroke="black" points="5554.96,-208.051 5551.46,-198.051 5547.96,-208.051 5554.96,-208.051"/>
</g>
<!-- SearchModule -->
<g id="node10" class="node"><title>SearchModule</title>
<polygon fill="#8dd3c7" stroke="black" points="3505.64,-342 3502.64,-346 3481.64,-346 3478.64,-342 3408.36,-342 3408.36,-306 3505.64,-306 3505.64,-342"/>
<text text-anchor="middle" x="3457" y="-319.8" font-family="Times,serif" font-size="14.00">SearchModule</text>
</g>
<!-- SearchModule->AppModule -->
<g id="edge9" class="edge"><title>SearchModule->AppModule</title>
<path fill="none" stroke="black" d="M3417.15,-342.24C3417.15,-357.571 3417.15,-377 3417.15,-377 3417.15,-377 3416.52,-377 3416.52,-377"/>
<polygon fill="black" stroke="black" points="3420.85,-373.5 3410.85,-377 3420.85,-380.5 3420.85,-373.5"/>
</g>
<!-- SearchBarComponent -->
<g id="node32" class="node"><title>SearchBarComponent </title>
<polygon fill="#fb8072" stroke="black" points="4514.63,-274 4371.37,-274 4371.37,-238 4514.63,-238 4514.63,-274"/>
<text text-anchor="middle" x="4443" y="-251.8" font-family="Times,serif" font-size="14.00">SearchBarComponent </text>
</g>
<!-- SearchModule->SearchBarComponent -->
<g id="edge38" class="edge"><title>SearchModule->SearchBarComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M3433.56,-305.578C3433.56,-296.721 3433.56,-288 3433.56,-288 3433.56,-288 4443,-288 4443,-288 4443,-288 4443,-284.243 4443,-284.243"/>
<polygon fill="black" stroke="black" points="4446.5,-284.243 4443,-274.243 4439.5,-284.243 4446.5,-284.243"/>
</g>
<!-- SharedModule -->
<g id="node11" class="node"><title>SharedModule</title>
<polygon fill="#8dd3c7" stroke="black" points="3088.42,-198 3085.42,-202 3064.42,-202 3061.42,-198 2989.58,-198 2989.58,-162 3088.42,-162 3088.42,-198"/>
<text text-anchor="middle" x="3039" y="-175.8" font-family="Times,serif" font-size="14.00">SharedModule</text>
</g>
<!-- SharedModule->AppModule -->
<g id="edge10" class="edge"><title>SharedModule->AppModule</title>
<path fill="none" stroke="black" d="M3002.09,-198.331C3002.09,-250.324 3002.09,-395 3002.09,-395 3002.09,-395 3317.27,-395 3317.27,-395"/>
<polygon fill="black" stroke="black" points="3317.27,-398.5 3327.27,-395 3317.27,-391.5 3317.27,-398.5"/>
</g>
<!-- SharedModule->HomeModule -->
<g id="edge20" class="edge"><title>SharedModule->HomeModule</title>
<path fill="none" stroke="black" d="M3026.7,-198.342C3026.7,-227.211 3026.7,-280 3026.7,-280 3026.7,-280 3539.16,-280 3539.16,-280 3539.16,-280 3539.16,-295.849 3539.16,-295.849"/>
<polygon fill="black" stroke="black" points="3535.66,-295.849 3539.16,-305.849 3542.66,-295.85 3535.66,-295.849"/>
</g>
<!-- SharedModule->PlayerModule -->
<g id="edge26" class="edge"><title>SharedModule->PlayerModule</title>
<path fill="none" stroke="black" d="M3051.3,-198.154C3051.3,-199.297 3051.3,-200 3051.3,-200 3051.3,-200 3636.98,-200 3636.98,-200 3636.98,-200 3636.98,-227.973 3636.98,-227.973"/>
<polygon fill="black" stroke="black" points="3633.48,-227.973 3636.98,-237.973 3640.48,-227.973 3633.48,-227.973"/>
</g>
<!-- SharedModule->SearchModule -->
<g id="edge36" class="edge"><title>SharedModule->SearchModule</title>
<path fill="none" stroke="black" d="M3014.39,-198.041C3014.39,-235.448 3014.39,-318 3014.39,-318 3014.39,-318 3397.94,-318 3397.94,-318"/>
<polygon fill="black" stroke="black" points="3397.94,-321.5 3407.94,-318 3397.94,-314.5 3397.94,-321.5"/>
</g>
<!-- TracklistsModule -->
<g id="node12" class="node"><title>TracklistsModule</title>
<polygon fill="#8dd3c7" stroke="black" points="3614.25,-274 3611.25,-278 3590.25,-278 3587.25,-274 3499.75,-274 3499.75,-238 3614.25,-238 3614.25,-274"/>
<text text-anchor="middle" x="3557" y="-251.8" font-family="Times,serif" font-size="14.00">TracklistsModule</text>
</g>
<!-- SharedModule->TracklistsModule -->
<g id="edge64" class="edge"><title>SharedModule->TracklistsModule</title>
<path fill="none" stroke="black" d="M3075.91,-198.198C3075.91,-222.356 3075.91,-262 3075.91,-262 3075.91,-262 3489.45,-262 3489.45,-262"/>
<polygon fill="black" stroke="black" points="3489.45,-265.5 3499.45,-262 3489.45,-258.5 3489.45,-265.5"/>
</g>
<!-- UsersModule -->
<g id="node13" class="node"><title>UsersModule</title>
<polygon fill="#8dd3c7" stroke="black" points="3727.92,-342 3724.92,-346 3703.92,-346 3700.92,-342 3636.08,-342 3636.08,-306 3727.92,-306 3727.92,-342"/>
<text text-anchor="middle" x="3682" y="-319.8" font-family="Times,serif" font-size="14.00">UsersModule</text>
</g>
<!-- SharedModule->UsersModule -->
<g id="edge72" class="edge"><title>SharedModule->UsersModule</title>
<path fill="none" stroke="black" d="M3039,-198.433C3039,-226.821 3039,-278 3039,-278 3039,-278 3647.71,-278 3647.71,-278 3647.71,-278 3647.71,-295.82 3647.71,-295.82"/>
<polygon fill="black" stroke="black" points="3644.21,-295.82 3647.71,-305.82 3651.21,-295.82 3644.21,-295.82"/>
</g>
<!-- AudioTimelineComponent -->
<g id="node43" class="node"><title>AudioTimelineComponent </title>
<polygon fill="#fb8072" stroke="black" points="1284.37,-274 1113.63,-274 1113.63,-238 1284.37,-238 1284.37,-274"/>
<text text-anchor="middle" x="1199" y="-251.8" font-family="Times,serif" font-size="14.00">AudioTimelineComponent </text>
</g>
<!-- SharedModule->AudioTimelineComponent -->
<g id="edge49" class="edge"><title>SharedModule->AudioTimelineComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M2989.78,-180C2697.17,-180 1199,-180 1199,-180 1199,-180 1199,-227.989 1199,-227.989"/>
<polygon fill="black" stroke="black" points="1195.5,-227.989 1199,-237.989 1202.5,-227.989 1195.5,-227.989"/>
</g>
<!-- ContentHeaderComponent -->
<g id="node44" class="node"><title>ContentHeaderComponent </title>
<polygon fill="#fb8072" stroke="black" points="1095.58,-274 926.424,-274 926.424,-238 1095.58,-238 1095.58,-274"/>
<text text-anchor="middle" x="1011" y="-251.8" font-family="Times,serif" font-size="14.00">ContentHeaderComponent </text>
</g>
<!-- SharedModule->ContentHeaderComponent -->
<g id="edge50" class="edge"><title>SharedModule->ContentHeaderComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M2989.62,-178C2679.27,-178 1011,-178 1011,-178 1011,-178 1011,-227.909 1011,-227.909"/>
<polygon fill="black" stroke="black" points="1007.5,-227.909 1011,-237.909 1014.5,-227.909 1007.5,-227.909"/>
</g>
<!-- IconComponent -->
<g id="node45" class="node"><title>IconComponent </title>
<polygon fill="#fb8072" stroke="black" points="907.708,-274 798.292,-274 798.292,-238 907.708,-238 907.708,-274"/>
<text text-anchor="middle" x="853" y="-251.8" font-family="Times,serif" font-size="14.00">IconComponent </text>
</g>
<!-- SharedModule->IconComponent -->
<g id="edge51" class="edge"><title>SharedModule->IconComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M2989.76,-176C2665.79,-176 853,-176 853,-176 853,-176 853,-227.847 853,-227.847"/>
<polygon fill="black" stroke="black" points="849.5,-227.847 853,-237.847 856.5,-227.847 849.5,-227.847"/>
</g>
<!-- IconButtonComponent -->
<g id="node46" class="node"><title>IconButtonComponent </title>
<polygon fill="#fb8072" stroke="black" points="779.826,-274 632.174,-274 632.174,-238 779.826,-238 779.826,-274"/>
<text text-anchor="middle" x="706" y="-251.8" font-family="Times,serif" font-size="14.00">IconButtonComponent </text>
</g>
<!-- SharedModule->IconButtonComponent -->
<g id="edge52" class="edge"><title>SharedModule->IconButtonComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M2989.73,-174C2653.16,-174 706,-174 706,-174 706,-174 706,-227.802 706,-227.802"/>
<polygon fill="black" stroke="black" points="702.5,-227.802 706,-237.802 709.5,-227.802 702.5,-227.802"/>
</g>
<!-- LoadingIndicatorComponent -->
<g id="node47" class="node"><title>LoadingIndicatorComponent </title>
<polygon fill="#fb8072" stroke="black" points="614.022,-274 431.978,-274 431.978,-238 614.022,-238 614.022,-274"/>
<text text-anchor="middle" x="523" y="-251.8" font-family="Times,serif" font-size="14.00">LoadingIndicatorComponent </text>
</g>
<!-- SharedModule->LoadingIndicatorComponent -->
<g id="edge53" class="edge"><title>SharedModule->LoadingIndicatorComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M2989.59,-171C2637.51,-171 523,-171 523,-171 523,-171 523,-227.974 523,-227.974"/>
<polygon fill="black" stroke="black" points="519.5,-227.974 523,-237.974 526.5,-227.974 519.5,-227.974"/>
</g>
<!-- CommonModule -->
<g id="node48" class="node"><title>CommonModule </title>
<polygon fill="#fb8072" stroke="black" points="413.668,-274 298.332,-274 298.332,-238 413.668,-238 413.668,-274"/>
<text text-anchor="middle" x="356" y="-251.8" font-family="Times,serif" font-size="14.00">CommonModule </text>
</g>
<!-- SharedModule->CommonModule -->
<g id="edge54" class="edge"><title>SharedModule->CommonModule </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M2989.56,-169C2624.1,-169 356,-169 356,-169 356,-169 356,-227.974 356,-227.974"/>
<polygon fill="black" stroke="black" points="352.5,-227.974 356,-237.974 359.5,-227.974 352.5,-227.974"/>
</g>
<!-- FormatIntegerPipe -->
<g id="node49" class="node"><title>FormatIntegerPipe </title>
<polygon fill="#fb8072" stroke="black" points="280.469,-274 155.531,-274 155.531,-238 280.469,-238 280.469,-274"/>
<text text-anchor="middle" x="218" y="-251.8" font-family="Times,serif" font-size="14.00">FormatIntegerPipe </text>
</g>
<!-- SharedModule->FormatIntegerPipe -->
<g id="edge55" class="edge"><title>SharedModule->FormatIntegerPipe </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M2989.74,-167C2614.17,-167 218,-167 218,-167 218,-167 218,-227.99 218,-227.99"/>
<polygon fill="black" stroke="black" points="214.5,-227.989 218,-237.99 221.5,-227.99 214.5,-227.989"/>
</g>
<!-- FormatTimePipe -->
<g id="node50" class="node"><title>FormatTimePipe </title>
<polygon fill="#fb8072" stroke="black" points="138.376,-274 23.6242,-274 23.6242,-238 138.376,-238 138.376,-274"/>
<text text-anchor="middle" x="81" y="-251.8" font-family="Times,serif" font-size="14.00">FormatTimePipe </text>
</g>
<!-- SharedModule->FormatTimePipe -->
<g id="edge56" class="edge"><title>SharedModule->FormatTimePipe </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M2989.51,-165C2602.86,-165 81,-165 81,-165 81,-165 81,-227.585 81,-227.585"/>
<polygon fill="black" stroke="black" points="77.5001,-227.585 81,-237.585 84.5001,-227.585 77.5001,-227.585"/>
</g>
<!-- TracklistsModule->AppModule -->
<g id="edge11" class="edge"><title>TracklistsModule->AppModule</title>
<path fill="none" stroke="black" d="M3518.02,-274.053C3518.02,-308.893 3518.02,-382 3518.02,-382 3518.02,-382 3420.91,-382 3420.91,-382"/>
<polygon fill="black" stroke="black" points="3420.91,-378.5 3410.91,-382 3420.91,-385.5 3420.91,-378.5"/>
</g>
<!-- TracklistsModule->HomeModule -->
<g id="edge21" class="edge"><title>TracklistsModule->HomeModule</title>
<path fill="none" stroke="black" d="M3554.2,-274.223C3554.2,-274.223 3554.2,-295.727 3554.2,-295.727"/>
<polygon fill="black" stroke="black" points="3550.71,-295.727 3554.2,-305.727 3557.71,-295.727 3550.71,-295.727"/>
</g>
<!-- TracklistsModule->SearchModule -->
<g id="edge37" class="edge"><title>TracklistsModule->SearchModule</title>
<path fill="none" stroke="black" d="M3511.92,-274.223C3511.92,-294.365 3511.92,-324 3511.92,-324 3511.92,-324 3511.33,-324 3511.33,-324"/>
<polygon fill="black" stroke="black" points="3516.04,-320.5 3506.04,-324 3516.04,-327.5 3516.04,-320.5"/>
</g>
<!-- TracklistsModule->UsersModule -->
<g id="edge74" class="edge"><title>TracklistsModule->UsersModule</title>
<path fill="none" stroke="black" d="M3599.33,-274.154C3599.33,-275.297 3599.33,-276 3599.33,-276 3599.33,-276 3670.55,-276 3670.55,-276 3670.55,-276 3670.55,-295.853 3670.55,-295.853"/>
<polygon fill="black" stroke="black" points="3667.05,-295.853 3670.55,-305.853 3674.05,-295.853 3667.05,-295.853"/>
</g>
<!-- TracklistComponent -->
<g id="node58" class="node"><title>TracklistComponent </title>
<polygon fill="#fb8072" stroke="black" points="4439.09,-122 4304.91,-122 4304.91,-86 4439.09,-86 4439.09,-122"/>
<text text-anchor="middle" x="4372" y="-99.8" font-family="Times,serif" font-size="14.00">TracklistComponent </text>
</g>
<!-- TracklistsModule->TracklistComponent -->
<g id="edge66" class="edge"><title>TracklistsModule->TracklistComponent </title>
<path fill="none" stroke="black" stroke-dasharray="5,2" d="M3510.06,-237.849C3510.06,-225.729 3510.06,-212 3510.06,-212 3510.06,-212 4421.64,-212 4421.64,-212 4421.64,-212 4421.64,-132.321 4421.64,-132.321"/>
<polygon fill="black" stroke="black" points="4425.14,-132.321 4421.64,-122.321 4418.14,-132.321 4425.14,-132.321"/>
</g>
<!-- UsersModule->AppModule -->
<g id="edge12" class="edge"><title>UsersModule->AppModule</title>
<path fill="none" stroke="black" d="M3704.86,-342.223C3704.86,-362.365 3704.86,-392 3704.86,-392 3704.86,-392 3420.86,-392 3420.86,-392"/>
<polygon fill="black" stroke="black" points="3420.86,-388.5 3410.86,-392 3420.86,-395.5 3420.86,-388.5"/>
</g>
<!-- { provide: APP_BASE_HREF, useValue: '/' } -->
<g id="node15" class="node"><title>{ provide: APP_BASE_HREF, useValue: '/' }</title>
<ellipse fill="#fdb462" stroke="black" cx="2775" cy="-324" rx="191.343" ry="18"/>
<text text-anchor="middle" x="2775" y="-319.8" font-family="Times,serif" font-size="14.00">{ provide: APP_BASE_HREF, useValue: '/' }</text>
</g>
<!-- { provide: APP_BASE_HREF, useValue: '/' }->AppModule -->
<g id="edge14" class="edge"><title>{ provide: APP_BASE_HREF, useValue: '/' }->AppModule</title>
<path fill="none" stroke="black" d="M2955.54,-330C3121.09,-330 3340.67,-330 3340.67,-330 3340.67,-330 3340.67,-360.977 3340.67,-360.977"/>
<polygon fill="black" stroke="black" points="3337.17,-360.977 3340.67,-370.977 3344.17,-360.978 3337.17,-360.977"/>
</g>
<!-- HttpModule -->
<g id="node16" class="node"><title>HttpModule</title>
<polygon fill="#8dd3c7" stroke="black" points="3847.44,-122 3844.44,-126 3823.44,-126 3820.44,-122 3762.56,-122 3762.56,-86 3847.44,-86 3847.44,-122"/>
<text text-anchor="middle" x="3805" y="-99.8" font-family="Times,serif" font-size="14.00">HttpModule</text>
</g>
<!-- HttpModule->CoreModule -->
<g id="edge15" class="edge"><title>HttpModule->CoreModule</title>
<path fill="none" stroke="black" d="M3805,-122.011C3805,-144.485 3805,-180 3805,-180 3805,-180 3738.32,-180 3738.32,-180"/>
<polygon fill="black" stroke="black" points="3738.32,-176.5 3728.32,-180 3738.32,-183.5 3738.32,-176.5"/>
</g>
<!-- ApiService -->
<g id="node17" class="node"><title>ApiService</title>
<ellipse fill="#fdb462" stroke="black" cx="3685" cy="-104" rx="54.4508" ry="18"/>
<text text-anchor="middle" x="3685" y="-99.8" font-family="Times,serif" font-size="14.00">ApiService</text>
</g>
<!-- ApiService->CoreModule -->
<g id="edge16" class="edge"><title>ApiService->CoreModule</title>
<path fill="none" stroke="black" d="M3699.46,-121.627C3699.46,-121.627 3699.46,-151.941 3699.46,-151.941"/>
<polygon fill="black" stroke="black" points="3695.96,-151.941 3699.46,-161.941 3702.96,-151.941 3695.96,-151.941"/>
</g>
<!-- MEDIA_QUERY_PROVIDERS -->
<g id="node18" class="node"><title>MEDIA_QUERY_PROVIDERS</title>
<ellipse fill="#fdb462" stroke="black" cx="3473" cy="-104" rx="139.467" ry="18"/>
<text text-anchor="middle" x="3473" y="-99.8" font-family="Times,serif" font-size="14.00">MEDIA_QUERY_PROVIDERS</text>
</g>
<!-- MEDIA_QUERY_PROVIDERS->CoreModule -->
<g id="edge17" class="edge"><title>MEDIA_QUERY_PROVIDERS->CoreModule</title>
<path fill="none" stroke="black" d="M3519.23,-121.013C3519.23,-133.756 3519.23,-149 3519.23,-149 3519.23,-149 3670.54,-149 3670.54,-149 3670.54,-149 3670.54,-151.967 3670.54,-151.967"/>
<polygon fill="black" stroke="black" points="3667.04,-151.967 3670.54,-161.967 3674.04,-151.967 3667.04,-151.967"/>
</g>
<!-- HomePageComponent -->
<g id="node19" class="node"><title>HomePageComponent</title>
<polygon fill="#ffffb3" stroke="black" points="5399.26,-274 5256.74,-274 5256.74,-238 5399.26,-238 5399.26,-274"/>
<text text-anchor="middle" x="5328" y="-251.8" font-family="Times,serif" font-size="14.00">HomePageComponent</text>
</g>
<!-- HomePageComponent->HomeModule -->
<g id="edge18" class="edge"><title>HomePageComponent->HomeModule</title>
<path fill="none" stroke="black" d="M5328,-274.103C5328,-285.086 5328,-297 5328,-297 5328,-297 3584.29,-297 3584.29,-297 3584.29,-297 3584.29,-297.884 3584.29,-297.884"/>
<polygon fill="black" stroke="black" points="3580.79,-295.841 3584.29,-305.841 3587.79,-295.841 3580.79,-295.841"/>
</g>
<!-- RouterModule.forChild(args) -->
<g id="node20" class="node"><title>RouterModule.forChild(args)</title>
<polygon fill="#8dd3c7" stroke="black" points="5232.73,-274 5229.73,-278 5208.73,-278 5205.73,-274 5051.27,-274 5051.27,-238 5232.73,-238 5232.73,-274"/>
<text text-anchor="middle" x="5142" y="-251.8" font-family="Times,serif" font-size="14.00">RouterModule.forChild(args)</text>
</g>
<!-- RouterModule.forChild(args)->HomeModule -->
<g id="edge19" class="edge"><title>RouterModule.forChild(args)->HomeModule</title>
<path fill="none" stroke="black" d="M5111.79,-274.13C5111.79,-284.315 5111.79,-295 5111.79,-295 5111.79,-295 3569.25,-295 3569.25,-295 3569.25,-295 3569.25,-296.08 3569.25,-296.08"/>
<polygon fill="black" stroke="black" points="3565.75,-295.798 3569.25,-305.799 3572.75,-295.799 3565.75,-295.798"/>
</g>
<!-- RouterModule.forChild(args)->SearchModule -->
<g id="edge35" class="edge"><title>RouterModule.forChild(args)->SearchModule</title>
<path fill="none" stroke="black" d="M5064.92,-237.754C5064.92,-223.823 5064.92,-207 5064.92,-207 5064.92,-207 3455.58,-207 3455.58,-207 3455.58,-207 3455.58,-295.975 3455.58,-295.975"/>
<polygon fill="black" stroke="black" points="3452.08,-295.975 3455.58,-305.975 3459.08,-295.975 3452.08,-295.975"/>
</g>
<!-- RouterModule.forChild(args)->UsersModule -->
<g id="edge71" class="edge"><title>RouterModule.forChild(args)->UsersModule</title>
<path fill="none" stroke="black" d="M5172.21,-274.485C5172.21,-286.14 5172.21,-299 5172.21,-299 5172.21,-299 3681.97,-299 3681.97,-299 3681.97,-299 3681.97,-299.683 3681.97,-299.683"/>
<polygon fill="black" stroke="black" points="3678.47,-295.831 3681.97,-305.831 3685.47,-295.831 3678.47,-295.831"/>
</g>
<!-- PlayerComponent -->
<g id="node21" class="node"><title>PlayerComponent</title>
<polygon fill="#ffffb3" stroke="black" points="5195.6,-198 5078.4,-198 5078.4,-162 5195.6,-162 5195.6,-198"/>
<text text-anchor="middle" x="5137" y="-175.8" font-family="Times,serif" font-size="14.00">PlayerComponent</text>
</g>
<!-- PlayerComponent->PlayerModule -->
<g id="edge22" class="edge"><title>PlayerComponent->PlayerModule</title>
<path fill="none" stroke="black" d="M5137,-198.044C5137,-210.563 5137,-225 5137,-225 5137,-225 3667.43,-225 3667.43,-225 3667.43,-225 3667.43,-227.967 3667.43,-227.967"/>
<polygon fill="black" stroke="black" points="3663.93,-227.967 3667.43,-237.967 3670.93,-227.967 3663.93,-227.967"/>
</g>
<!-- PlayerControlsComponent -->
<g id="node22" class="node"><title>PlayerControlsComponent</title>
<polygon fill="#ffffb3" stroke="black" points="5523.82,-198 5358.18,-198 5358.18,-162 5523.82,-162 5523.82,-198"/>
<text text-anchor="middle" x="5441" y="-175.8" font-family="Times,serif" font-size="14.00">PlayerControlsComponent</text>
</g>
<!-- PlayerControlsComponent->PlayerModule -->
<g id="edge23" class="edge"><title>PlayerControlsComponent->PlayerModule</title>
<path fill="none" stroke="black" d="M5378.86,-198.147C5378.86,-211.74 5378.86,-228 5378.86,-228 5378.86,-228 3684.64,-228 3684.64,-228 3684.64,-228 3684.64,-228.979 3684.64,-228.979"/>
<polygon fill="black" stroke="black" points="3681.14,-227.793 3684.64,-237.793 3688.14,-227.793 3681.14,-227.793"/>
</g>
<!-- FormatVolumePipe -->
<g id="node23" class="node"><title>FormatVolumePipe</title>
<polygon fill="#ffffb3" stroke="black" points="5340.43,-198 5213.57,-198 5213.57,-162 5340.43,-162 5340.43,-198"/>
<text text-anchor="middle" x="5277" y="-175.8" font-family="Times,serif" font-size="14.00">FormatVolumePipe</text>
</g>
<!-- FormatVolumePipe->PlayerModule -->
<g id="edge24" class="edge"><title>FormatVolumePipe->PlayerModule</title>
<path fill="none" stroke="black" d="M5223.2,-198.037C5223.2,-211.291 5223.2,-227 5223.2,-227 5223.2,-227 3676.03,-227 3676.03,-227 3676.03,-227 3676.03,-228.08 3676.03,-228.08"/>
<polygon fill="black" stroke="black" points="3672.53,-227.798 3676.03,-237.799 3679.53,-227.799 3672.53,-227.798"/>
</g>
<!-- EffectsModule.run(args) -->
<g id="node24" class="node"><title>EffectsModule.run(args)</title>
<polygon fill="#8dd3c7" stroke="black" points="6442.99,-198 6439.99,-202 6418.99,-202 6415.99,-198 6289.01,-198 6289.01,-162 6442.99,-162 6442.99,-198"/>
<text text-anchor="middle" x="6366" y="-175.8" font-family="Times,serif" font-size="14.00">EffectsModule.run(args)</text>
</g>
<!-- EffectsModule.run(args)->PlayerModule -->
<g id="edge25" class="edge"><title>EffectsModule.run(args)->PlayerModule</title>
<path fill="none" stroke="black" d="M6381.4,-198.035C6381.4,-214.734 6381.4,-237 6381.4,-237 6381.4,-237 3719.05,-237 3719.05,-237 3719.05,-237 3719.05,-237.082 3719.05,-237.082"/>
<polygon fill="black" stroke="black" points="3715.55,-227.816 3719.05,-237.816 3722.55,-227.817 3715.55,-227.816"/>
</g>
<!-- EffectsModule.run(args)->SearchModule -->
<g id="edge33" class="edge"><title>EffectsModule.run(args)->SearchModule</title>
<path fill="none" stroke="black" d="M6319.8,-198.169C6319.8,-202.046 6319.8,-205 6319.8,-205 6319.8,-205 3448.24,-205 3448.24,-205 3448.24,-205 3448.24,-295.926 3448.24,-295.926"/>
<polygon fill="black" stroke="black" points="3444.74,-295.926 3448.24,-305.926 3451.74,-295.926 3444.74,-295.926"/>
</g>
<!-- EffectsModule.run(args)->TracklistsModule -->
<g id="edge65" class="edge"><title>EffectsModule.run(args)->TracklistsModule</title>
<path fill="none" stroke="black" d="M6350.6,-198.485C6350.6,-210.14 6350.6,-223 6350.6,-223 6350.6,-223 3603.94,-223 3603.94,-223 3603.94,-223 3603.94,-227.955 3603.94,-227.955"/>
<polygon fill="black" stroke="black" points="3600.44,-227.955 3603.94,-237.955 3607.44,-227.955 3600.44,-227.955"/>
</g>
<!-- EffectsModule.run(args)->UsersModule -->
<g id="edge73" class="edge"><title>EffectsModule.run(args)->UsersModule</title>
<path fill="none" stroke="black" d="M6412.2,-198.116C6412.2,-244.151 6412.2,-362 6412.2,-362 6412.2,-362 3659.14,-362 3659.14,-362 3659.14,-362 3659.14,-352.11 3659.14,-352.11"/>
<polygon fill="black" stroke="black" points="3662.64,-352.11 3659.14,-342.11 3655.64,-352.11 3662.64,-352.11"/>
</g>
<!-- AUDIO_SOURCE_PROVIDER -->
<g id="node26" class="node"><title>AUDIO_SOURCE_PROVIDER</title>
<ellipse fill="#fdb462" stroke="black" cx="5830" cy="-180" rx="138.323" ry="18"/>
<text text-anchor="middle" x="5830" y="-175.8" font-family="Times,serif" font-size="14.00">AUDIO_SOURCE_PROVIDER</text>
</g>
<!-- AUDIO_SOURCE_PROVIDER->PlayerModule -->
<g id="edge28" class="edge"><title>AUDIO_SOURCE_PROVIDER->PlayerModule</title>
<path fill="none" stroke="black" d="M5703.91,-187.673C5703.91,-202.137 5703.91,-232 5703.91,-232 5703.91,-232 3693.24,-232 3693.24,-232 3693.24,-232 3693.24,-232.581 3693.24,-232.581"/>
<polygon fill="black" stroke="black" points="3689.74,-227.81 3693.24,-237.81 3696.74,-227.81 3689.74,-227.81"/>
</g>
<!-- PlayerActions -->
<g id="node27" class="node"><title>PlayerActions</title>
<ellipse fill="#fdb462" stroke="black" cx="6199" cy="-180" rx="65.9871" ry="18"/>
<text text-anchor="middle" x="6199" y="-175.8" font-family="Times,serif" font-size="14.00">PlayerActions</text>
</g>
<!-- PlayerActions->PlayerModule -->
<g id="edge29" class="edge"><title>PlayerActions->PlayerModule</title>
<path fill="none" stroke="black" d="M6199,-198.009C6199,-214.049 6199,-235 6199,-235 6199,-235 3710.45,-235 3710.45,-235 3710.45,-235 3710.45,-235.292 3710.45,-235.292"/>
<polygon fill="black" stroke="black" points="3706.95,-227.92 3710.45,-237.92 3713.95,-227.92 3706.95,-227.92"/>
</g>
<!-- PlayerService -->
<g id="node28" class="node"><title>PlayerService</title>
<ellipse fill="#fdb462" stroke="black" cx="6051" cy="-180" rx="64.8215" ry="18"/>
<text text-anchor="middle" x="6051" y="-175.8" font-family="Times,serif" font-size="14.00">PlayerService</text>
</g>
<!-- PlayerService->PlayerModule -->
<g id="edge30" class="edge"><title>PlayerService->PlayerModule</title>
<path fill="none" stroke="black" d="M5994.91,-189.232C5994.91,-204.417 5994.91,-233 5994.91,-233 5994.91,-233 3701.85,-233 3701.85,-233 3701.85,-233 3701.85,-233.488 3701.85,-233.488"/>
<polygon fill="black" stroke="black" points="3698.35,-227.878 3701.85,-237.878 3705.35,-227.878 3698.35,-227.878"/>
</g>
<!-- SearchBarComponent -->
<g id="node29" class="node"><title>SearchBarComponent</title>
<polygon fill="#ffffb3" stroke="black" points="5010.63,-274 4871.37,-274 4871.37,-238 5010.63,-238 5010.63,-274"/>
<text text-anchor="middle" x="4941" y="-251.8" font-family="Times,serif" font-size="14.00">SearchBarComponent</text>
</g>
<!-- SearchBarComponent->SearchModule -->
<g id="edge31" class="edge"><title>SearchBarComponent->SearchModule</title>
<path fill="none" stroke="black" d="M4941,-274.066C4941,-283.459 4941,-293 4941,-293 4941,-293 3492.28,-293 3492.28,-293 3492.28,-293 3492.28,-295.967 3492.28,-295.967"/>
<polygon fill="black" stroke="black" points="3488.78,-295.967 3492.28,-305.967 3495.78,-295.967 3488.78,-295.967"/>
</g>
<!-- SearchPageComponent -->
<g id="node30" class="node"><title>SearchPageComponent</title>
<polygon fill="#ffffb3" stroke="black" points="4853.13,-274 4706.87,-274 4706.87,-238 4853.13,-238 4853.13,-274"/>
<text text-anchor="middle" x="4780" y="-251.8" font-family="Times,serif" font-size="14.00">SearchPageComponent</text>
</g>
<!-- SearchPageComponent->SearchModule -->
<g id="edge32" class="edge"><title>SearchPageComponent->SearchModule</title>
<path fill="none" stroke="black" d="M4780,-274.32C4780,-282.788 4780,-291 4780,-291 4780,-291 3484.94,-291 3484.94,-291 3484.94,-291 3484.94,-295.955 3484.94,-295.955"/>
<polygon fill="black" stroke="black" points="3481.44,-295.955 3484.94,-305.955 3488.44,-295.955 3481.44,-295.955"/>
</g>
<!-- ReactiveFormsModule -->
<g id="node31" class="node"><title>ReactiveFormsModule</title>
<polygon fill="#8dd3c7" stroke="black" points="4683.3,-274 4680.3,-278 4659.3,-278 4656.3,-274 4538.7,-274 4538.7,-238 4683.3,-238 4683.3,-274"/>
<text text-anchor="middle" x="4611" y="-251.8" font-family="Times,serif" font-size="14.00">ReactiveFormsModule</text>
</g>
<!-- ReactiveFormsModule->SearchModule -->
<g id="edge34" class="edge"><title>ReactiveFormsModule->SearchModule</title>
<path fill="none" stroke="black" d="M4611,-274.194C4611,-282.278 4611,-290 4611,-290 4611,-290 3477.6,-290 3477.6,-290 3477.6,-290 3477.6,-295.806 3477.6,-295.806"/>
<polygon fill="black" stroke="black" points="3474.1,-295.806 3477.6,-305.806 3481.1,-295.806 3474.1,-295.806"/>
</g>
<!-- SearchActions -->
<g id="node33" class="node"><title>SearchActions</title>
<ellipse fill="#fdb462" stroke="black" cx="4280" cy="-256" rx="67.1927" ry="18"/>
<text text-anchor="middle" x="4280" y="-251.8" font-family="Times,serif" font-size="14.00">SearchActions</text>
</g>
<!-- SearchActions->SearchModule -->
<g id="edge39" class="edge"><title>SearchActions->SearchModule</title>
<path fill="none" stroke="black" d="M4280,-274.143C4280,-280.461 4280,-286 4280,-286 4280,-286 3470.26,-286 3470.26,-286 3470.26,-286 3470.26,-295.89 3470.26,-295.89"/>
<polygon fill="black" stroke="black" points="3466.76,-295.89 3470.26,-305.89 3473.76,-295.89 3466.76,-295.89"/>
</g>
<!-- SearchService -->
<g id="node34" class="node"><title>SearchService</title>
<ellipse fill="#fdb462" stroke="black" cx="4128" cy="-256" rx="66.0281" ry="18"/>
<text text-anchor="middle" x="4128" y="-251.8" font-family="Times,serif" font-size="14.00">SearchService</text>
</g>
<!-- SearchService->SearchModule -->
<g id="edge40" class="edge"><title>SearchService->SearchModule</title>
<path fill="none" stroke="black" d="M4128,-274.207C4128,-279.555 4128,-284 4128,-284 4128,-284 3462.92,-284 3462.92,-284 3462.92,-284 3462.92,-295.873 3462.92,-295.873"/>
<polygon fill="black" stroke="black" points="3459.42,-295.873 3462.92,-305.873 3466.42,-295.873 3459.42,-295.873"/>
</g>
<!-- AudioTimelineComponent -->
<g id="node35" class="node"><title>AudioTimelineComponent</title>
<polygon fill="#ffffb3" stroke="black" points="2415.37,-274 2248.63,-274 2248.63,-238 2415.37,-238 2415.37,-274"/>
<text text-anchor="middle" x="2332" y="-251.8" font-family="Times,serif" font-size="14.00">AudioTimelineComponent</text>
</g>
<!-- AudioTimelineComponent->SharedModule -->
<g id="edge41" class="edge"><title>AudioTimelineComponent->SharedModule</title>
<path fill="none" stroke="black" d="M2332,-237.998C2332,-220.325 2332,-196 2332,-196 2332,-196 2979.57,-196 2979.57,-196"/>
<polygon fill="black" stroke="black" points="2979.57,-199.5 2989.57,-196 2979.57,-192.5 2979.57,-199.5"/>
</g>
<!-- ContentHeaderComponent -->
<g id="node36" class="node"><title>ContentHeaderComponent</title>
<polygon fill="#ffffb3" stroke="black" points="2231.08,-274 2064.92,-274 2064.92,-238 2231.08,-238 2231.08,-274"/>
<text text-anchor="middle" x="2148" y="-251.8" font-family="Times,serif" font-size="14.00">ContentHeaderComponent</text>
</g>
<!-- ContentHeaderComponent->SharedModule -->
<g id="edge42" class="edge"><title>ContentHeaderComponent->SharedModule</title>
<path fill="none" stroke="black" d="M2148,-237.733C2148,-219.445 2148,-194 2148,-194 2148,-194 2979.51,-194 2979.51,-194"/>
<polygon fill="black" stroke="black" points="2979.51,-197.5 2989.51,-194 2979.51,-190.5 2979.51,-197.5"/>
</g>
<!-- IconComponent -->
<g id="node37" class="node"><title>IconComponent</title>
<polygon fill="#ffffb3" stroke="black" points="2047.21,-274 1940.79,-274 1940.79,-238 2047.21,-238 2047.21,-274"/>
<text text-anchor="middle" x="1994" y="-251.8" font-family="Times,serif" font-size="14.00">IconComponent</text>
</g>
<!-- IconComponent->SharedModule -->
<g id="edge43" class="edge"><title>IconComponent->SharedModule</title>
<path fill="none" stroke="black" d="M1994,-237.831C1994,-218.91 1994,-192 1994,-192 1994,-192 2979.65,-192 2979.65,-192"/>
<polygon fill="black" stroke="black" points="2979.65,-195.5 2989.65,-192 2979.65,-188.5 2979.65,-195.5"/>
</g>
<!-- IconButtonComponent -->
<g id="node38" class="node"><title>IconButtonComponent</title>
<polygon fill="#ffffb3" stroke="black" points="1923.33,-274 1778.67,-274 1778.67,-238 1923.33,-238 1923.33,-274"/>
<text text-anchor="middle" x="1851" y="-251.8" font-family="Times,serif" font-size="14.00">IconButtonComponent</text>
</g>
<!-- IconButtonComponent->SharedModule -->
<g id="edge44" class="edge"><title>IconButtonComponent->SharedModule</title>
<path fill="none" stroke="black" d="M1851,-237.692C1851,-217.854 1851,-189 1851,-189 1851,-189 2979.47,-189 2979.47,-189"/>
<polygon fill="black" stroke="black" points="2979.47,-192.5 2989.47,-189 2979.47,-185.5 2979.47,-192.5"/>
</g>
<!-- LoadingIndicatorComponent -->
<g id="node39" class="node"><title>LoadingIndicatorComponent</title>
<polygon fill="#ffffb3" stroke="black" points="1761.02,-274 1582.98,-274 1582.98,-238 1761.02,-238 1761.02,-274"/>
<text text-anchor="middle" x="1672" y="-251.8" font-family="Times,serif" font-size="14.00">LoadingIndicatorComponent</text>
</g>
<!-- LoadingIndicatorComponent->SharedModule -->
<g id="edge45" class="edge"><title>LoadingIndicatorComponent->SharedModule</title>
<path fill="none" stroke="black" d="M1672,-237.871C1672,-217.428 1672,-187 1672,-187 1672,-187 2979.54,-187 2979.54,-187"/>
<polygon fill="black" stroke="black" points="2979.54,-190.5 2989.54,-187 2979.54,-183.5 2979.54,-190.5"/>
</g>
<!-- FormatIntegerPipe -->
<g id="node40" class="node"><title>FormatIntegerPipe</title>
<polygon fill="#ffffb3" stroke="black" points="1564.47,-274 1443.53,-274 1443.53,-238 1564.47,-238 1564.47,-274"/>
<text text-anchor="middle" x="1504" y="-251.8" font-family="Times,serif" font-size="14.00">FormatIntegerPipe</text>
</g>
<!-- FormatIntegerPipe->SharedModule -->
<g id="edge46" class="edge"><title>FormatIntegerPipe->SharedModule</title>
<path fill="none" stroke="black" d="M1504,-237.716C1504,-216.679 1504,-185 1504,-185 1504,-185 2979.67,-185 2979.67,-185"/>
<polygon fill="black" stroke="black" points="2979.67,-188.5 2989.67,-185 2979.67,-181.5 2979.67,-188.5"/>
</g>
<!-- FormatTimePipe -->
<g id="node41" class="node"><title>FormatTimePipe</title>
<polygon fill="#ffffb3" stroke="black" points="2544.38,-274 2433.62,-274 2433.62,-238 2544.38,-238 2544.38,-274"/>
<text text-anchor="middle" x="2489" y="-251.8" font-family="Times,serif" font-size="14.00">FormatTimePipe</text>
</g>
<!-- FormatTimePipe->SharedModule -->
<g id="edge47" class="edge"><title>FormatTimePipe->SharedModule</title>
<path fill="none" stroke="black" d="M2544.62,-250C2688.82,-250 3063.61,-250 3063.61,-250 3063.61,-250 3063.61,-208.027 3063.61,-208.027"/>
<polygon fill="black" stroke="black" points="3067.11,-208.027 3063.61,-198.027 3060.11,-208.027 3067.11,-208.027"/>
</g>
<!-- CommonModule -->
<g id="node42" class="node"><title>CommonModule</title>
<polygon fill="#8dd3c7" stroke="black" points="1419.67,-274 1416.67,-278 1395.67,-278 1392.67,-274 1308.33,-274 1308.33,-238 1419.67,-238 1419.67,-274"/>
<text text-anchor="middle" x="1364" y="-251.8" font-family="Times,serif" font-size="14.00">CommonModule</text>
</g>
<!-- CommonModule->SharedModule -->
<g id="edge48" class="edge"><title>CommonModule->SharedModule</title>
<path fill="none" stroke="black" d="M1364,-237.955C1364,-216.338 1364,-183 1364,-183 1364,-183 2979.78,-183 2979.78,-183"/>
<polygon fill="black" stroke="black" points="2979.78,-186.5 2989.78,-183 2979.78,-179.5 2979.78,-186.5"/>
</g>
<!-- TrackCardComponent -->
<g id="node51" class="node"><title>TrackCardComponent</title>
<polygon fill="#ffffb3" stroke="black" points="4203.69,-198 4062.31,-198 4062.31,-162 4203.69,-162 4203.69,-198"/>
<text text-anchor="middle" x="4133" y="-175.8" font-family="Times,serif" font-size="14.00">TrackCardComponent</text>
</g>
<!-- TrackCardComponent->TracklistsModule -->
<g id="edge57" class="edge"><title>TrackCardComponent->TracklistsModule</title>
<path fill="none" stroke="black" d="M4128.34,-198.207C4128.34,-203.555 4128.34,-208 4128.34,-208 4128.34,-208 3520.49,-208 3520.49,-208 3520.49,-208 3520.49,-227.853 3520.49,-227.853"/>
<polygon fill="black" stroke="black" points="3516.99,-227.853 3520.49,-237.853 3523.99,-227.853 3516.99,-227.853"/>
</g>
<!-- TracklistComponent -->
<g id="node52" class="node"><title>TracklistComponent</title>
<polygon fill="#ffffb3" stroke="black" points="4901.59,-198 4770.41,-198 4770.41,-162 4901.59,-162 4901.59,-198"/>
<text text-anchor="middle" x="4836" y="-175.8" font-family="Times,serif" font-size="14.00">TracklistComponent</text>
</g>
<!-- TracklistComponent->TracklistsModule -->
<g id="edge58" class="edge"><title>TracklistComponent->TracklistsModule</title>
<path fill="none" stroke="black" d="M4811.89,-198.056C4811.89,-209.439 4811.89,-222 4811.89,-222 4811.89,-222 3593.51,-222 3593.51,-222 3593.51,-222 3593.51,-227.806 3593.51,-227.806"/>
<polygon fill="black" stroke="black" points="3590.01,-227.806 3593.51,-237.806 3597.01,-227.806 3590.01,-227.806"/>
</g>
<!-- TracklistItemsComponent -->
<g id="node53" class="node"><title>TracklistItemsComponent</title>
<polygon fill="#ffffb3" stroke="black" points="4752.19,-198 4589.81,-198 4589.81,-162 4752.19,-162 4752.19,-198"/>
<text text-anchor="middle" x="4671" y="-175.8" font-family="Times,serif" font-size="14.00">TracklistItemsComponent</text>
</g>
<!-- TracklistItemsComponent->TracklistsModule -->
<g id="edge60" class="edge"><title>TracklistItemsComponent->TracklistsModule</title>
<path fill="none" stroke="black" d="M4636.53,-198.11C4636.53,-207.897 4636.53,-218 4636.53,-218 4636.53,-218 3572.65,-218 3572.65,-218 3572.65,-218 3572.65,-227.89 3572.65,-227.89"/>
<polygon fill="black" stroke="black" points="3569.15,-227.89 3572.65,-237.89 3576.15,-227.89 3569.15,-227.89"/>
</g>
<!-- WaveformComponent -->
<g id="node54" class="node"><title>WaveformComponent</title>
<polygon fill="#ffffb3" stroke="black" points="4571.69,-198 4430.31,-198 4430.31,-162 4571.69,-162 4571.69,-198"/>
<text text-anchor="middle" x="4501" y="-175.8" font-family="Times,serif" font-size="14.00">WaveformComponent</text>
</g>
<!-- WaveformComponent->TracklistsModule -->
<g id="edge61" class="edge"><title>WaveformComponent->TracklistsModule</title>
<path fill="none" stroke="black" d="M4472.49,-198.045C4472.49,-205.749 4472.49,-213 4472.49,-213 4472.49,-213 3541.35,-213 3541.35,-213 3541.35,-213 3541.35,-227.515 3541.35,-227.515"/>
<polygon fill="black" stroke="black" points="3537.85,-227.515 3541.35,-237.515 3544.85,-227.515 3537.85,-227.515"/>
</g>
<!-- WaveformTimelineComponent -->
<g id="node55" class="node"><title>WaveformTimelineComponent</title>
<polygon fill="#ffffb3" stroke="black" points="4412.73,-198 4221.27,-198 4221.27,-162 4412.73,-162 4412.73,-198"/>
<text text-anchor="middle" x="4317" y="-175.8" font-family="Times,serif" font-size="14.00">WaveformTimelineComponent</text>
</g>
<!-- WaveformTimelineComponent->TracklistsModule -->
<g id="edge62" class="edge"><title>WaveformTimelineComponent->TracklistsModule</title>
<path fill="none" stroke="black" d="M4284.24,-198.143C4284.24,-204.461 4284.24,-210 4284.24,-210 4284.24,-210 3530.92,-210 3530.92,-210 3530.92,-210 3530.92,-227.82 3530.92,-227.82"/>
<polygon fill="black" stroke="black" points="3527.42,-227.82 3530.92,-237.82 3534.42,-227.82 3527.42,-227.82"/>
</g>
<!-- TracklistScrollService -->
<g id="node56" class="node"><title>TracklistScrollService</title>
<ellipse fill="#fdb462" stroke="black" cx="4184" cy="-104" rx="97.2606" ry="18"/>
<text text-anchor="middle" x="4184" y="-99.8" font-family="Times,serif" font-size="14.00">TracklistScrollService</text>
</g>
<!-- TracklistScrollService->TracklistComponent -->
<g id="edge59" class="edge"><title>TracklistScrollService->TracklistComponent</title>
<path fill="none" stroke="black" d="M4251.26,-117.385C4251.26,-126.154 4251.26,-136 4251.26,-136 4251.26,-136 4836,-136 4836,-136 4836,-136 4836,-151.849 4836,-151.849"/>
<polygon fill="black" stroke="black" points="4832.5,-151.849 4836,-161.849 4839.5,-151.85 4832.5,-151.849"/>
</g>
<!-- RouterModule -->
<g id="node57" class="node"><title>RouterModule</title>
<polygon fill="#8dd3c7" stroke="black" points="4560.65,-122 4557.65,-126 4536.65,-126 4533.65,-122 4463.35,-122 4463.35,-86 4560.65,-86 4560.65,-122"/>
<text text-anchor="middle" x="4512" y="-99.8" font-family="Times,serif" font-size="14.00">RouterModule</text>
</g>
<!-- RouterModule->TracklistsModule -->
<g id="edge63" class="edge"><title>RouterModule->TracklistsModule</title>
<path fill="none" stroke="black" d="M4560.78,-110C4569.53,-110 4575.93,-110 4575.93,-110 4575.93,-110 4575.93,-215 4575.93,-215 4575.93,-215 3551.78,-215 3551.78,-215 3551.78,-215 3551.78,-227.897 3551.78,-227.897"/>
<polygon fill="black" stroke="black" points="3548.28,-227.897 3551.78,-237.897 3555.28,-227.897 3548.28,-227.897"/>
</g>
<!-- TracklistActions -->
<g id="node59" class="node"><title>TracklistActions</title>
<ellipse fill="#fdb462" stroke="black" cx="4660" cy="-104" rx="75.2944" ry="18"/>
<text text-anchor="middle" x="4660" y="-99.8" font-family="Times,serif" font-size="14.00">TracklistActions</text>
</g>
<!-- TracklistActions->TracklistsModule -->
<g id="edge67" class="edge"><title>TracklistActions->TracklistsModule</title>
<path fill="none" stroke="black" d="M4588.8,-98C4583.56,-98 4580.27,-98 4580.27,-98 4580.27,-98 4580.27,-217 4580.27,-217 4580.27,-217 3562.22,-217 3562.22,-217 3562.22,-217 3562.22,-227.87 3562.22,-227.87"/>
<polygon fill="black" stroke="black" points="3558.72,-227.87 3562.22,-237.87 3565.72,-227.87 3558.72,-227.87"/>
</g>
<!-- TracklistService -->
<g id="node60" class="node"><title>TracklistService</title>
<ellipse fill="#fdb462" stroke="black" cx="4828" cy="-104" rx="74.1297" ry="18"/>
<text text-anchor="middle" x="4828" y="-99.8" font-family="Times,serif" font-size="14.00">TracklistService</text>
</g>
<!-- TracklistService->TracklistsModule -->
<g id="edge68" class="edge"><title>TracklistService->TracklistsModule</title>
<path fill="none" stroke="black" d="M4762.07,-112.342C4762.07,-138.94 4762.07,-220 4762.07,-220 4762.07,-220 3583.08,-220 3583.08,-220 3583.08,-220 3583.08,-227.578 3583.08,-227.578"/>
<polygon fill="black" stroke="black" points="3579.58,-227.578 3583.08,-237.578 3586.58,-227.578 3579.58,-227.578"/>
</g>
<!-- UserCardComponent -->
<g id="node61" class="node"><title>UserCardComponent</title>
<polygon fill="#ffffb3" stroke="black" points="6003.47,-274 5868.53,-274 5868.53,-238 6003.47,-238 6003.47,-274"/>
<text text-anchor="middle" x="5936" y="-251.8" font-family="Times,serif" font-size="14.00">UserCardComponent</text>
</g>
<!-- UserCardComponent->UsersModule -->
<g id="edge69" class="edge"><title>UserCardComponent->UsersModule</title>
<path fill="none" stroke="black" d="M5936,-274.057C5936,-301.866 5936,-352 5936,-352 5936,-352 3682,-352 3682,-352 3682,-352 3682,-351.021 3682,-351.021"/>
<polygon fill="black" stroke="black" points="3685.5,-352.207 3682,-342.207 3678.5,-352.207 3685.5,-352.207"/>
</g>
<!-- UserPageComponent -->
<g id="node62" class="node"><title>UserPageComponent</title>
<polygon fill="#ffffb3" stroke="black" points="5850.47,-274 5715.53,-274 5715.53,-238 5850.47,-238 5850.47,-274"/>
<text text-anchor="middle" x="5783" y="-251.8" font-family="Times,serif" font-size="14.00">UserPageComponent</text>
</g>
<!-- UserPageComponent->UsersModule -->
<g id="edge70" class="edge"><title>UserPageComponent->UsersModule</title>
<path fill="none" stroke="black" d="M5783,-274.246C5783,-288.177 5783,-305 5783,-305 5783,-305 3716.24,-305 3716.24,-305 3716.24,-305 3716.24,-305.082 3716.24,-305.082"/>
<polygon fill="black" stroke="black" points="3712.74,-295.816 3716.24,-305.816 3719.74,-295.817 3712.74,-295.816"/>
</g>
<!-- UserActions -->
<g id="node63" class="node"><title>UserActions</title>
<ellipse fill="#fdb462" stroke="black" cx="5633" cy="-256" rx="59.1064" ry="18"/>
<text text-anchor="middle" x="5633" y="-251.8" font-family="Times,serif" font-size="14.00">UserActions</text>
</g>
<!-- UserActions->UsersModule -->
<g id="edge75" class="edge"><title>UserActions->UsersModule</title>
<path fill="none" stroke="black" d="M5633,-274.037C5633,-287.291 5633,-303 5633,-303 5633,-303 3704.81,-303 3704.81,-303 3704.81,-303 3704.81,-303.292 3704.81,-303.292"/>
<polygon fill="black" stroke="black" points="3701.32,-295.92 3704.81,-305.92 3708.32,-295.92 3701.32,-295.92"/>
</g>
<!-- UserService -->
<g id="node64" class="node"><title>UserService</title>
<ellipse fill="#fdb462" stroke="black" cx="5497" cy="-256" rx="58.4415" ry="18"/>
<text text-anchor="middle" x="5497" y="-251.8" font-family="Times,serif" font-size="14.00">UserService</text>
</g>
<!-- UserService->UsersModule -->
<g id="edge76" class="edge"><title>UserService->UsersModule</title>
<path fill="none" stroke="black" d="M5497,-274.044C5497,-286.563 5497,-301 5497,-301 5497,-301 3693.39,-301 3693.39,-301 3693.39,-301 3693.39,-301.488 3693.39,-301.488"/>
<polygon fill="black" stroke="black" points="3689.89,-295.878 3693.39,-305.878 3696.89,-295.878 3689.89,-295.878"/>
</g>
</g>
</svg>