Internetstiftelsen Styleguide

Podcast: Episode List 

<div class="o-podcast-episodes">
    <ul class="o-podcast-episodes__episode-list u-list-clean">
        <li class="o-podcast-episodes__episode o-podcast-episodes__episode--list row no-gutters">
            <div class="grid-18 grid-sm-auto display-flex justify-content-center u-hide-sm">
                <figure>
                    <img class="o-podcast-episodes__episode__image" src="https://ssl-static.libsyn.com/p/assets/a/9/6/5/a9653e010511f97e/internetpodden-logo.png" alt="Svenskarna och internet 2020">
                </figure>
            </div>
            <div class="grid">
                <div class="o-podcast-episodes__episode__meta">
                    <span class="a-meta">53:04</span><span class="a-meta u-p-x-1">|</span><span class="a-meta">15 december, 2020</span>
                </div>
                <div class="o-podcast-episodes__episode__info">
                    <h2 class="display-flex align-items-center">
                        <button class="o-podcast-episodes__episode__button display-flex u-m-r-1 u-m-l-0 js-play-episode" data-src="https://traffic.libsyn.com/secure/internetpodden/20201215-svenskarna-och-internet-2020.mp3?dest-id&#x3D;1534313" data-title="Svenskarna och internet 2020" data-description="Årets högtidsstund för alla som älskar internetstatistik är här! Vår rapport Svenskarna och internet har utökats inför ett speciellt år med extra frågor kring Coronapandemin. Jannike Tillå, Måns Jonasson och Jenny Andersson från Internetstiftelsen diskuterar insikterna från årets rapport." data-image="https://ssl-static.libsyn.com/p/assets/a/9/6/5/a9653e010511f97e/internetpodden-logo.png" data-duration="53:04" type="button">
                            <svg class="icon o-podcast-episodes__play-icon">
                                <use xlink:href="#icon-play"></use>
                            </svg>
                            <div class="u-visuallyhidden">Spela avsnittet Svenskarna och internet 2020</div>
                        </button>
                        <a class="o-podcast-episodes__episode__link" href="#">Svenskarna och internet 2020</a>
                    </h2>
                    <p>Årets högtidsstund för alla som älskar internetstatistik är här! Vår rapport Svenskarna och internet har utökats inför ett speciellt år med extra frågor kring Coronapandemin. Jannike Tillå, Måns Jonasson och Jenny Andersson från Internetstiftelsen diskuterar insikterna från årets rapport.</p>
                </div>
                <div class="o-podcast-episodes__episode__share">
                    <a class="o-podcast-episodes__episode__download-link" download href="https://traffic.libsyn.com/secure/internetpodden/20201215-svenskarna-och-internet-2020.mp3?dest-id&#x3D;1534313">
                        <svg class="icon o-podcast-episodes__episode__download-icon background-peacock-light">
                            <use xlink:href="#icon-download"></use>
                        </svg>
                        <span>Ladda ner</span>
                    </a>
                    <span class="o-podcast-episodes__episode__share__spacer">|</span>

                    <dl class="o-podcast-episodes__episode__share__list u-list-clean">
                        <dt><strong>Lyssna:</strong></dt>
                        <dd><a href="" class="o-podcast-episodes__episode__listen-link">Spotify</a></dd>
                        <dd><a href="" class="o-podcast-episodes__episode__listen-link">Apple</a></dd>
                        <dd><a href="" class="o-podcast-episodes__episode__listen-link">Libsyn</a></dd>
                    </dl>
                </div>
            </div>
        </li>

        <li class="o-podcast-episodes__episode o-podcast-episodes__episode--list row no-gutters">
            <div class="grid-18 grid-sm-auto display-flex justify-content-center u-hide-sm">
                <figure>
                    <img class="o-podcast-episodes__episode__image" src="https://ssl-static.libsyn.com/p/assets/3/6/a/2/36a281563e8e08b8/Internetpodden_avsnitt5.jpg" alt="Svenskarna och internet 2020">
                </figure>
            </div>
            <div class="grid">
                <div class="o-podcast-episodes__episode__meta">
                    <span class="a-meta">17:12</span><span class="a-meta u-p-x-1">|</span><span class="a-meta">30 december, 2019</span>
                </div>
                <div class="o-podcast-episodes__episode__info">
                    <h2 class="display-flex align-items-center">
                        <button class="o-podcast-episodes__episode__button display-flex u-m-r-1 u-m-l-0 js-play-episode" data-src="https://traffic.libsyn.com/secure/internetpodden/Internetpodden_avsnitt5.mp3?dest-id&#x3D;1534313" data-title="David Rowan på Internetdagarna 2019" data-description="Vi fortsätter våra samtal med huvudtalarna från årets Internetdagarna. I det här avsnittet samtalar Internetstiftelsens Måns Jonasson med David Rowan, tidigare chefredaktör för teknikmagasinet Wired. Rowan höll en hyllad presentation på temat innovationer, och visade upp en del inte fullt så innovativa uppfinningar. Vad är egentligen riktig innovation?" data-image="https://ssl-static.libsyn.com/p/assets/3/6/a/2/36a281563e8e08b8/Internetpodden_avsnitt5.jpg" data-duration="17:12" type="button">
                            <svg class="icon o-podcast-episodes__play-icon">
                                <use xlink:href="#icon-play"></use>
                            </svg>
                            <div class="u-visuallyhidden">Spela avsnittet David Rowan på Internetdagarna 2019</div>
                        </button>
                        <a class="o-podcast-episodes__episode__link" href="#">David Rowan på Internetdagarna 2019</a>
                    </h2>
                    <p>Vi fortsätter våra samtal med huvudtalarna från årets Internetdagarna. I det här avsnittet samtalar Internetstiftelsens Måns Jonasson med David Rowan, tidigare chefredaktör för teknikmagasinet Wired. Rowan höll en hyllad presentation på temat innovationer, och visade upp en del inte fullt så innovativa uppfinningar. Vad är egentligen riktig innovation?</p>
                </div>
                <div class="o-podcast-episodes__episode__share">
                    <a class="o-podcast-episodes__episode__download-link" download href="https://traffic.libsyn.com/secure/internetpodden/Internetpodden_avsnitt5.mp3?dest-id&#x3D;1534313">
                        <svg class="icon o-podcast-episodes__episode__download-icon background-peacock-light">
                            <use xlink:href="#icon-download"></use>
                        </svg>
                        <span>Ladda ner</span>
                    </a>
                    <span class="o-podcast-episodes__episode__share__spacer">|</span>

                    <dl class="o-podcast-episodes__episode__share__list u-list-clean">
                        <dt><strong>Lyssna:</strong></dt>
                        <dd><a href="" class="o-podcast-episodes__episode__listen-link">Spotify</a></dd>
                        <dd><a href="" class="o-podcast-episodes__episode__listen-link">Apple</a></dd>
                        <dd><a href="" class="o-podcast-episodes__episode__listen-link">Libsyn</a></dd>
                    </dl>
                </div>
            </div>
        </li>

        <li class="o-podcast-episodes__episode o-podcast-episodes__episode--list row no-gutters">
            <div class="grid-18 grid-sm-auto display-flex justify-content-center u-hide-sm">
                <figure>
                    <img class="o-podcast-episodes__episode__image" src="https://ssl-static.libsyn.com/p/assets/7/4/b/7/74b768ea833215f0/internetpodden_avsnitt3.jpg" alt="Svenskarna och internet 2020">
                </figure>
            </div>
            <div class="grid">
                <div class="o-podcast-episodes__episode__meta">
                    <span class="a-meta">13:46</span><span class="a-meta u-p-x-1">|</span><span class="a-meta">15 december, 2019</span>
                </div>
                <div class="o-podcast-episodes__episode__info">
                    <h2 class="display-flex align-items-center">
                        <button class="o-podcast-episodes__episode__button display-flex u-m-r-1 u-m-l-0 js-play-episode" data-src="https://traffic.libsyn.com/secure/internetpodden/internetpodden_avsnitt3.mp3?dest-id&#x3D;1534313" data-title="Jenny Radcliffe på Internetdagarna 2019" data-description="Vi fortsätter våra samtal med huvudtalarna från årets Internetdagarna. I det här avsnittet samtalar Internetstiftelsens Isadora Hellegren med Jenny Radcliffe, känd som &quot;The People Hacker&quot;. Hon tar sig in i vilken byggnad som helst genom konsten att förhandla och övertala, och utnyttja säkerhetssystemens svagaste länk; människan." data-image="https://ssl-static.libsyn.com/p/assets/7/4/b/7/74b768ea833215f0/internetpodden_avsnitt3.jpg" data-duration="13:46" type="button">
                            <svg class="icon o-podcast-episodes__play-icon">
                                <use xlink:href="#icon-play"></use>
                            </svg>
                            <div class="u-visuallyhidden">Spela avsnittet Jenny Radcliffe på Internetdagarna 2019</div>
                        </button>
                        <a class="o-podcast-episodes__episode__link" href="#">Jenny Radcliffe på Internetdagarna 2019</a>
                    </h2>
                    <p>Vi fortsätter våra samtal med huvudtalarna från årets Internetdagarna. I det här avsnittet samtalar Internetstiftelsens Isadora Hellegren med Jenny Radcliffe, känd som &quot;The People Hacker&quot;. Hon tar sig in i vilken byggnad som helst genom konsten att förhandla och övertala, och utnyttja säkerhetssystemens svagaste länk; människan.</p>
                </div>
                <div class="o-podcast-episodes__episode__share">
                    <a class="o-podcast-episodes__episode__download-link" download href="https://traffic.libsyn.com/secure/internetpodden/internetpodden_avsnitt3.mp3?dest-id&#x3D;1534313">
                        <svg class="icon o-podcast-episodes__episode__download-icon background-peacock-light">
                            <use xlink:href="#icon-download"></use>
                        </svg>
                        <span>Ladda ner</span>
                    </a>
                    <span class="o-podcast-episodes__episode__share__spacer">|</span>

                    <dl class="o-podcast-episodes__episode__share__list u-list-clean">
                        <dt><strong>Lyssna:</strong></dt>
                        <dd><a href="" class="o-podcast-episodes__episode__listen-link">Spotify</a></dd>
                        <dd><a href="" class="o-podcast-episodes__episode__listen-link">Apple</a></dd>
                        <dd><a href="" class="o-podcast-episodes__episode__listen-link">Libsyn</a></dd>
                    </dl>
                </div>
            </div>
        </li>

    </ul>
