@saooti/octopus-sdk 42.1.0 → 42.1.2

package/dist/SmartLinkPage-Dd0BLsjZ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartLinkPage-Dd0BLsjZ.mjs","names":[],"sources":["../src/components/pages/SmartLinkPage.vue","../src/components/pages/SmartLinkPage.vue"],"sourcesContent":["<template>\n    <div v-if=\"element\" class=\"background\">\n        <img :src=\"useProxyImageUrl(element.imageUrl, '1600')\">\n    </div>\n    <article v-if=\"element\">\n        <!-- Top part of smartlink, with image, title and description -->\n        <div class=\"content\">\n            <div class=\"left\">\n                <img\n                    v-lazy=\"useProxyImageUrl(element.imageUrl, '250')\"\n                    width=\"250\"\n                    height=\"250\"\n                    class=\"img-box\"\n                    aria-hidden=\"true\"\n                    alt=\"\"\n                >\n                <!-- Play button when not viewing with phone -->\n                <button\n                    v-if=\"latestPodcast\"\n                    class=\"btn btn-primary play-button pe-3 hide-phone\"\n                    @click=\"playLatestPodcast\"\n                >\n                    <PlayIcon class=\"me-2\" />\n                    {{ $t('SmartLink - Listen to latest episode') }}\n                </button>\n            </div>\n            <h1>{{ title }}</h1>\n            <div v-html=\"description\" />\n\n            <!-- Play button when viewing with phone -->\n            <button\n                v-if=\"latestPodcast\"\n                class=\"btn btn-primary play-button pe-3 mt-4 show-phone-flex\"\n                @click=\"playLatestPodcast\"\n            >\n                <PlayIcon class=\"me-2\" />\n                {{ $t('SmartLink - Listen to latest episode') }}\n            </button>\n        </div>\n\n        <!-- Links -->\n        <div class=\"platforms\">\n            <div\n                v-for=\"platform in sharePlatforms\"\n                :key=\"platform.name\"\n                class=\"platform-btn\"\n            >\n                <button\n                    class=\"btn w-100\"\n                    :style=\"gradient(platform)\"\n                    @click=\"openLink(platform.url)\"\n                >\n                    <!-- Icon of platform -->\n                    <component\n                        :is=\"platform.icon\"\n                        :size=\"36\"\n                        :fill-color=\"platform.color\"\n                        class=\"me-2\"\n                    />\n\n                    <span class=\"platform-label\">{{ platform.title }}</span>\n                </button>\n            </div>\n        </div>\n\n        <!-- Footer -->\n        <div class=\"footer\">\n            <a target=\"_blank\" href=\"/\">\n                <span>{{ $t('SmartLink - Made by') }}</span>\n                <img\n                    src=\"/img/logo_saooti_play_black.svg\"\n                    height=\"24\"\n                    class=\"ms-2\"\n                >\n            </a>\n            <a\n                v-if=\"podcastmakerElementUrl\"\n                target=\"_blank\"\n                :href=\"podcastmakerElementUrl\"\n            >\n                <span v-if=\"playlistId\">{{ $t('SmartLink - To playlist on podcastmaker', { organisation: organisation.name }) }}</span>\n                <span v-else-if=\"emissionId\">{{ $t('SmartLink - To emission on podcastmaker', { organisation: organisation.name }) }}</span>\n            </a>\n        </div>\n    </article>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue';\nimport { useSeoTitleUrl } from '../composable/route/useSeoTitleUrl';\n\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\n\nimport { Emission } from '../../stores/class/general/emission';\nimport { Playlist } from '../../stores/class/general/playlist';\nimport { playlistApi } from '../../api/playlistApi';\nimport { emissionApi } from '../../api/emissionApi';\nimport { useImageProxy } from '../composable/useImageProxy';\nimport { SharePlatform, useSharePlatforms } from '../composable/share/useSharePlatforms';\nimport { Organisation, OrganisationAttributes } from '../../stores/class/general/organisation';\nimport { organisationApi } from '../../api/organisationApi';\nimport { Podcast } from '@/stores/class/general/podcast';\nimport { usePlayerStore } from '../../stores/PlayerStore';\nimport { podcastApi, PodcastSort } from '../../api/podcastApi';\nimport { useSharePath } from '../composable/share/useSharePath';\nimport displayHelper from '../../helper/displayHelper';\nimport { state } from '../../stores/ParamSdkStore';\n\nconst { updatePathParams } = useSeoTitleUrl();\nconst { useProxyImageUrl } = useImageProxy();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\n\n/** Props used when displaying a playlist */\ninterface PlaylistProps {\n    /** ID of the playlist to display */\n    playlistId: number;\n    /** Disallow use of emission id */\n    emissionId?: never;\n}\n\n/** Props used when displaying an emission */\ninterface EmissionProps {\n    /** Disallow use of playlist id */\n    playlistId?: never;\n    /** ID of the emission to display */\n    emissionId: number;\n}\n\nconst { playlistId, emissionId } = defineProps<PlaylistProps|EmissionProps>();\n\n/** The currently displayed element, if any */\nconst element = ref<Playlist|Emission|null>(null);\n\nonMounted(async() => {\n    // Retrieve element\n    if (playlistId) {\n        element.value = await playlistApi.get(playlistId);\n        initPlatforms(element.value.organisation.id);\n    } else if (emissionId) {\n        element.value = await emissionApi.get(emissionId);\n        initPlatforms(element.value.orga.id);\n    } else {\n        console.error('No content defined');\n    }\n\n    // Update title & path\n    updatePathParams(title.value);\n\n    getOrganisationAttributes();\n    getLatestPodcast();\n});\n\n/** Title of the element displayed */\nconst title = computed((): string => {\n    if (playlistId) {\n        return (element.value as Playlist).title;\n    }\n    if (emissionId) {\n        return (element.value as Emission).name;\n    }\n    return '';\n});\n\n/** Description of the element displayed */\nconst description = computed((): string => {\n    let description = element.value.description;\n    if (state.smartLink.showOnlyFirstParagraphInDescription === true) {\n        // Find everything up to the end of the first paragraph, including newlines\n        const pattern = /^(.+?(?:\\n+.*?)*<\\/p>)/;\n        const matches = description.match(pattern);\n        if (matches && matches.length >= 2) {\n            description = matches[1];\n        }\n    }\n\n    return displayHelper.urlify(description);\n});\n\n/** The organisation associated with the element */\nconst organisation = computed((): Organisation|undefined => {\n    if (!element.value) {\n        return;\n    }\n\n    if (playlistId) {\n        return (element.value as Playlist).organisation;\n    } else if (emissionId) {\n        return (element.value as Emission).orga;\n    }\n    return undefined;\n});\n\n/** The URL to the podcastmaker of the organisation, if any */\nconst organisationAttributes = ref<OrganisationAttributes|null>(null);\nconst { getSharePath } = useSharePath();\n\nasync function getOrganisationAttributes(): Promise<void> {\n    if (organisation.value) {\n        organisationAttributes.value = await organisationApi.getAttributes(organisation.value.id);\n    }\n}\n\n/** The URL to the element on the podcastmaker, or original platform, if any */\nconst podcastmakerElementUrl = computed((): string|undefined => {\n    // Retrieve full URL of element\n    if (playlistId) {\n        return getSharePath({ name: 'playlist', params: { playlistId }}, organisationAttributes.value);\n    } else if (emissionId) {\n        return getSharePath({ name: 'emission', params: { emissionId }}, organisationAttributes.value);\n    }\n    return undefined;\n});\n\n/**\n * The available share platforms for the element\n */\nconst sharePlatforms = computed(() => {\n    if (!element.value) {\n        return [];\n    }\n    return getPlatformsWithLinks(element.value.annotations);\n});\n\nfunction gradient(platform: SharePlatform): Record<string, string> {\n    return {\n        '--gradient-color': platform.color\n    };\n}\n\nfunction openLink(link: string): void {\n    window.open(link, '_blank').focus();\n}\n\nconst playerStore = usePlayerStore();\nconst latestPodcast = ref<Podcast|null>(null);\n\nasync function getLatestPodcast(): Promise<void> {\n    if (playlistId) {\n        const content = await playlistApi.getContent(playlistId);\n        if (content.length > 0) {\n            const id = content[content.length - 1].podcastId;\n            latestPodcast.value = await podcastApi.get(id);\n        }\n    } else if (emissionId) {\n        const result = await podcastApi.searchFull({\n            emissionId,\n            sort: PodcastSort.DATE,\n            size: 1\n        });\n\n        if (result.count > 0) {\n            latestPodcast.value = result.result[0];\n        }\n    }\n}\n\nfunction playLatestPodcast(): void {\n    if (!latestPodcast.value) {\n        return;\n    }\n\n    playerStore.playerPlay(latestPodcast.value);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.background {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    // Do not take place in page\n    position: fixed;\n    // Make rest of page appear in front of image\n    z-index: -1;\n\n    img {\n        width: 100%;\n        height: 100%;\n        // Background image display\n        object-fit: cover;\n        // Blur image\n        filter: blur(40px) sepia(0.4);\n        transform: scale(1.1);\n\n        @media (width <= 960px) {\n            // Better display for small screens\n            filter: blur(15px);\n        }\n    }\n}\n\narticle {\n    // Set variables\n    --background: white;\n    --border-radius: 20px;\n\n    margin: 8rem auto 2rem;\n    padding: 20px;\n    width: 900px;\n    border-radius: var(--border-radius);\n\n    // Background for card\n    background: var(--background);\n    // Subtle border\n    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);\n\n    @media (width <= 960px) {\n        // Adapt card for small screens\n        margin-top: 5rem;\n        width: 100%;\n    }\n\n    .play-button {\n        width: 250px;\n\n        @media (width <= 960px) {\n            // Center button\n            margin-right: auto !important;\n            margin-left: auto !important;\n        }\n\n        &::before {\n            // Remove additional content\n            display: none;\n        }\n    }\n\n    .left {\n        // Align left\n        float: left;\n\n        @media (width <= 960px) {\n            // On small screens, center content\n            margin: 0 auto;\n            float: none;\n        }\n    }\n\n    .img-box {\n        // Move image\n        margin-top: -70px;\n        margin-bottom: 0px;\n\n        // Move image left with content going to its right, and below it\n        margin-right: 20px;\n\n        // Add a border\n        border: 2px solid var(--background);\n        border-radius: var(--border-radius);\n\n        @media (width <= 960px) {\n            margin: -70px auto 10px;\n        }\n    }\n\n    // Section for title & description of content\n    .content {\n        margin-left: 20px;\n\n        @media (width <= 960px) {\n            margin-left: 0;\n        }\n\n        h1 {\n            text-align: start !important;\n            font-size: var(--octopus-smartlink-title-fontsize);\n            color: var(--octopus-smartlink-title-color);\n\n            @media (width <= 960px) {\n                text-align: center !important;\n            }\n        }\n    }\n\n    // Section for displaying platforms\n    .platforms {\n        // Allow display on columns\n        display: flex;\n        flex-wrap: wrap;\n        margin-top: 50px;\n\n        @media (width <= 960px) {\n            // Lower top margin when on mobile\n            margin-top: 20px;\n        }\n\n        .platform-btn {\n            display: flex;\n            padding: 4px 8px;\n            // Display on two columns\n            flex-basis: 50%;\n            // Center elements when possible\n            margin: auto;\n\n            @media (width <= 960px) {\n                // On small screens, buttons take full width\n                flex-basis: 100%;\n            }\n        }\n\n        .btn {\n            display: flex;\n            height: 52px;\n            // Center content vertically\n            align-items: center;\n            padding-left: 40px;\n            background: linear-gradient(155deg, var(--octopus-secondary) 30%, oklch(from var(--gradient-color) l c h / 40%));\n            .platform-label {\n                margin-left: 30px;\n            }\n\n            &:hover {\n                background: linear-gradient(155deg, var(--octopus-secondary) 30%, oklch(from var(--gradient-color) l c h / 100%));\n            }\n\n        }\n    }\n}\n\n.footer {\n    cursor: pointer;\n    margin: 34px auto 0;\n    font-size: 14px;\n    display: flex;\n    justify-content: space-between;\n\n    @media (width <= 960px) {\n        flex-direction: column-reverse;\n        align-items: center;\n    }\n\n    a {\n        display: flex;\n        align-items: center;\n        color: var(--octopus-color-text);\n\n        &:hover {\n            color: var(--octopus-primary);\n        }\n    }\n}\n</style>\n","<template>\n    <div v-if=\"element\" class=\"background\">\n        <img :src=\"useProxyImageUrl(element.imageUrl, '1600')\">\n    </div>\n    <article v-if=\"element\">\n        <!-- Top part of smartlink, with image, title and description -->\n        <div class=\"content\">\n            <div class=\"left\">\n                <img\n                    v-lazy=\"useProxyImageUrl(element.imageUrl, '250')\"\n                    width=\"250\"\n                    height=\"250\"\n                    class=\"img-box\"\n                    aria-hidden=\"true\"\n                    alt=\"\"\n                >\n                <!-- Play button when not viewing with phone -->\n                <button\n                    v-if=\"latestPodcast\"\n                    class=\"btn btn-primary play-button pe-3 hide-phone\"\n                    @click=\"playLatestPodcast\"\n                >\n                    <PlayIcon class=\"me-2\" />\n                    {{ $t('SmartLink - Listen to latest episode') }}\n                </button>\n            </div>\n            <h1>{{ title }}</h1>\n            <div v-html=\"description\" />\n\n            <!-- Play button when viewing with phone -->\n            <button\n                v-if=\"latestPodcast\"\n                class=\"btn btn-primary play-button pe-3 mt-4 show-phone-flex\"\n                @click=\"playLatestPodcast\"\n            >\n                <PlayIcon class=\"me-2\" />\n                {{ $t('SmartLink - Listen to latest episode') }}\n            </button>\n        </div>\n\n        <!-- Links -->\n        <div class=\"platforms\">\n            <div\n                v-for=\"platform in sharePlatforms\"\n                :key=\"platform.name\"\n                class=\"platform-btn\"\n            >\n                <button\n                    class=\"btn w-100\"\n                    :style=\"gradient(platform)\"\n                    @click=\"openLink(platform.url)\"\n                >\n                    <!-- Icon of platform -->\n                    <component\n                        :is=\"platform.icon\"\n                        :size=\"36\"\n                        :fill-color=\"platform.color\"\n                        class=\"me-2\"\n                    />\n\n                    <span class=\"platform-label\">{{ platform.title }}</span>\n                </button>\n            </div>\n        </div>\n\n        <!-- Footer -->\n        <div class=\"footer\">\n            <a target=\"_blank\" href=\"/\">\n                <span>{{ $t('SmartLink - Made by') }}</span>\n                <img\n                    src=\"/img/logo_saooti_play_black.svg\"\n                    height=\"24\"\n                    class=\"ms-2\"\n                >\n            </a>\n            <a\n                v-if=\"podcastmakerElementUrl\"\n                target=\"_blank\"\n                :href=\"podcastmakerElementUrl\"\n            >\n                <span v-if=\"playlistId\">{{ $t('SmartLink - To playlist on podcastmaker', { organisation: organisation.name }) }}</span>\n                <span v-else-if=\"emissionId\">{{ $t('SmartLink - To emission on podcastmaker', { organisation: organisation.name }) }}</span>\n            </a>\n        </div>\n    </article>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue';\nimport { useSeoTitleUrl } from '../composable/route/useSeoTitleUrl';\n\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\n\nimport { Emission } from '../../stores/class/general/emission';\nimport { Playlist } from '../../stores/class/general/playlist';\nimport { playlistApi } from '../../api/playlistApi';\nimport { emissionApi } from '../../api/emissionApi';\nimport { useImageProxy } from '../composable/useImageProxy';\nimport { SharePlatform, useSharePlatforms } from '../composable/share/useSharePlatforms';\nimport { Organisation, OrganisationAttributes } from '../../stores/class/general/organisation';\nimport { organisationApi } from '../../api/organisationApi';\nimport { Podcast } from '@/stores/class/general/podcast';\nimport { usePlayerStore } from '../../stores/PlayerStore';\nimport { podcastApi, PodcastSort } from '../../api/podcastApi';\nimport { useSharePath } from '../composable/share/useSharePath';\nimport displayHelper from '../../helper/displayHelper';\nimport { state } from '../../stores/ParamSdkStore';\n\nconst { updatePathParams } = useSeoTitleUrl();\nconst { useProxyImageUrl } = useImageProxy();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\n\n/** Props used when displaying a playlist */\ninterface PlaylistProps {\n    /** ID of the playlist to display */\n    playlistId: number;\n    /** Disallow use of emission id */\n    emissionId?: never;\n}\n\n/** Props used when displaying an emission */\ninterface EmissionProps {\n    /** Disallow use of playlist id */\n    playlistId?: never;\n    /** ID of the emission to display */\n    emissionId: number;\n}\n\nconst { playlistId, emissionId } = defineProps<PlaylistProps|EmissionProps>();\n\n/** The currently displayed element, if any */\nconst element = ref<Playlist|Emission|null>(null);\n\nonMounted(async() => {\n    // Retrieve element\n    if (playlistId) {\n        element.value = await playlistApi.get(playlistId);\n        initPlatforms(element.value.organisation.id);\n    } else if (emissionId) {\n        element.value = await emissionApi.get(emissionId);\n        initPlatforms(element.value.orga.id);\n    } else {\n        console.error('No content defined');\n    }\n\n    // Update title & path\n    updatePathParams(title.value);\n\n    getOrganisationAttributes();\n    getLatestPodcast();\n});\n\n/** Title of the element displayed */\nconst title = computed((): string => {\n    if (playlistId) {\n        return (element.value as Playlist).title;\n    }\n    if (emissionId) {\n        return (element.value as Emission).name;\n    }\n    return '';\n});\n\n/** Description of the element displayed */\nconst description = computed((): string => {\n    let description = element.value.description;\n    if (state.smartLink.showOnlyFirstParagraphInDescription === true) {\n        // Find everything up to the end of the first paragraph, including newlines\n        const pattern = /^(.+?(?:\\n+.*?)*<\\/p>)/;\n        const matches = description.match(pattern);\n        if (matches && matches.length >= 2) {\n            description = matches[1];\n        }\n    }\n\n    return displayHelper.urlify(description);\n});\n\n/** The organisation associated with the element */\nconst organisation = computed((): Organisation|undefined => {\n    if (!element.value) {\n        return;\n    }\n\n    if (playlistId) {\n        return (element.value as Playlist).organisation;\n    } else if (emissionId) {\n        return (element.value as Emission).orga;\n    }\n    return undefined;\n});\n\n/** The URL to the podcastmaker of the organisation, if any */\nconst organisationAttributes = ref<OrganisationAttributes|null>(null);\nconst { getSharePath } = useSharePath();\n\nasync function getOrganisationAttributes(): Promise<void> {\n    if (organisation.value) {\n        organisationAttributes.value = await organisationApi.getAttributes(organisation.value.id);\n    }\n}\n\n/** The URL to the element on the podcastmaker, or original platform, if any */\nconst podcastmakerElementUrl = computed((): string|undefined => {\n    // Retrieve full URL of element\n    if (playlistId) {\n        return getSharePath({ name: 'playlist', params: { playlistId }}, organisationAttributes.value);\n    } else if (emissionId) {\n        return getSharePath({ name: 'emission', params: { emissionId }}, organisationAttributes.value);\n    }\n    return undefined;\n});\n\n/**\n * The available share platforms for the element\n */\nconst sharePlatforms = computed(() => {\n    if (!element.value) {\n        return [];\n    }\n    return getPlatformsWithLinks(element.value.annotations);\n});\n\nfunction gradient(platform: SharePlatform): Record<string, string> {\n    return {\n        '--gradient-color': platform.color\n    };\n}\n\nfunction openLink(link: string): void {\n    window.open(link, '_blank').focus();\n}\n\nconst playerStore = usePlayerStore();\nconst latestPodcast = ref<Podcast|null>(null);\n\nasync function getLatestPodcast(): Promise<void> {\n    if (playlistId) {\n        const content = await playlistApi.getContent(playlistId);\n        if (content.length > 0) {\n            const id = content[content.length - 1].podcastId;\n            latestPodcast.value = await podcastApi.get(id);\n        }\n    } else if (emissionId) {\n        const result = await podcastApi.searchFull({\n            emissionId,\n            sort: PodcastSort.DATE,\n            size: 1\n        });\n\n        if (result.count > 0) {\n            latestPodcast.value = result.result[0];\n        }\n    }\n}\n\nfunction playLatestPodcast(): void {\n    if (!latestPodcast.value) {\n        return;\n    }\n\n    playerStore.playerPlay(latestPodcast.value);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.background {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    // Do not take place in page\n    position: fixed;\n    // Make rest of page appear in front of image\n    z-index: -1;\n\n    img {\n        width: 100%;\n        height: 100%;\n        // Background image display\n        object-fit: cover;\n        // Blur image\n        filter: blur(40px) sepia(0.4);\n        transform: scale(1.1);\n\n        @media (width <= 960px) {\n            // Better display for small screens\n            filter: blur(15px);\n        }\n    }\n}\n\narticle {\n    // Set variables\n    --background: white;\n    --border-radius: 20px;\n\n    margin: 8rem auto 2rem;\n    padding: 20px;\n    width: 900px;\n    border-radius: var(--border-radius);\n\n    // Background for card\n    background: var(--background);\n    // Subtle border\n    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);\n\n    @media (width <= 960px) {\n        // Adapt card for small screens\n        margin-top: 5rem;\n        width: 100%;\n    }\n\n    .play-button {\n        width: 250px;\n\n        @media (width <= 960px) {\n            // Center button\n            margin-right: auto !important;\n            margin-left: auto !important;\n        }\n\n        &::before {\n            // Remove additional content\n            display: none;\n        }\n    }\n\n    .left {\n        // Align left\n        float: left;\n\n        @media (width <= 960px) {\n            // On small screens, center content\n            margin: 0 auto;\n            float: none;\n        }\n    }\n\n    .img-box {\n        // Move image\n        margin-top: -70px;\n        margin-bottom: 0px;\n\n        // Move image left with content going to its right, and below it\n        margin-right: 20px;\n\n        // Add a border\n        border: 2px solid var(--background);\n        border-radius: var(--border-radius);\n\n        @media (width <= 960px) {\n            margin: -70px auto 10px;\n        }\n    }\n\n    // Section for title & description of content\n    .content {\n        margin-left: 20px;\n\n        @media (width <= 960px) {\n            margin-left: 0;\n        }\n\n        h1 {\n            text-align: start !important;\n            font-size: var(--octopus-smartlink-title-fontsize);\n            color: var(--octopus-smartlink-title-color);\n\n            @media (width <= 960px) {\n                text-align: center !important;\n            }\n        }\n    }\n\n    // Section for displaying platforms\n    .platforms {\n        // Allow display on columns\n        display: flex;\n        flex-wrap: wrap;\n        margin-top: 50px;\n\n        @media (width <= 960px) {\n            // Lower top margin when on mobile\n            margin-top: 20px;\n        }\n\n        .platform-btn {\n            display: flex;\n            padding: 4px 8px;\n            // Display on two columns\n            flex-basis: 50%;\n            // Center elements when possible\n            margin: auto;\n\n            @media (width <= 960px) {\n                // On small screens, buttons take full width\n                flex-basis: 100%;\n            }\n        }\n\n        .btn {\n            display: flex;\n            height: 52px;\n            // Center content vertically\n            align-items: center;\n            padding-left: 40px;\n            background: linear-gradient(155deg, var(--octopus-secondary) 30%, oklch(from var(--gradient-color) l c h / 40%));\n            .platform-label {\n                margin-left: 30px;\n            }\n\n            &:hover {\n                background: linear-gradient(155deg, var(--octopus-secondary) 30%, oklch(from var(--gradient-color) l c h / 100%));\n            }\n\n        }\n    }\n}\n\n.footer {\n    cursor: pointer;\n    margin: 34px auto 0;\n    font-size: 14px;\n    display: flex;\n    justify-content: space-between;\n\n    @media (width <= 960px) {\n        flex-direction: column-reverse;\n        align-items: center;\n    }\n\n    a {\n        display: flex;\n        align-items: center;\n        color: var(--octopus-color-text);\n\n        &:hover {\n            color: var(--octopus-primary);\n        }\n    }\n}\n</style>\n"],"mappings":"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"}

package/dist/SmartLinkPage-DfFv2Nmb.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartLinkPage-DfFv2Nmb.mjs","names":[],"sources":["../src/components/pages/SmartLinkPage.vue","../src/components/pages/SmartLinkPage.vue"],"sourcesContent":["<template>\n    <div v-if=\"element\" class=\"background\">\n        <img :src=\"useProxyImageUrl(element.imageUrl, '1600')\">\n    </div>\n    <article v-if=\"element\">\n        <!-- Top part of smartlink, with image, title and description -->\n        <div class=\"content\">\n            <div class=\"left\">\n                <img\n                    v-lazy=\"useProxyImageUrl(element.imageUrl, '250')\"\n                    width=\"250\"\n                    height=\"250\"\n                    class=\"img-box\"\n                    aria-hidden=\"true\"\n                    alt=\"\"\n                >\n                <!-- Play button when not viewing with phone -->\n                <button\n                    v-if=\"latestPodcast\"\n                    class=\"btn btn-primary play-button pe-3 hide-phone\"\n                    @click=\"playLatestPodcast\"\n                >\n                    <PlayIcon class=\"me-2\" />\n                    {{ $t('SmartLink - Listen to latest episode') }}\n                </button>\n            </div>\n            <h1>{{ title }}</h1>\n            <div v-html=\"description\" />\n\n            <!-- Play button when viewing with phone -->\n            <button\n                v-if=\"latestPodcast\"\n                class=\"btn btn-primary play-button pe-3 mt-4 show-phone-flex\"\n                @click=\"playLatestPodcast\"\n            >\n                <PlayIcon class=\"me-2\" />\n                {{ $t('SmartLink - Listen to latest episode') }}\n            </button>\n        </div>\n\n        <!-- Links -->\n        <div class=\"platforms\">\n            <div\n                v-for=\"platform in sharePlatforms\"\n                :key=\"platform.name\"\n                class=\"platform-btn\"\n            >\n                <button\n                    class=\"btn w-100\"\n                    :style=\"gradient(platform)\"\n                    @click=\"openLink(platform.url)\"\n                >\n                    <!-- Icon of platform -->\n                    <component\n                        :is=\"platform.icon\"\n                        :size=\"36\"\n                        :fill-color=\"platform.color\"\n                        class=\"me-2\"\n                    />\n\n                    <span class=\"platform-label\">{{ platform.title }}</span>\n                </button>\n            </div>\n        </div>\n\n        <!-- Footer -->\n        <div class=\"footer\">\n            <a target=\"_blank\" href=\"/\">\n                <span>{{ $t('SmartLink - Made by') }}</span>\n                <img\n                    src=\"/img/logo_saooti_play_black.svg\"\n                    height=\"24\"\n                    class=\"ms-2\"\n                >\n            </a>\n            <a\n                v-if=\"podcastmakerElementUrl\"\n                target=\"_blank\"\n                :href=\"podcastmakerElementUrl\"\n            >\n                <span v-if=\"playlistId\">{{ $t('SmartLink - To playlist on podcastmaker', { organisation: organisation.name }) }}</span>\n                <span v-else-if=\"emissionId\">{{ $t('SmartLink - To emission on podcastmaker', { organisation: organisation.name }) }}</span>\n            </a>\n        </div>\n    </article>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue';\nimport { useSeoTitleUrl } from '../composable/route/useSeoTitleUrl';\n\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\n\nimport { Emission } from '../../stores/class/general/emission';\nimport { Playlist } from '../../stores/class/general/playlist';\nimport { playlistApi } from '../../api/playlistApi';\nimport { emissionApi } from '../../api/emissionApi';\nimport { useImageProxy } from '../composable/useImageProxy';\nimport { SharePlatform, useSharePlatforms } from '../composable/share/useSharePlatforms';\nimport { Organisation, OrganisationAttributes } from '../../stores/class/general/organisation';\nimport { organisationApi } from '../../api/organisationApi';\nimport { Podcast } from '@/stores/class/general/podcast';\nimport { usePlayerStore } from '../../stores/PlayerStore';\nimport { podcastApi, PodcastSort } from '../../api/podcastApi';\nimport { useSharePath } from '../composable/share/useSharePath';\nimport displayHelper from '../../helper/displayHelper';\nimport { state } from '../../stores/ParamSdkStore';\n\nconst { updatePathParams } = useSeoTitleUrl();\nconst { useProxyImageUrl } = useImageProxy();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\n\n/** Props used when displaying a playlist */\ninterface PlaylistProps {\n    /** ID of the playlist to display */\n    playlistId: number;\n    /** Disallow use of emission id */\n    emissionId?: never;\n}\n\n/** Props used when displaying an emission */\ninterface EmissionProps {\n    /** Disallow use of playlist id */\n    playlistId?: never;\n    /** ID of the emission to display */\n    emissionId: number;\n}\n\nconst { playlistId, emissionId } = defineProps<PlaylistProps|EmissionProps>();\n\n/** The currently displayed element, if any */\nconst element = ref<Playlist|Emission|null>(null);\n\nonMounted(async() => {\n    // Retrieve element\n    if (playlistId) {\n        element.value = await playlistApi.get(playlistId);\n        initPlatforms(element.value.organisation.id);\n    } else if (emissionId) {\n        element.value = await emissionApi.get(emissionId);\n        initPlatforms(element.value.orga.id);\n    } else {\n        console.error('No content defined');\n    }\n\n    // Update title & path\n    updatePathParams(title.value);\n\n    getOrganisationAttributes();\n    getLatestPodcast();\n});\n\n/** Title of the element displayed */\nconst title = computed((): string => {\n    if (playlistId) {\n        return (element.value as Playlist).title;\n    }\n    if (emissionId) {\n        return (element.value as Emission).name;\n    }\n    return '';\n});\n\n/** Description of the element displayed */\nconst description = computed((): string => {\n    let description = element.value.description;\n    if (state.smartLink.showOnlyFirstParagraphInDescription === true) {\n        // Find everything up to the end of the first paragraph, including newlines\n        const pattern = /^(.+?(?:\\n+.*?)*<\\/p>)/;\n        const matches = description.match(pattern);\n        if (matches && matches.length >= 2) {\n            description = matches[1];\n        }\n    }\n\n    return displayHelper.urlify(description);\n});\n\n/** The organisation associated with the element */\nconst organisation = computed((): Organisation|undefined => {\n    if (!element.value) {\n        return;\n    }\n\n    if (playlistId) {\n        return (element.value as Playlist).organisation;\n    } else if (emissionId) {\n        return (element.value as Emission).orga;\n    }\n    return undefined;\n});\n\n/** The URL to the podcastmaker of the organisation, if any */\nconst organisationAttributes = ref<OrganisationAttributes|null>(null);\nconst { getSharePath } = useSharePath();\n\nasync function getOrganisationAttributes(): Promise<void> {\n    if (organisation.value) {\n        organisationAttributes.value = await organisationApi.getAttributes(organisation.value.id);\n    }\n}\n\n/** The URL to the element on the podcastmaker, or original platform, if any */\nconst podcastmakerElementUrl = computed((): string|undefined => {\n    // Retrieve full URL of element\n    if (playlistId) {\n        return getSharePath({ name: 'playlist', params: { playlistId }}, organisationAttributes.value);\n    } else if (emissionId) {\n        return getSharePath({ name: 'emission', params: { emissionId }}, organisationAttributes.value);\n    }\n    return undefined;\n});\n\n/**\n * The available share platforms for the element\n */\nconst sharePlatforms = computed(() => {\n    if (!element.value) {\n        return [];\n    }\n    return getPlatformsWithLinks(element.value.annotations);\n});\n\nfunction gradient(platform: SharePlatform): Record<string, string> {\n    return {\n        '--gradient-color': platform.color\n    };\n}\n\nfunction openLink(link: string): void {\n    window.open(link, '_blank').focus();\n}\n\nconst playerStore = usePlayerStore();\nconst latestPodcast = ref<Podcast|null>(null);\n\nasync function getLatestPodcast(): Promise<void> {\n    if (playlistId) {\n        const content = await playlistApi.getContent(playlistId);\n        if (content.length > 0) {\n            const id = content[content.length - 1].podcastId;\n            latestPodcast.value = await podcastApi.get(id);\n        }\n    } else if (emissionId) {\n        const result = await podcastApi.searchFull({\n            emissionId,\n            sort: PodcastSort.DATE,\n            size: 1\n        });\n\n        if (result.count > 0) {\n            latestPodcast.value = result.result[0];\n        }\n    }\n}\n\nfunction playLatestPodcast(): void {\n    if (!latestPodcast.value) {\n        return;\n    }\n\n    playerStore.playerPlay(latestPodcast.value);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.background {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    // Do not take place in page\n    position: fixed;\n    // Make rest of page appear in front of image\n    z-index: -1;\n\n    img {\n        width: 100%;\n        height: 100%;\n        // Background image display\n        object-fit: cover;\n        // Blur image\n        filter: blur(40px) sepia(0.4);\n        transform: scale(1.1);\n\n        @media (width <= 960px) {\n            // Better display for small screens\n            filter: blur(15px);\n        }\n    }\n}\n\narticle {\n    // Set variables\n    --background: white;\n    --border-radius: 20px;\n\n    margin: 8rem auto 2rem;\n    padding: 20px;\n    width: 900px;\n    border-radius: var(--border-radius);\n\n    // Background for card\n    background: var(--background);\n    // Subtle border\n    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);\n\n    @media (width <= 960px) {\n        // Adapt card for small screens\n        margin-top: 5rem;\n        width: 100%;\n    }\n\n    .play-button {\n        width: 250px;\n\n        @media (width <= 960px) {\n            // Center button\n            margin-right: auto !important;\n            margin-left: auto !important;\n        }\n\n        &::before {\n            // Remove additional content\n            display: none;\n        }\n    }\n\n    .left {\n        // Align left\n        float: left;\n\n        @media (width <= 960px) {\n            // On small screens, center content\n            margin: 0 auto;\n            float: none;\n        }\n    }\n\n    .img-box {\n        // Move image\n        margin-top: -70px;\n        margin-bottom: 0px;\n\n        // Move image left with content going to its right, and below it\n        margin-right: 20px;\n\n        // Add a border\n        border: 2px solid var(--background);\n        border-radius: var(--border-radius);\n\n        @media (width <= 960px) {\n            margin: -70px auto 10px;\n        }\n    }\n\n    // Section for title & description of content\n    .content {\n        margin-left: 20px;\n\n        @media (width <= 960px) {\n            margin-left: 0;\n        }\n\n        h1 {\n            text-align: start !important;\n            font-size: var(--octopus-smartlink-title-fontsize);\n            color: var(--octopus-smartlink-title-color);\n\n            @media (width <= 960px) {\n                text-align: center !important;\n            }\n        }\n    }\n\n    // Section for displaying platforms\n    .platforms {\n        // Allow display on columns\n        display: flex;\n        flex-wrap: wrap;\n        margin-top: 50px;\n\n        @media (width <= 960px) {\n            // Lower top margin when on mobile\n            margin-top: 20px;\n        }\n\n        .platform-btn {\n            display: flex;\n            padding: 4px 8px;\n            // Display on two columns\n            flex-basis: 50%;\n            // Center elements when possible\n            margin: auto;\n\n            @media (width <= 960px) {\n                // On small screens, buttons take full width\n                flex-basis: 100%;\n            }\n        }\n\n        .btn {\n            display: flex;\n            height: 52px;\n            // Center content vertically\n            align-items: center;\n            padding-left: 40px;\n            background: linear-gradient(155deg, var(--octopus-secondary) 30%, oklch(from var(--gradient-color) l c h / 40%));\n            .platform-label {\n                margin-left: 30px;\n            }\n\n            &:hover {\n                background: linear-gradient(155deg, var(--octopus-secondary) 30%, oklch(from var(--gradient-color) l c h / 100%));\n            }\n\n        }\n    }\n}\n\n.footer {\n    cursor: pointer;\n    margin: 34px auto 0;\n    font-size: 14px;\n    display: flex;\n    justify-content: space-between;\n\n    @media (width <= 960px) {\n        flex-direction: column-reverse;\n        align-items: center;\n    }\n\n    a {\n        display: flex;\n        align-items: center;\n        color: var(--octopus-color-text);\n\n        &:hover {\n            color: var(--octopus-primary);\n        }\n    }\n}\n</style>\n","<template>\n    <div v-if=\"element\" class=\"background\">\n        <img :src=\"useProxyImageUrl(element.imageUrl, '1600')\">\n    </div>\n    <article v-if=\"element\">\n        <!-- Top part of smartlink, with image, title and description -->\n        <div class=\"content\">\n            <div class=\"left\">\n                <img\n                    v-lazy=\"useProxyImageUrl(element.imageUrl, '250')\"\n                    width=\"250\"\n                    height=\"250\"\n                    class=\"img-box\"\n                    aria-hidden=\"true\"\n                    alt=\"\"\n                >\n                <!-- Play button when not viewing with phone -->\n                <button\n                    v-if=\"latestPodcast\"\n                    class=\"btn btn-primary play-button pe-3 hide-phone\"\n                    @click=\"playLatestPodcast\"\n                >\n                    <PlayIcon class=\"me-2\" />\n                    {{ $t('SmartLink - Listen to latest episode') }}\n                </button>\n            </div>\n            <h1>{{ title }}</h1>\n            <div v-html=\"description\" />\n\n            <!-- Play button when viewing with phone -->\n            <button\n                v-if=\"latestPodcast\"\n                class=\"btn btn-primary play-button pe-3 mt-4 show-phone-flex\"\n                @click=\"playLatestPodcast\"\n            >\n                <PlayIcon class=\"me-2\" />\n                {{ $t('SmartLink - Listen to latest episode') }}\n            </button>\n        </div>\n\n        <!-- Links -->\n        <div class=\"platforms\">\n            <div\n                v-for=\"platform in sharePlatforms\"\n                :key=\"platform.name\"\n                class=\"platform-btn\"\n            >\n                <button\n                    class=\"btn w-100\"\n                    :style=\"gradient(platform)\"\n                    @click=\"openLink(platform.url)\"\n                >\n                    <!-- Icon of platform -->\n                    <component\n                        :is=\"platform.icon\"\n                        :size=\"36\"\n                        :fill-color=\"platform.color\"\n                        class=\"me-2\"\n                    />\n\n                    <span class=\"platform-label\">{{ platform.title }}</span>\n                </button>\n            </div>\n        </div>\n\n        <!-- Footer -->\n        <div class=\"footer\">\n            <a target=\"_blank\" href=\"/\">\n                <span>{{ $t('SmartLink - Made by') }}</span>\n                <img\n                    src=\"/img/logo_saooti_play_black.svg\"\n                    height=\"24\"\n                    class=\"ms-2\"\n                >\n            </a>\n            <a\n                v-if=\"podcastmakerElementUrl\"\n                target=\"_blank\"\n                :href=\"podcastmakerElementUrl\"\n            >\n                <span v-if=\"playlistId\">{{ $t('SmartLink - To playlist on podcastmaker', { organisation: organisation.name }) }}</span>\n                <span v-else-if=\"emissionId\">{{ $t('SmartLink - To emission on podcastmaker', { organisation: organisation.name }) }}</span>\n            </a>\n        </div>\n    </article>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue';\nimport { useSeoTitleUrl } from '../composable/route/useSeoTitleUrl';\n\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\n\nimport { Emission } from '../../stores/class/general/emission';\nimport { Playlist } from '../../stores/class/general/playlist';\nimport { playlistApi } from '../../api/playlistApi';\nimport { emissionApi } from '../../api/emissionApi';\nimport { useImageProxy } from '../composable/useImageProxy';\nimport { SharePlatform, useSharePlatforms } from '../composable/share/useSharePlatforms';\nimport { Organisation, OrganisationAttributes } from '../../stores/class/general/organisation';\nimport { organisationApi } from '../../api/organisationApi';\nimport { Podcast } from '@/stores/class/general/podcast';\nimport { usePlayerStore } from '../../stores/PlayerStore';\nimport { podcastApi, PodcastSort } from '../../api/podcastApi';\nimport { useSharePath } from '../composable/share/useSharePath';\nimport displayHelper from '../../helper/displayHelper';\nimport { state } from '../../stores/ParamSdkStore';\n\nconst { updatePathParams } = useSeoTitleUrl();\nconst { useProxyImageUrl } = useImageProxy();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\n\n/** Props used when displaying a playlist */\ninterface PlaylistProps {\n    /** ID of the playlist to display */\n    playlistId: number;\n    /** Disallow use of emission id */\n    emissionId?: never;\n}\n\n/** Props used when displaying an emission */\ninterface EmissionProps {\n    /** Disallow use of playlist id */\n    playlistId?: never;\n    /** ID of the emission to display */\n    emissionId: number;\n}\n\nconst { playlistId, emissionId } = defineProps<PlaylistProps|EmissionProps>();\n\n/** The currently displayed element, if any */\nconst element = ref<Playlist|Emission|null>(null);\n\nonMounted(async() => {\n    // Retrieve element\n    if (playlistId) {\n        element.value = await playlistApi.get(playlistId);\n        initPlatforms(element.value.organisation.id);\n    } else if (emissionId) {\n        element.value = await emissionApi.get(emissionId);\n        initPlatforms(element.value.orga.id);\n    } else {\n        console.error('No content defined');\n    }\n\n    // Update title & path\n    updatePathParams(title.value);\n\n    getOrganisationAttributes();\n    getLatestPodcast();\n});\n\n/** Title of the element displayed */\nconst title = computed((): string => {\n    if (playlistId) {\n        return (element.value as Playlist).title;\n    }\n    if (emissionId) {\n        return (element.value as Emission).name;\n    }\n    return '';\n});\n\n/** Description of the element displayed */\nconst description = computed((): string => {\n    let description = element.value.description;\n    if (state.smartLink.showOnlyFirstParagraphInDescription === true) {\n        // Find everything up to the end of the first paragraph, including newlines\n        const pattern = /^(.+?(?:\\n+.*?)*<\\/p>)/;\n        const matches = description.match(pattern);\n        if (matches && matches.length >= 2) {\n            description = matches[1];\n        }\n    }\n\n    return displayHelper.urlify(description);\n});\n\n/** The organisation associated with the element */\nconst organisation = computed((): Organisation|undefined => {\n    if (!element.value) {\n        return;\n    }\n\n    if (playlistId) {\n        return (element.value as Playlist).organisation;\n    } else if (emissionId) {\n        return (element.value as Emission).orga;\n    }\n    return undefined;\n});\n\n/** The URL to the podcastmaker of the organisation, if any */\nconst organisationAttributes = ref<OrganisationAttributes|null>(null);\nconst { getSharePath } = useSharePath();\n\nasync function getOrganisationAttributes(): Promise<void> {\n    if (organisation.value) {\n        organisationAttributes.value = await organisationApi.getAttributes(organisation.value.id);\n    }\n}\n\n/** The URL to the element on the podcastmaker, or original platform, if any */\nconst podcastmakerElementUrl = computed((): string|undefined => {\n    // Retrieve full URL of element\n    if (playlistId) {\n        return getSharePath({ name: 'playlist', params: { playlistId }}, organisationAttributes.value);\n    } else if (emissionId) {\n        return getSharePath({ name: 'emission', params: { emissionId }}, organisationAttributes.value);\n    }\n    return undefined;\n});\n\n/**\n * The available share platforms for the element\n */\nconst sharePlatforms = computed(() => {\n    if (!element.value) {\n        return [];\n    }\n    return getPlatformsWithLinks(element.value.annotations);\n});\n\nfunction gradient(platform: SharePlatform): Record<string, string> {\n    return {\n        '--gradient-color': platform.color\n    };\n}\n\nfunction openLink(link: string): void {\n    window.open(link, '_blank').focus();\n}\n\nconst playerStore = usePlayerStore();\nconst latestPodcast = ref<Podcast|null>(null);\n\nasync function getLatestPodcast(): Promise<void> {\n    if (playlistId) {\n        const content = await playlistApi.getContent(playlistId);\n        if (content.length > 0) {\n            const id = content[content.length - 1].podcastId;\n            latestPodcast.value = await podcastApi.get(id);\n        }\n    } else if (emissionId) {\n        const result = await podcastApi.searchFull({\n            emissionId,\n            sort: PodcastSort.DATE,\n            size: 1\n        });\n\n        if (result.count > 0) {\n            latestPodcast.value = result.result[0];\n        }\n    }\n}\n\nfunction playLatestPodcast(): void {\n    if (!latestPodcast.value) {\n        return;\n    }\n\n    playerStore.playerPlay(latestPodcast.value);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.background {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    // Do not take place in page\n    position: fixed;\n    // Make rest of page appear in front of image\n    z-index: -1;\n\n    img {\n        width: 100%;\n        height: 100%;\n        // Background image display\n        object-fit: cover;\n        // Blur image\n        filter: blur(40px) sepia(0.4);\n        transform: scale(1.1);\n\n        @media (width <= 960px) {\n            // Better display for small screens\n            filter: blur(15px);\n        }\n    }\n}\n\narticle {\n    // Set variables\n    --background: white;\n    --border-radius: 20px;\n\n    margin: 8rem auto 2rem;\n    padding: 20px;\n    width: 900px;\n    border-radius: var(--border-radius);\n\n    // Background for card\n    background: var(--background);\n    // Subtle border\n    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);\n\n    @media (width <= 960px) {\n        // Adapt card for small screens\n        margin-top: 5rem;\n        width: 100%;\n    }\n\n    .play-button {\n        width: 250px;\n\n        @media (width <= 960px) {\n            // Center button\n            margin-right: auto !important;\n            margin-left: auto !important;\n        }\n\n        &::before {\n            // Remove additional content\n            display: none;\n        }\n    }\n\n    .left {\n        // Align left\n        float: left;\n\n        @media (width <= 960px) {\n            // On small screens, center content\n            margin: 0 auto;\n            float: none;\n        }\n    }\n\n    .img-box {\n        // Move image\n        margin-top: -70px;\n        margin-bottom: 0px;\n\n        // Move image left with content going to its right, and below it\n        margin-right: 20px;\n\n        // Add a border\n        border: 2px solid var(--background);\n        border-radius: var(--border-radius);\n\n        @media (width <= 960px) {\n            margin: -70px auto 10px;\n        }\n    }\n\n    // Section for title & description of content\n    .content {\n        margin-left: 20px;\n\n        @media (width <= 960px) {\n            margin-left: 0;\n        }\n\n        h1 {\n            text-align: start !important;\n            font-size: var(--octopus-smartlink-title-fontsize);\n            color: var(--octopus-smartlink-title-color);\n\n            @media (width <= 960px) {\n                text-align: center !important;\n            }\n        }\n    }\n\n    // Section for displaying platforms\n    .platforms {\n        // Allow display on columns\n        display: flex;\n        flex-wrap: wrap;\n        margin-top: 50px;\n\n        @media (width <= 960px) {\n            // Lower top margin when on mobile\n            margin-top: 20px;\n        }\n\n        .platform-btn {\n            display: flex;\n            padding: 4px 8px;\n            // Display on two columns\n            flex-basis: 50%;\n            // Center elements when possible\n            margin: auto;\n\n            @media (width <= 960px) {\n                // On small screens, buttons take full width\n                flex-basis: 100%;\n            }\n        }\n\n        .btn {\n            display: flex;\n            height: 52px;\n            // Center content vertically\n            align-items: center;\n            padding-left: 40px;\n            background: linear-gradient(155deg, var(--octopus-secondary) 30%, oklch(from var(--gradient-color) l c h / 40%));\n            .platform-label {\n                margin-left: 30px;\n            }\n\n            &:hover {\n                background: linear-gradient(155deg, var(--octopus-secondary) 30%, oklch(from var(--gradient-color) l c h / 100%));\n            }\n\n        }\n    }\n}\n\n.footer {\n    cursor: pointer;\n    margin: 34px auto 0;\n    font-size: 14px;\n    display: flex;\n    justify-content: space-between;\n\n    @media (width <= 960px) {\n        flex-direction: column-reverse;\n        align-items: center;\n    }\n\n    a {\n        display: flex;\n        align-items: center;\n        color: var(--octopus-color-text);\n\n        &:hover {\n            color: var(--octopus-primary);\n        }\n    }\n}\n</style>\n"],"mappings":"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"}