</div>
<div id="site" data-namespace="">

    <div class="o-podcast-player o-podcast-player--hidden js-podcast" data-rss="https://internetpodden.libsyn.com/rss">
        <div class="wrapper">
            <div class="row justify-content-between align-items-center">
                <img src="https://ssl-static.libsyn.com/p/assets/a/9/6/5/a9653e010511f97e/internetpodden-logo.png" class="o-podcast-player__player__image js-image" alt="Svenskarna och internet 2020">
                <div class="o-podcast-player__player">
                    <div class="o-podcast-player__player__show-info">
                        <h4 class="o-podcast-player__title color-ruby js-title">Svenskarna och internet 2020</h4>
                        <div class="display-flex align-items-center">
                            <time class="o-podcast-player__playtime js-duration">53:04</time>
                            <span class="o-podcast-player__spacer">-</span>
                            <div class="o-podcast-player__description js-description">Årets högtidsstund för alla som älskar internetstatistik är här! Vår rapport Svenskarna och internet har utökats inför ett speciellt år med extra frågor kring Coronapandemin. Jannike Tillå, Måns Jonasson och Jenny Andersson från Internetstiftelsen diskuterar insikterna från årets rapport.</div>
                        </div>
                    </div>
                    <div class="o-podcast-player__controls">
                        <button type="button" class="o-podcast-player__button js-step-backward" title="Back 15 seconds">
                            <span class="u-visuallyhidden">Back 15 seconds</span>
                            <svg class="icon o-podcast-player__rewind-icon">
                                <use xlink:href="#icon-backward-15"></use>
                            </svg>
                        </button>
                        <button type="button" class="o-podcast-player__button o-podcast-player__button--play js-play-button" title="Play/Pause">
                            <span class="u-visuallyhidden">Play/Pause</span>
                            <svg class="icon o-podcast-player__play-icon js-play-icon">
                                <use xlink:href="#icon-play"></use>
                            </svg>
                            <svg class="icon o-podcast-player__play-icon js-pause-icon is-hidden">
                                <use xlink:href="#icon-pause"></use>
                            </svg>
                        </button>
                        <button type="button" class="o-podcast-player__button js-step-forward" title="Forward 60 seconds">
                            <span class="u-visuallyhidden">Forward 60 seconds</span>
                            <svg class="icon o-podcast-player__rewind-icon">
                                <use xlink:href="#icon-forward-60"></use>
                            </svg>
                        </button>
                        <time class="o-podcast-player__timeleft  js-timeleft">53:04</time>
                        <audio controls id="podcastPlayer" class="u-visuallyhidden" src="https://traffic.libsyn.com/secure/internetpodden/20201215-svenskarna-och-internet-2020.mp3?dest-id&#x3D;1534313"></audio>
                    </div>
                </div>
            </div>
        </div>
        <button class="a-button a-button--standalone-icon a-button--icon o-podcast-player__close js-close-player">
            <span class="a-button__text">Sträng</span>
            <svg class=" icon a-button__icon">
                <use xlink:href="#icon-close"></use>
            </svg>
        </button>
        <div class="o-podcast-player__progressbar">
            <div class="o-podcast-player__progressbar__progress background-ruby js-progress"></div>
        </div>
    </div>