package/dist/SmartLinkPage-wnKKixdQ.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SmartLinkPage-wnKKixdQ.mjs","names":[],"sources":["../src/components/pages/SmartLinkPage.vue","../src/components/pages/SmartLinkPage.vue"],"sourcesContent":["<template>\n    <div v-if=\"element\" class=\"background\">\n        <img :src=\"useProxyImageUrl(element.imageUrl, '1600')\">\n    </div>\n    <article v-if=\"element\">\n        <!-- Top part of smartlink, with image, title and description -->\n        <div class=\"content\">\n            <div class=\"left\">\n                <img\n                    v-lazy=\"useProxyImageUrl(element.imageUrl, '250')\"\n                    width=\"250\"\n                    height=\"250\"\n                    class=\"img-box\"\n                    aria-hidden=\"true\"\n                    alt=\"\"\n                >\n                <!-- Play button when not viewing with phone -->\n                <button\n                    v-if=\"latestPodcast\"\n                    class=\"btn btn-primary play-button pe-3 hide-phone\"\n                    @click=\"playLatestPodcast\"\n                >\n                    <PlayIcon class=\"me-2\" />\n                    {{ $t('SmartLink - Listen to latest episode') }}\n                </button>\n            </div>\n            <h1>{{ title }}</h1>\n            <div v-html=\"description\" />\n\n            <!-- Play button when viewing with phone -->\n            <button\n                v-if=\"latestPodcast\"\n                class=\"btn btn-primary play-button pe-3 mt-4 show-phone-flex\"\n                @click=\"playLatestPodcast\"\n            >\n                <PlayIcon class=\"me-2\" />\n                {{ $t('SmartLink - Listen to latest episode') }}\n            </button>\n        </div>\n\n        <!-- Links -->\n        <div class=\"platforms\">\n            <div\n                v-for=\"platform in sharePlatforms\"\n                :key=\"platform.name\"\n                class=\"platform-btn\"\n            >\n                <button\n                    class=\"btn w-100\"\n                    :style=\"gradient(platform)\"\n                    @click=\"openLink(platform.url)\"\n                >\n                    <!-- Icon of platform -->\n                    <component\n                        :is=\"platform.icon\"\n                        :size=\"36\"\n                        :fill-color=\"platform.color\"\n                        class=\"me-2\"\n                    />\n\n                    <span class=\"platform-label\">{{ platform.title }}</span>\n                </button>\n            </div>\n        </div>\n\n        <!-- Footer -->\n        <div class=\"footer\">\n            <a target=\"_blank\" href=\"/\">\n                <span>{{ $t('SmartLink - Made by') }}</span>\n                <img\n                    src=\"/img/logo_saooti_play_black.svg\"\n                    height=\"24\"\n                    class=\"ms-2\"\n                >\n            </a>\n            <a\n                v-if=\"podcastmakerElementUrl\"\n                target=\"_blank\"\n                :href=\"podcastmakerElementUrl\"\n            >\n                <span v-if=\"playlistId\">{{ $t('SmartLink - To playlist on podcastmaker', { organisation: organisation.name }) }}</span>\n                <span v-else-if=\"emissionId\">{{ $t('SmartLink - To emission on podcastmaker', { organisation: organisation.name }) }}</span>\n            </a>\n        </div>\n    </article>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue';\nimport { useSeoTitleUrl } from '../composable/route/useSeoTitleUrl';\n\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\n\nimport { Emission } from '../../stores/class/general/emission';\nimport { Playlist } from '../../stores/class/general/playlist';\nimport { playlistApi } from '../../api/playlistApi';\nimport { emissionApi } from '../../api/emissionApi';\nimport { useImageProxy } from '../composable/useImageProxy';\nimport { SharePlatform, useSharePlatforms } from '../composable/share/useSharePlatforms';\nimport { Organisation, OrganisationAttributes } from '../../stores/class/general/organisation';\nimport { organisationApi } from '../../api/organisationApi';\nimport { Podcast } from '@/stores/class/general/podcast';\nimport { usePlayerStore } from '../../stores/PlayerStore';\nimport { podcastApi, PodcastSort } from '../../api/podcastApi';\nimport { useSharePath } from '../composable/share/useSharePath';\nimport displayHelper from '../../helper/displayHelper';\nimport { state } from '../../stores/ParamSdkStore';\n\nconst { updatePathParams } = useSeoTitleUrl();\nconst { useProxyImageUrl } = useImageProxy();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\n\n/** Props used when displaying a playlist */\ninterface PlaylistProps {\n    /** ID of the playlist to display */\n    playlistId: number;\n    /** Disallow use of emission id */\n    emissionId?: never;\n}\n\n/** Props used when displaying an emission */\ninterface EmissionProps {\n    /** Disallow use of playlist id */\n    playlistId?: never;\n    /** ID of the emission to display */\n    emissionId: number;\n}\n\nconst { playlistId, emissionId } = defineProps<PlaylistProps|EmissionProps>();\n\n/** The currently displayed element, if any */\nconst element = ref<Playlist|Emission|null>(null);\n\nonMounted(async() => {\n    // Retrieve element\n    if (playlistId) {\n        element.value = await playlistApi.get(playlistId);\n        initPlatforms(element.value.organisation.id);\n    } else if (emissionId) {\n        element.value = await emissionApi.get(emissionId);\n        initPlatforms(element.value.orga.id);\n    } else {\n        console.error('No content defined');\n    }\n\n    // Update title & path\n    updatePathParams(title.value);\n\n    getOrganisationAttributes();\n    getLatestPodcast();\n});\n\n/** Title of the element displayed */\nconst title = computed((): string => {\n    if (playlistId) {\n        return (element.value as Playlist).title;\n    }\n    if (emissionId) {\n        return (element.value as Emission).name;\n    }\n    return '';\n});\n\n/** Description of the element displayed */\nconst description = computed((): string => {\n    let description = element.value.description;\n    if (state.smartLink.showOnlyFirstParagraphInDescription === true) {\n        // Find everything up to the end of the first paragraph, including newlines\n        const pattern = /^(.+?(?:\\n+.*?)*<\\/p>)/;\n        const matches = description.match(pattern);\n        if (matches && matches.length >= 2) {\n            description = matches[1];\n        }\n    }\n\n    return displayHelper.urlify(description);\n});\n\n/** The organisation associated with the element */\nconst organisation = computed((): Organisation|undefined => {\n    if (!element.value) {\n        return;\n    }\n\n    if (playlistId) {\n        return (element.value as Playlist).organisation;\n    } else if (emissionId) {\n        return (element.value as Emission).orga;\n    }\n    return undefined;\n});\n\n/** The URL to the podcastmaker of the organisation, if any */\nconst organisationAttributes = ref<OrganisationAttributes|null>(null);\nconst { getSharePath } = useSharePath();\n\nasync function getOrganisationAttributes(): Promise<void> {\n    if (organisation.value) {\n        organisationAttributes.value = await organisationApi.getAttributes(organisation.value.id);\n    }\n}\n\n/** The URL to the element on the podcastmaker, or original platform, if any */\nconst podcastmakerElementUrl = computed((): string|undefined => {\n    // Retrieve full URL of element\n    if (playlistId) {\n        return getSharePath({ name: 'playlist', params: { playlistId }}, organisationAttributes.value);\n    } else if (emissionId) {\n        return getSharePath({ name: 'emission', params: { emissionId }}, organisationAttributes.value);\n    }\n    return undefined;\n});\n\n/**\n * The available share platforms for the element\n */\nconst sharePlatforms = computed(() => {\n    if (!element.value) {\n        return [];\n    }\n    return getPlatformsWithLinks(element.value.annotations);\n});\n\nfunction gradient(platform: SharePlatform): Record<string, string> {\n    return {\n        '--gradient-color': platform.color\n    };\n}\n\nfunction openLink(link: string): void {\n    window.open(link, '_blank').focus();\n}\n\nconst playerStore = usePlayerStore();\nconst latestPodcast = ref<Podcast|null>(null);\n\nasync function getLatestPodcast(): Promise<void> {\n    if (playlistId) {\n        const content = await playlistApi.getContent(playlistId);\n        if (content.length > 0) {\n            const id = content[content.length - 1].podcastId;\n            latestPodcast.value = await podcastApi.get(id);\n        }\n    } else if (emissionId) {\n        const result = await podcastApi.searchFull({\n            emissionId,\n            sort: PodcastSort.DATE,\n            size: 1\n        });\n\n        if (result.count > 0) {\n            latestPodcast.value = result.result[0];\n        }\n    }\n}\n\nfunction playLatestPodcast(): void {\n    if (!latestPodcast.value) {\n        return;\n    }\n\n    playerStore.playerPlay(latestPodcast.value);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.background {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    // Do not take place in page\n    position: fixed;\n    // Make rest of page appear in front of image\n    z-index: -1;\n\n    img {\n        width: 100%;\n        height: 100%;\n        // Background image display\n        object-fit: cover;\n        // Blur image\n        filter: blur(40px) sepia(0.4);\n        transform: scale(1.1);\n\n        @media (width <= 960px) {\n            // Better display for small screens\n            filter: blur(15px);\n        }\n    }\n}\n\narticle {\n    // Set variables\n    --background: white;\n    --border-radius: 20px;\n\n    margin: 8rem auto 2rem;\n    padding: 20px;\n    width: 900px;\n    border-radius: var(--border-radius);\n\n    // Background for card\n    background: var(--background);\n    // Subtle border\n    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);\n\n    @media (width <= 960px) {\n        // Adapt card for small screens\n        margin-top: 5rem;\n        width: 100%;\n    }\n\n    .play-button {\n        width: 250px;\n\n        @media (width <= 960px) {\n            // Center button\n            margin-right: auto !important;\n            margin-left: auto !important;\n        }\n\n        &::before {\n            // Remove additional content\n            display: none;\n        }\n    }\n\n    .left {\n        // Align left\n        float: left;\n\n        @media (width <= 960px) {\n            // On small screens, center content\n            margin: 0 auto;\n            float: none;\n        }\n    }\n\n    .img-box {\n        // Move image\n        margin-top: -70px;\n        margin-bottom: 0px;\n\n        // Move image left with content going to its right, and below it\n        margin-right: 20px;\n\n        // Add a border\n        border: 2px solid var(--background);\n        border-radius: var(--border-radius);\n\n        @media (width <= 960px) {\n            margin: -70px auto 10px;\n        }\n    }\n\n    // Section for title & description of content\n    .content {\n        margin-left: 20px;\n\n        @media (width <= 960px) {\n            margin-left: 0;\n        }\n\n        h1 {\n            text-align: start !important;\n            font-size: var(--octopus-smartlink-title-fontsize);\n            color: var(--octopus-smartlink-title-color);\n\n            @media (width <= 960px) {\n                text-align: center !important;\n            }\n        }\n    }\n\n    // Section for displaying platforms\n    .platforms {\n        // Allow display on columns\n        display: flex;\n        flex-wrap: wrap;\n        margin-top: 50px;\n\n        @media (width <= 960px) {\n            // Lower top margin when on mobile\n            margin-top: 20px;\n        }\n\n        .platform-btn {\n            display: flex;\n            padding: 4px 8px;\n            // Display on two columns\n            flex-basis: 50%;\n            // Center elements when possible\n            margin: auto;\n\n            @media (width <= 960px) {\n                // On small screens, buttons take full width\n                flex-basis: 100%;\n            }\n        }\n\n        .btn {\n            display: flex;\n            height: 52px;\n            // Center content vertically\n            align-items: center;\n            padding-left: 40px;\n            background: linear-gradient(155deg, var(--octopus-secondary) 30%, oklch(from var(--gradient-color) l c h / 40%));\n            .platform-label {\n                margin-left: 30px;\n            }\n\n            &:hover {\n                background: linear-gradient(155deg, var(--octopus-secondary) 30%, oklch(from var(--gradient-color) l c h / 100%));\n            }\n\n        }\n    }\n}\n\n.footer {\n    cursor: pointer;\n    margin: 34px auto 0;\n    font-size: 14px;\n    display: flex;\n    justify-content: space-between;\n\n    @media (width <= 960px) {\n        flex-direction: column-reverse;\n        align-items: center;\n    }\n\n    a {\n        display: flex;\n        align-items: center;\n        color: var(--octopus-color-text);\n\n        &:hover {\n            color: var(--octopus-primary);\n        }\n    }\n}\n</style>\n","<template>\n    <div v-if=\"element\" class=\"background\">\n        <img :src=\"useProxyImageUrl(element.imageUrl, '1600')\">\n    </div>\n    <article v-if=\"element\">\n        <!-- Top part of smartlink, with image, title and description -->\n        <div class=\"content\">\n            <div class=\"left\">\n                <img\n                    v-lazy=\"useProxyImageUrl(element.imageUrl, '250')\"\n                    width=\"250\"\n                    height=\"250\"\n                    class=\"img-box\"\n                    aria-hidden=\"true\"\n                    alt=\"\"\n                >\n                <!-- Play button when not viewing with phone -->\n                <button\n                    v-if=\"latestPodcast\"\n                    class=\"btn btn-primary play-button pe-3 hide-phone\"\n                    @click=\"playLatestPodcast\"\n                >\n                    <PlayIcon class=\"me-2\" />\n                    {{ $t('SmartLink - Listen to latest episode') }}\n                </button>\n            </div>\n            <h1>{{ title }}</h1>\n            <div v-html=\"description\" />\n\n            <!-- Play button when viewing with phone -->\n            <button\n                v-if=\"latestPodcast\"\n                class=\"btn btn-primary play-button pe-3 mt-4 show-phone-flex\"\n                @click=\"playLatestPodcast\"\n            >\n                <PlayIcon class=\"me-2\" />\n                {{ $t('SmartLink - Listen to latest episode') }}\n            </button>\n        </div>\n\n        <!-- Links -->\n        <div class=\"platforms\">\n            <div\n                v-for=\"platform in sharePlatforms\"\n                :key=\"platform.name\"\n                class=\"platform-btn\"\n            >\n                <button\n                    class=\"btn w-100\"\n                    :style=\"gradient(platform)\"\n                    @click=\"openLink(platform.url)\"\n                >\n                    <!-- Icon of platform -->\n                    <component\n                        :is=\"platform.icon\"\n                        :size=\"36\"\n                        :fill-color=\"platform.color\"\n                        class=\"me-2\"\n                    />\n\n                    <span class=\"platform-label\">{{ platform.title }}</span>\n                </button>\n            </div>\n        </div>\n\n        <!-- Footer -->\n        <div class=\"footer\">\n            <a target=\"_blank\" href=\"/\">\n                <span>{{ $t('SmartLink - Made by') }}</span>\n                <img\n                    src=\"/img/logo_saooti_play_black.svg\"\n                    height=\"24\"\n                    class=\"ms-2\"\n                >\n            </a>\n            <a\n                v-if=\"podcastmakerElementUrl\"\n                target=\"_blank\"\n                :href=\"podcastmakerElementUrl\"\n            >\n                <span v-if=\"playlistId\">{{ $t('SmartLink - To playlist on podcastmaker', { organisation: organisation.name }) }}</span>\n                <span v-else-if=\"emissionId\">{{ $t('SmartLink - To emission on podcastmaker', { organisation: organisation.name }) }}</span>\n            </a>\n        </div>\n    </article>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, onMounted, ref } from 'vue';\nimport { useSeoTitleUrl } from '../composable/route/useSeoTitleUrl';\n\nimport PlayIcon from \"vue-material-design-icons/Play.vue\";\n\nimport { Emission } from '../../stores/class/general/emission';\nimport { Playlist } from '../../stores/class/general/playlist';\nimport { playlistApi } from '../../api/playlistApi';\nimport { emissionApi } from '../../api/emissionApi';\nimport { useImageProxy } from '../composable/useImageProxy';\nimport { SharePlatform, useSharePlatforms } from '../composable/share/useSharePlatforms';\nimport { Organisation, OrganisationAttributes } from '../../stores/class/general/organisation';\nimport { organisationApi } from '../../api/organisationApi';\nimport { Podcast } from '@/stores/class/general/podcast';\nimport { usePlayerStore } from '../../stores/PlayerStore';\nimport { podcastApi, PodcastSort } from '../../api/podcastApi';\nimport { useSharePath } from '../composable/share/useSharePath';\nimport displayHelper from '../../helper/displayHelper';\nimport { state } from '../../stores/ParamSdkStore';\n\nconst { updatePathParams } = useSeoTitleUrl();\nconst { useProxyImageUrl } = useImageProxy();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\n\n/** Props used when displaying a playlist */\ninterface PlaylistProps {\n    /** ID of the playlist to display */\n    playlistId: number;\n    /** Disallow use of emission id */\n    emissionId?: never;\n}\n\n/** Props used when displaying an emission */\ninterface EmissionProps {\n    /** Disallow use of playlist id */\n    playlistId?: never;\n    /** ID of the emission to display */\n    emissionId: number;\n}\n\nconst { playlistId, emissionId } = defineProps<PlaylistProps|EmissionProps>();\n\n/** The currently displayed element, if any */\nconst element = ref<Playlist|Emission|null>(null);\n\nonMounted(async() => {\n    // Retrieve element\n    if (playlistId) {\n        element.value = await playlistApi.get(playlistId);\n        initPlatforms(element.value.organisation.id);\n    } else if (emissionId) {\n        element.value = await emissionApi.get(emissionId);\n        initPlatforms(element.value.orga.id);\n    } else {\n        console.error('No content defined');\n    }\n\n    // Update title & path\n    updatePathParams(title.value);\n\n    getOrganisationAttributes();\n    getLatestPodcast();\n});\n\n/** Title of the element displayed */\nconst title = computed((): string => {\n    if (playlistId) {\n        return (element.value as Playlist).title;\n    }\n    if (emissionId) {\n        return (element.value as Emission).name;\n    }\n    return '';\n});\n\n/** Description of the element displayed */\nconst description = computed((): string => {\n    let description = element.value.description;\n    if (state.smartLink.showOnlyFirstParagraphInDescription === true) {\n        // Find everything up to the end of the first paragraph, including newlines\n        const pattern = /^(.+?(?:\\n+.*?)*<\\/p>)/;\n        const matches = description.match(pattern);\n        if (matches && matches.length >= 2) {\n            description = matches[1];\n        }\n    }\n\n    return displayHelper.urlify(description);\n});\n\n/** The organisation associated with the element */\nconst organisation = computed((): Organisation|undefined => {\n    if (!element.value) {\n        return;\n    }\n\n    if (playlistId) {\n        return (element.value as Playlist).organisation;\n    } else if (emissionId) {\n        return (element.value as Emission).orga;\n    }\n    return undefined;\n});\n\n/** The URL to the podcastmaker of the organisation, if any */\nconst organisationAttributes = ref<OrganisationAttributes|null>(null);\nconst { getSharePath } = useSharePath();\n\nasync function getOrganisationAttributes(): Promise<void> {\n    if (organisation.value) {\n        organisationAttributes.value = await organisationApi.getAttributes(organisation.value.id);\n    }\n}\n\n/** The URL to the element on the podcastmaker, or original platform, if any */\nconst podcastmakerElementUrl = computed((): string|undefined => {\n    // Retrieve full URL of element\n    if (playlistId) {\n        return getSharePath({ name: 'playlist', params: { playlistId }}, organisationAttributes.value);\n    } else if (emissionId) {\n        return getSharePath({ name: 'emission', params: { emissionId }}, organisationAttributes.value);\n    }\n    return undefined;\n});\n\n/**\n * The available share platforms for the element\n */\nconst sharePlatforms = computed(() => {\n    if (!element.value) {\n        return [];\n    }\n    return getPlatformsWithLinks(element.value.annotations);\n});\n\nfunction gradient(platform: SharePlatform): Record<string, string> {\n    return {\n        '--gradient-color': platform.color\n    };\n}\n\nfunction openLink(link: string): void {\n    window.open(link, '_blank').focus();\n}\n\nconst playerStore = usePlayerStore();\nconst latestPodcast = ref<Podcast|null>(null);\n\nasync function getLatestPodcast(): Promise<void> {\n    if (playlistId) {\n        const content = await playlistApi.getContent(playlistId);\n        if (content.length > 0) {\n            const id = content[content.length - 1].podcastId;\n            latestPodcast.value = await podcastApi.get(id);\n        }\n    } else if (emissionId) {\n        const result = await podcastApi.searchFull({\n            emissionId,\n            sort: PodcastSort.DATE,\n            size: 1\n        });\n\n        if (result.count > 0) {\n            latestPodcast.value = result.result[0];\n        }\n    }\n}\n\nfunction playLatestPodcast(): void {\n    if (!latestPodcast.value) {\n        return;\n    }\n\n    playerStore.playerPlay(latestPodcast.value);\n}\n</script>\n\n<style scoped lang=\"scss\">\n.background {\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n    // Do not take place in page\n    position: fixed;\n    // Make rest of page appear in front of image\n    z-index: -1;\n\n    img {\n        width: 100%;\n        height: 100%;\n        // Background image display\n        object-fit: cover;\n        // Blur image\n        filter: blur(40px) sepia(0.4);\n        transform: scale(1.1);\n\n        @media (width <= 960px) {\n            // Better display for small screens\n            filter: blur(15px);\n        }\n    }\n}\n\narticle {\n    // Set variables\n    --background: white;\n    --border-radius: 20px;\n\n    margin: 8rem auto 2rem;\n    padding: 20px;\n    width: 900px;\n    border-radius: var(--border-radius);\n\n    // Background for card\n    background: var(--background);\n    // Subtle border\n    box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);\n\n    @media (width <= 960px) {\n        // Adapt card for small screens\n        margin-top: 5rem;\n        width: 100%;\n    }\n\n    .play-button {\n        width: 250px;\n\n        @media (width <= 960px) {\n            // Center button\n            margin-right: auto !important;\n            margin-left: auto !important;\n        }\n\n        &::before {\n            // Remove additional content\n            display: none;\n        }\n    }\n\n    .left {\n        // Align left\n        float: left;\n\n        @media (width <= 960px) {\n            // On small screens, center content\n            margin: 0 auto;\n            float: none;\n        }\n    }\n\n    .img-box {\n        // Move image\n        margin-top: -70px;\n        margin-bottom: 0px;\n\n        // Move image left with content going to its right, and below it\n        margin-right: 20px;\n\n        // Add a border\n        border: 2px solid var(--background);\n        border-radius: var(--border-radius);\n\n        @media (width <= 960px) {\n            margin: -70px auto 10px;\n        }\n    }\n\n    // Section for title & description of content\n    .content {\n        margin-left: 20px;\n\n        @media (width <= 960px) {\n            margin-left: 0;\n        }\n\n        h1 {\n            text-align: start !important;\n            font-size: var(--octopus-smartlink-title-fontsize);\n            color: var(--octopus-smartlink-title-color);\n\n            @media (width <= 960px) {\n                text-align: center !important;\n            }\n        }\n    }\n\n    // Section for displaying platforms\n    .platforms {\n        // Allow display on columns\n        display: flex;\n        flex-wrap: wrap;\n        margin-top: 50px;\n\n        @media (width <= 960px) {\n            // Lower top margin when on mobile\n            margin-top: 20px;\n        }\n\n        .platform-btn {\n            display: flex;\n            padding: 4px 8px;\n            // Display on two columns\n            flex-basis: 50%;\n            // Center elements when possible\n            margin: auto;\n\n            @media (width <= 960px) {\n                // On small screens, buttons take full width\n                flex-basis: 100%;\n            }\n        }\n\n        .btn {\n            display: flex;\n            height: 52px;\n            // Center content vertically\n            align-items: center;\n            padding-left: 40px;\n            background: linear-gradient(155deg, var(--octopus-secondary) 30%, oklch(from var(--gradient-color) l c h / 40%));\n            .platform-label {\n                margin-left: 30px;\n            }\n\n            &:hover {\n                background: linear-gradient(155deg, var(--octopus-secondary) 30%, oklch(from var(--gradient-color) l c h / 100%));\n            }\n\n        }\n    }\n}\n\n.footer {\n    cursor: pointer;\n    margin: 34px auto 0;\n    font-size: 14px;\n    display: flex;\n    justify-content: space-between;\n\n    @media (width <= 960px) {\n        flex-direction: column-reverse;\n        align-items: center;\n    }\n\n    a {\n        display: flex;\n        align-items: center;\n        color: var(--octopus-color-text);\n\n        &:hover {\n            color: var(--octopus-primary);\n        }\n    }\n}\n</style>\n"],"mappings":"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"}

package/dist/SubscribeButtons-6HA0Mk9a.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscribeButtons-6HA0Mk9a.mjs","names":[],"sources":["../src/components/display/sharing/SubscribeButtons.vue","../src/components/display/sharing/SubscribeButtons.vue"],"sourcesContent":["<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n","<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/SubscribeButtons-B6i1IdLa.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscribeButtons-B6i1IdLa.mjs","names":[],"sources":["../src/components/display/sharing/SubscribeButtons.vue","../src/components/display/sharing/SubscribeButtons.vue"],"sourcesContent":["<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n","<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/SubscribeButtons-BZrXH39i.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscribeButtons-BZrXH39i.mjs","names":[],"sources":["../src/components/display/sharing/SubscribeButtons.vue","../src/components/display/sharing/SubscribeButtons.vue"],"sourcesContent":["<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n","<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/SubscribeButtons-C64eSNCp.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscribeButtons-C64eSNCp.mjs","names":[],"sources":["../src/components/display/sharing/SubscribeButtons.vue","../src/components/display/sharing/SubscribeButtons.vue"],"sourcesContent":["<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n","<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/SubscribeButtons-DQ5YmkQO.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscribeButtons-DQ5YmkQO.mjs","names":[],"sources":["../src/components/display/sharing/SubscribeButtons.vue","../src/components/display/sharing/SubscribeButtons.vue"],"sourcesContent":["<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n","<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n"],"mappings":"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"}