</div>
 
<div class="o-podcast-episodes">
	<ul class="o-podcast-episodes__episode-list u-list-clean">
		{{#each episodes}}
			{{> @podcast--single-episode el="li" modifiers="list"}}
		{{/each}}
	</ul>
</div>
{{> '@podcast--player' hidden=true}}
 
{
  "playlist": false,
  "hidden": false,
  "src": "https://traffic.libsyn.com/secure/internetpodden/20201215-svenskarna-och-internet-2020.mp3?dest-id=1534313",
  "image": true,
  "title": "Svenskarna och internet 2020",
  "description": "Årets högtidsstund för alla som älskar internetstatistik är här! Vår rapport Svenskarna och internet har utökats inför ett speciellt år med extra frågor kring Coronapandemin. Jannike Tillå, Måns Jonasson och Jenny Andersson från Internetstiftelsen diskuterar insikterna från årets rapport.",
  "duration": "53:04",
  "has_modifier": false,
  "is_single_episode": false,
  "date": "15 december, 2020",
  "episodeImage": "https://ssl-static.libsyn.com/p/assets/a/9/6/5/a9653e010511f97e/internetpodden-logo.png",
  "modifiers": [
    "list"
  ],
  "episodes": [
    {
      "title": "Svenskarna och internet 2020",
      "src": "https://traffic.libsyn.com/secure/internetpodden/20201215-svenskarna-och-internet-2020.mp3?dest-id=1534313",
      "episodeImage": "https://ssl-static.libsyn.com/p/assets/a/9/6/5/a9653e010511f97e/internetpodden-logo.png",
      "description": "Årets högtidsstund för alla som älskar internetstatistik är här! Vår rapport Svenskarna och internet har utökats inför ett speciellt år med extra frågor kring Coronapandemin. Jannike Tillå, Måns Jonasson och Jenny Andersson från Internetstiftelsen diskuterar insikterna från årets rapport.",
      "duration": "53:04",
      "date": "15 december, 2020"
    },
    {
      "title": "David Rowan på Internetdagarna 2019",
      "src": "https://traffic.libsyn.com/secure/internetpodden/Internetpodden_avsnitt5.mp3?dest-id=1534313",
      "episodeImage": "https://ssl-static.libsyn.com/p/assets/3/6/a/2/36a281563e8e08b8/Internetpodden_avsnitt5.jpg",
      "description": "Vi fortsätter våra samtal med huvudtalarna från årets Internetdagarna. I det här avsnittet samtalar Internetstiftelsens Måns Jonasson med David Rowan, tidigare chefredaktör för teknikmagasinet Wired. Rowan höll en hyllad presentation på temat innovationer, och visade upp en del inte fullt så innovativa uppfinningar. Vad är egentligen riktig innovation?",
      "duration": "17:12",
      "date": "30 december, 2019"
    },
    {
      "title": "Jenny Radcliffe på Internetdagarna 2019",
      "src": "https://traffic.libsyn.com/secure/internetpodden/internetpodden_avsnitt3.mp3?dest-id=1534313",
      "episodeImage": "https://ssl-static.libsyn.com/p/assets/7/4/b/7/74b768ea833215f0/internetpodden_avsnitt3.jpg",
      "description": "Vi fortsätter våra samtal med huvudtalarna från årets Internetdagarna. I det här avsnittet samtalar Internetstiftelsens Isadora Hellegren med Jenny Radcliffe, känd som \"The People Hacker\". Hon tar sig in i vilken byggnad som helst genom konsten att förhandla och övertala, och utnyttja säkerhetssystemens svagaste länk; människan.",
      "duration": "13:46",
      "date": "15 december, 2019"
    }
  ]
}
  • Content: 
    @charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;
@use '../../vendor/baseline/plumber' as plumber;

@include mixin.organism(podcast-episodes) {

	// Episode
	@include bem.e(episode) {
		justify-content: center;
		margin-right: 0;
		margin-left: 0;
		padding: func.rhythm(2);
		border-radius: var.$border-radius;
		background-color: colors.$color-snow;

		@include breakpoint.bp-up(sm) {
			padding-right: func.rhythm(2);
			padding-left: func.rhythm(2);
		}

		@include breakpoint.bp-up(md) {
			justify-content: flex-start;
		}

		@include breakpoint.bp-up(md) {
			padding: func.rhythm(3);
		}

		@include bem.m(list) {
			margin-bottom: func.rhythm(2);

			@include bem.e(image) {
				display: none;

				@include breakpoint.bp-up(md) {
					display: block;
					width: func.to_rem(170px);
					height: func.to_rem(170px);
				}
			}
		}

		@include bem.m(hero) {
			padding-right: 0;
			padding-left: 0;
			border-radius: 0;
			background-color: transparent;

			@include breakpoint.bp-up(md) {
				flex-direction: row-reverse;
				align-items: center;
			}

			@include bem.e(image) {
				width: func.to_rem(310px);
				height: func.to_rem(310px);
				margin-right: 0;
				margin-left: func.rhythm(4);
			}

			@include bem.e(info) {
				> p {
					overflow: visible;
					text-overflow: inherit;
					white-space: normal;
				}
			}

			@include bem.e(link) {
				pointer-events: none;
			}
		}

		@include bem.e(image) {
			margin-bottom: func.rhythm(2);
			border-radius: var.$border-radius;

			@include breakpoint.bp-down(sm) {
				display: none;
			}

			@include breakpoint.bp-up(sm) {
				display: block;
				width: func.to_rem(255px);
				height: func.to_rem(255px);
				margin-right: func.rhythm(3);
			}
		}

		@include bem.e(meta) {
			display: flex;
			margin-bottom: func.rhythm(1);
		}

		@include bem.e(info) {
			h1 span {
				pointer-events: none;
			}

			h1 svg {
				width: var.$icon-size-large * 1.5;
				height: var.$icon-size-large * 1.5;
			}

			h2 svg {
				width: var.$icon-size-large * 1.2;
				height: var.$icon-size-large * 1.2;
			}

			> p {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;

				@include breakpoint.bp-up(sm-xs) {
					overflow: visible;
					text-overflow: inherit;
					white-space: normal;
				}
			}
		}

		@include bem.e(link) {
			color: colors.$color-cyberspace;
			text-decoration: none;

			&:hover,
			&:focus {
				text-decoration: underline;
			}
		}

		@include bem.e(button) {
			display: flex;
			align-items: center;
			margin: 0 func.rhythm(1);
			padding: 0;
			border: 0;
			background-color: transparent;

			&:hover {
				> svg {
					fill: colors.$color-ruby;
				}
			}

			* {
				pointer-events: none;
			}
		}

		@include bem.e(share) {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			margin-top: func.rhythm(1);

			@include bem.e(spacer) {
				display: none;
				margin-bottom: func.rhythm(2);

				@include breakpoint.bp-up(lg) {
					display: block;
					margin-right: func.rhythm(2);
					margin-bottom: 0;
					margin-left: func.rhythm(2);
					line-height: 1;
				}
			}

			@include bem.e(list) {
				display: flex;
				flex-basis: 100%;

				> dt {
					margin-right: func.rhythm(2);
				}

				> dd {
					margin-left: 0;
				}

				@include breakpoint.bp-up(lg) {
					flex-basis: auto;
				}
			}
		}

		@include bem.e(listen-link) {
			margin-right: func.rhythm(2);
			color: colors.$color-cyberspace;
		}

		@include bem.e(download-link) {
			display: flex;
			flex-basis: 100%;
			flex-grow: 1;
			margin-bottom: func.rhythm(2);
			color: colors.$color-cyberspace;

			> span {
				font-family: var.$font-family-base;
				font-size: var.$size-base;
				text-decoration: underline;
			}

			> svg {
				transform: translateY(3px);
			}

			@include breakpoint.bp-up(lg) {
				margin-bottom: 0;
			}

			@include breakpoint.bp-up(md) {
				flex-basis: auto;
				flex-grow: 0;
			}
		}

		@include bem.e(download-icon) {
			width: var.$icon-size;
			height: var.$icon-size;
			margin-right: func.rhythm(1);
			padding: 3px;
			border-radius: var.$border-radius;
		}
	}
}

// Track list (Prototype)
@include mixin.organism(podcast-track-list) {
	display: flex;
	flex-direction: column;

	> li {
		display: flex;
		padding: func.rhythm(1) func.rhythm(2);

		+ li {
			border-top: 1px solid colors.$color-concrete;
		}

		> button {
			display: flex;
			align-items: center;
		}
	}
}
  • URL: /components/raw/podcast/_podcast-episodes.scss
  • Filesystem Path: src/organisms/podcast/_podcast-episodes.scss
  • Size: 4.8 KB
  • Content: 
    @charset "UTF-8";
@use "sass:color";
@use "sass:math";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/config' as config;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../configurations/colors/colors-functions' as colorFunc;
@use '../../vendor/grid/breakpoints' as breakpoint;
@use '../../vendor/grid/grid' as grid;
@use '../../vendor/baseline/plumber' as plumber;

@include mixin.organism(podcast-player) {

	/* Player */

	$time-left-width: func.to_rem(65px);

	position: fixed;
	z-index: func.z_index(middlegroundImportant);
	right: 0;
	bottom: 0;
	left: 0;
	padding: func.rhythm(1) 0 0 0;
	transform: translateY(0);
	transition: transform 0.25s ease-out;
	background-color: colors.$color-snow;
	box-shadow: 0 -#{func.rhythm(1)} func.rhythm(3) color.adjust(colors.$color-cyberspace, $lightness: 70%);

	@include bem.m(hidden) {
		transform: translateY(100%);
		box-shadow: none;
	}

	@include bem.e(player) {
		display: flex;
		flex-grow: 1;
		align-items: center;

		@include bem.e(show-info) {
			display: none;

			@include breakpoint.bp-up(sm) {
				display: block;
			}
		}

		@include bem.e(image) {
			display: none;

			@include breakpoint.bp-up(md) {
				display: flex;
				flex-grow: 0;
				width: func.rhythm(7);
				height: func.rhythm(7);
				margin-right: func.rhythm(2);
				border-radius: var.$border-radius;
			}
		}
	}

	@include bem.e(show-info) {
		display: flex;
		flex-direction: column;
	}

	@include bem.e(title) {
		margin-bottom: 0;
		color: colors.$color-ruby;
		font-family: var.$font-family-headings;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: func.to_rem(200px);

		@include breakpoint.bp-up(sm) {
			max-width: func.to_rem(250px);
		}

		@include breakpoint.bp-up(lg) {
			max-width: func.to_rem(500px);
		}
	}

	@include bem.e(description) {
		display: block;
		max-width: func.to_rem(200px);
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;

		> p {
			display: none;
		}

		@include breakpoint.bp-up(sm) {
			max-width: func.to_rem(250px);
		}

		@include breakpoint.bp-up(lg) {
			max-width: func.to_rem(500px);
		}
	}

	@include bem.e(playtime) {
		@include breakpoint.bp-between(sm, md) {
			display: none;
		}
	}

	@include bem.e(spacer) {
		@include breakpoint.bp-between(sm, md) {
			display: none;
		}
	}

	@include bem.e(controls) {
		display: flex;
		flex-grow: 1;
		align-items: center;
		justify-content: center;
	}

	@include bem.e(spacer) {
		margin-right: func.rhythm(0.5);
		margin-left: func.rhythm(0.5);
	}

	@include bem.e(button) {
		display: flex;
		align-items: center;
		margin: 0 func.rhythm(1);
		padding: 0;
		border: 0;
		background-color: transparent;

		&:hover {
			> svg {
				fill: colors.$color-ruby;
			}
		}
	}

	@include bem.e(timeleft) {
		min-width: $time-left-width;
	}

	@include bem.e(rewind-icon) {
		width: var.$icon-size-large * 1.2;
		height: var.$icon-size-large * 1.2;
	}

	@include bem.e(forward-icon) {
		width: var.$icon-size-large * 1.2;
		height: var.$icon-size-large * 1.2;
	}

	@include bem.e(play-icon) {
		display: block;
		width: var.$icon-size-large * 1.5;
		height: var.$icon-size-large * 1.5;
	}

	@include bem.e(progressbar) {
		flex-wrap: wrap;
		width: 100%;
		height: func.rhythm(0.5);
		margin-top: func.rhythm(1);
		background-color: colors.$color-concrete;

		@include bem.e(progress) {
			width: 0;
			height: func.rhythm(1);
		}
	}

	@include bem.e(close) {
		position: absolute;
		right: func.rhythm(0.5);
		top: 50%;
		transform: translateY(-50%);

		@include breakpoint.bp-up(xxl) {
			right: func.rhythm(2);
		}
	}
}
  • URL: /components/raw/podcast/_podcast-player.scss
  • Filesystem Path: src/organisms/podcast/_podcast-player.scss
  • Size: 3.8 KB
  • Content: 
    let namespace;
const namespaceElement = document.querySelector('#site');
const podCast = document.querySelector('.js-podcast');
const audio = document.getElementById('podcastPlayer');
const jsTrackList = document.querySelector('.js-track-list');
const title = document.querySelector('.js-title');
const description = document.querySelector('.js-description');
const image = document.querySelector('.js-image');
const progress = document.querySelector('.js-progress');
const durationElement = document.querySelector('.js-duration');
const timeleftElement = document.querySelector('.js-timeleft');
const stepForward = document.querySelector('.js-step-forward');
const stepBackward = document.querySelector('.js-step-backward');
const playButton = document.querySelector('.js-play-button');
const playIcon = document.querySelector('.js-play-icon');
const pauseIcon = document.querySelector('.js-pause-icon');
const closeButton = document.querySelector('.js-close-player');
let rssURL = '';

if (podCast) {
	rssURL = podCast.dataset.rss;
}

if (!namespaceElement) {
	namespace = '';
} else {
	namespace = namespaceElement.dataset.namespace;
}

function timeupdate() {
	audio.addEventListener('timeupdate', () => {
		const duration = parseInt(audio.duration, 10);
		const currentTime = parseInt(audio.currentTime, 10);
		const timeLeft = duration - currentTime;
		let s; let
			m;

		s = timeLeft % 60;
		m = Math.floor(timeLeft / 60) % 60;

		s = s < 10 ? `0${s}` : s;
		m = m < 10 ? `0${m}` : m;

		if (timeLeft > 0) {
			timeleftElement.classList.remove('u-visibility-hidden');
			timeleftElement.innerHTML = `${m}:${s}`;
		}
	}, false);
}

let html = '';

function getItems(el) {
	html += `
	<li>
		<button
			class="${namespace}o-podcast-player__button display-flex js-play-episode"
			data-src="${el.querySelector('enclosure').getAttribute('url')}"
			data-title="${el.querySelector('title').innerHTML}"
			data-description="${el.querySelector('description').innerHTML.replace(/(<([^>]+)>)/gi, '').replace('<![CDATA[', '').replace(']]>', '')}"
			data-image="${el.querySelector('image').getAttribute('href')}"
			data-duration="${el.querySelector('duration').innerHTML}"
			type="button"><svg class="icon ${namespace}o-podcast-player__play-icon u-m-r-2"><use xlink:href="#icon-play"></use></svg></div><div class="u-visuallyhidden">Spela avsnittet ${el.querySelector('title').innerHTML}</div></button>
		<div class="${namespace}o-podcast-player__show-info">
			<div class="${namespace}o-podcast-player__title">${el.querySelector('title').innerHTML}</div>
			<div class="${namespace}o-podcast-player__description js-description">${el.querySelector('description').innerHTML}</div>
		</div>
	</li>
`;

	if (jsTrackList) {
		jsTrackList.innerHTML = html;
	}
}

if (rssURL) {
	fetch(rssURL)
		.then((response) => response.text())
		.then((str) => new window.DOMParser().parseFromString(str, 'text/xml'))
		.then((data) => {
			const items = data.querySelectorAll('item');

			items.forEach(getItems);
		});
}

function playEpisode(playBtn) {
	audio.src = playBtn.dataset.src;
	durationElement.innerHTML = playBtn.dataset.duration;
	title.innerHTML = playBtn.dataset.title;
	description.innerHTML = playBtn.dataset.description;
	image.src = playBtn.dataset.image;
	podCast.classList.remove(`${namespace}o-podcast-player--hidden`);
	timeleftElement.classList.add('u-visibility-hidden');

	if (audio.play) {
		audio.pause();
		pauseIcon.classList.remove('is-hidden');
		playIcon.classList.add('is-hidden');

		audio.currentTime = 0;
	}

	audio.play();
	timeupdate();

	setTimeout(() => {
		timeleftElement.classList.remove('u-visibility-hidden');
	}, 1000);
}

document.body.addEventListener('click', (e) => {
	const playBtn = e.target.closest('.js-play-episode');
	if (playBtn) {
		e.preventDefault();

		// Clear old episodedata
		audio.currentTime = 0;
		timeupdate();
		audio.pause();
		sessionStorage.removeItem('episodeData');

		// Play new episode
		playEpisode(playBtn);
	}
});

if (playButton) {
	playButton.addEventListener('click', () => {
		if (audio.paused) {
			audio.muted = false;
			audio.play();
			pauseIcon.classList.remove('is-hidden');
			playIcon.classList.add('is-hidden');
			timeleftElement.classList.add('u-visibility-hidden');
			timeupdate();
			timeleftElement.classList.remove('u-visibility-hidden');
		} else {
			audio.pause();
			pauseIcon.classList.add('is-hidden');
			playIcon.classList.remove('is-hidden');
		}
	});
}

if (audio) {
	audio.onended = () => {
		pauseIcon.classList.add('is-hidden');
		playIcon.classList.remove('is-hidden');
		timeleftElement.classList.add('u-visibility-hidden');
	};

	audio.ontimeupdate = () => {
		const timer = `${(audio.currentTime / audio.duration) * 100}%`;
		progress.style.width = timer;
	};
}

if (stepForward) {
	stepForward.addEventListener('click', () => {
		audio.currentTime += 60;
		timeupdate();
	});
}

if (stepBackward) {
	stepBackward.addEventListener('click', () => {
		audio.currentTime -= 15;
		timeupdate();
	});
}

function saveState() {
	const podcastData = {
		podCastTitle: title.innerHTML,
		episodeDescription: description.innerHTML,
		episodeSrc: audio.src,
		episodeCurrentTime: audio.currentTime,
		episodeDuration: durationElement.innerHTML,
		episodeImage: image.src,
	};

	sessionStorage.setItem('episodeData', JSON.stringify(podcastData));

	if (!audio.paused) {
		let existing = sessionStorage.getItem('episodeData');
		existing = existing ? JSON.parse(existing) : {};
		existing.podcastWasPlaying = true;
		sessionStorage.setItem('episodeData', JSON.stringify(existing));
	} else {
		let existing = sessionStorage.getItem('episodeData');
		existing = existing ? JSON.parse(existing) : {};
		existing.podcastWasPlaying = false;
		sessionStorage.setItem('episodeData', JSON.stringify(existing));
	}
}

// Handle continous play when user leaves the page
if (podCast) {
	window.addEventListener('visibilitychange', saveState);
	window.addEventListener('beforeunload', saveState);
}

if (sessionStorage.getItem('episodeData') && podCast) {
	const arr = JSON.parse(sessionStorage.getItem('episodeData'));

	if (arr.episodeCurrentTime) {
		podCast.classList.remove(`${namespace}o-podcast-player--hidden`);
		audio.src = arr.episodeSrc;
		image.src = arr.episodeImage;
		title.innerHTML = arr.podCastTitle;
		description.innerHTML = arr.episodeDescription;
		durationElement.innerHTML = arr.episodeDuration;

		if (arr.podcastWasPlaying === true) {
			const playPromise = audio.play();

			if (playPromise !== undefined) {
				playPromise.then(() => {
					// Continue playing audio on reload
					audio.currentTime = arr.episodeCurrentTime;
					timeupdate();
					audio.play();
					pauseIcon.classList.remove('is-hidden');
					playIcon.classList.add('is-hidden');
				}).catch(() => {
					// User reloaded page manually. Cannot play audio
					audio.addEventListener('loadedmetadata', () => {
						audio.currentTime = arr.episodeCurrentTime;
						timeupdate();
					});

					pauseIcon.classList.add('is-hidden');
					playIcon.classList.remove('is-hidden');
					audio.pause();
				});
			}
		} else {
			audio.addEventListener('loadedmetadata', () => {
				audio.currentTime = arr.episodeCurrentTime;
				timeupdate();
			});
			pauseIcon.classList.add('is-hidden');
			playIcon.classList.remove('is-hidden');
			audio.pause();
		}
	}
}

if (closeButton) {
	closeButton.addEventListener('click', () => {
		audio.currentTime = 0;
		timeupdate();
		audio.pause();
		sessionStorage.removeItem('episodeData');
		podCast.classList.add(`${namespace}o-podcast-player--hidden`);
	});
}
  • URL: /components/raw/podcast/podcast.js
  • Filesystem Path: src/organisms/podcast/podcast.js
  • Size: 7.6 KB

No notes defined.