package/dist/SubscribeButtons-EUkx8pZP.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"SubscribeButtons-EUkx8pZP.mjs","names":[],"sources":["../src/components/display/sharing/SubscribeButtons.vue","../src/components/display/sharing/SubscribeButtons.vue"],"sourcesContent":["<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n","<template>\n    <div\n        v-if=\"subscriptionsDisplay.length || rssUrl\"\n        class=\"subscribe-buttons-container\"\n        :class=\"{ 'justify-center': justifyCenter }\"\n    >\n        <div ref=\"subscribeButtonsContainer\">\n            <a\n                v-for=\"(sub, index) in shownLinks\"\n                :id=\"'subLink' + sub.name\"\n                :key=\"sub.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                :class=\"{\n                    first: 0 === index,\n                    last: subscriptionsDisplay.length - 1 === index,\n                    mono,\n                    small\n                }\"\n                class=\"btn share-btn\"\n                :href=\"sub.url\"\n                :title=\"t('New window', {text: sub.title})\"\n            >\n                <component\n                    :is=\"sub.icon\"\n                    :fill-color=\"fillColor(sub)\"\n                    :size=\"iconSize\"\n                    non-decorative\n                />\n            </a>\n        </div>\n        <a\n            v-if=\"!noRss\"\n            id=\"rss-suscribe-button\"\n            rel=\"noreferrer noopener\"\n            target=\"_blank\"\n            class=\"btn share-btn\"\n            :class=\"{ mono, small }\"\n            :href=\"rssUrl\"\n            :title=\"t('New window', {text: t('Rss feed')})\"\n        >\n            <RssIcon :fill-color=\"fillColor()\" :size=\"iconSize\" />\n        </a>\n\n        <button\n            v-if=\"limit === undefined\"\n            v-show=\"hiddenLinks.length\"\n            id=\"subscribe-buttons-dropdown\"\n            class=\"btn share-btn mx-2\"\n            :title=\"t('See more')\"\n        >\n            <PlusIcon />\n        </button>\n        <ClassicPopover\n            target=\"subscribe-buttons-dropdown\"\n            popover-class=\"popover-z-index\"\n            :only-click=\"true\"\n            :left-pos=\"true\"\n        >\n            <a\n                v-for=\"link in hiddenLinks\"\n                :key=\"link.name\"\n                rel=\"noreferrer noopener\"\n                target=\"_blank\"\n                class=\"octopus-dropdown-item justify-content-start d-flex align-items-center realLink\"\n                :href=\"link.url\"\n                :title=\"t('New window', {text: link.title})\"\n            >\n                <component\n                    :is=\"link.icon\"\n                    :fill-color=\"fillColor(link)\"\n                    class=\"me-1\"\n                />\n                {{ link.title }}\n            </a>\n        </ClassicPopover>\n    </div>\n</template>\n\n<script setup lang=\"ts\">\nimport PlusIcon from \"vue-material-design-icons/Plus.vue\";\nimport RssIcon from \"vue-material-design-icons/Rss.vue\";\nimport { useApiStore } from \"../../../stores/ApiStore\";\nimport ClassicPopover from \"../../misc/ClassicPopover.vue\";\nimport { Emission } from \"@/stores/class/general/emission\";\nimport { type Component, computed, onMounted } from \"vue\";\nimport { useI18n } from \"vue-i18n\";\nimport { Playlist } from \"../../../stores/class/general/playlist\";\nimport { useSharePlatforms } from \"../../composable/share/useSharePlatforms\";\nimport { useResizePhone } from \"../../composable/useResizePhone\";\n\ntype Link = {\n    name: string;\n    icon: Component;\n    title: string;\n    color?: string;\n    url: string | undefined;\n};\n\n//Props \nconst props = withDefaults(defineProps<{\n    content: Emission|Playlist;\n    windowWidth?: number;\n    justifyCenter?: boolean;\n    /** Display the icons with just the octopus primary color */\n    mono?: boolean;\n    /** If set, limit the number of icons (will not display plus button) */\n    limit?: number;\n    /** Disable the RSS icon */\n    noRss?: boolean;\n    /** Smaller icons */\n    small?: boolean;\n}>(), {\n    windowWidth: 0,\n    justifyCenter: true,\n    mono: false,\n    limit: undefined,\n    noRss: false,\n    small: false\n});\n\n//Composables\nconst { t } = useI18n();\nconst apiStore = useApiStore();\nconst { getPlatformsWithLinks, initPlatforms } = useSharePlatforms();\nconst { isPhone } = useResizePhone();\n\n//Computed\nconst maxElements = computed((): number => {\n    let number = 5;\n    if (isPhone.value) {\n        number = 3;\n    }\n\n    if (props.noRss) {\n        number += 1;\n    }\n    if (subscriptionsDisplay.value.length <= number + 1) {\n        number = subscriptionsDisplay.value.length;\n    }\n\n    if (props.limit !== undefined) {\n        return Math.min(number, props.limit);\n    } else {\n        return number;\n    }\n});\n\nconst subscriptionsDisplay = computed(() => {\n    return getPlatformsWithLinks(props.content.annotations);\n});\n\nconst shownLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(0, maxElements.value);\n});\n\nconst hiddenLinks = computed((): Array<Link> => {\n    return subscriptionsDisplay.value.slice(maxElements.value);\n});\n\nconst rssUrl = computed(() => {\n    const api = apiStore.apiUrl + \"rss/\";\n    if ((props.content as Emission).emissionId) {\n        return api + \"emission/\" + (props.content as Emission).emissionId + \".rss\";\n    }\n    if ((props.content as Playlist).playlistId) {\n        return api + \"playlist/\" + (props.content as Playlist).playlistId + \".rss\";\n    }\n    return undefined;\n});\n\nconst iconSize = computed((): number => {\n    return props.small ? 20 : 24;\n});\n\nonMounted(() => {\n    const orga = 'orga' in props.content ? props.content.orga : props.content.organisation;\n    initPlatforms(orga.id);\n});\n\nfunction fillColor(link?: Link): string|undefined {\n    if (props.mono === true) {\n        return 'white';\n    } else {\n        return link?.color;\n    }\n}\n</script>\n\n<style scoped lang=\"scss\">\n.subscribe-buttons-container {\n    align-self: center;\n    display: inline-flex;\n    width: 100%;\n\n    &.justify-center {\n        justify-content: center;\n    }\n\n    & > div {\n        display: inline-flex;\n        justify-content: flex-start;\n        overflow: hidden;\n        width: fit-content;\n    }\n\n    @media (width <= 960px) {\n        margin-top: 0.8rem;\n    }\n}\n\n.share-btn {\n  margin-right: .5rem;\n  margin-left: .5rem;\n\n  &.mono {\n    background-color: var(--octopus-primary);\n  }\n\n  &.small {\n    height: 1.8rem !important;\n    width: 1.8rem !important;\n    margin-right: .2rem;\n    margin-left: .2rem;\n  }\n}\n</style>\n"],"mappings":"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"}