{"id":2509,"date":"2026-06-25T07:09:42","date_gmt":"2026-06-25T07:09:42","guid":{"rendered":"https:\/\/mossadegh.com\/archives\/cinematographique\/"},"modified":"2026-09-22T12:29:47","modified_gmt":"2026-09-22T12:29:47","slug":"cinematographique","status":"publish","type":"page","link":"https:\/\/mossadegh.com\/fr\/archives\/cinematographique\/","title":{"rendered":"Vision and Sound"},"content":{"rendered":"<p>[et_pb_section fb_built=\u00a0\u00bb1&Prime; custom_padding_last_edited=\u00a0\u00bbon|tablet\u00a0\u00bb _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb background_color=\u00a0\u00bb#eef4f8&Prime; custom_padding=\u00a0\u00bb44px||100px||false|false\u00a0\u00bb custom_padding_tablet=\u00a0\u00bb24px||50px||false|false\u00a0\u00bb custom_padding_phone=\u00a0\u00bb24px||50px||false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_row _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb custom_padding=\u00a0\u00bb0px||0px||false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_heading title=\u00a0\u00bbVision\u00a0\u00bb module_class=\u00a0\u00bbheading-style-h1&Prime; _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb title_level=\u00a0\u00bbh2&Prime; title_text_color=\u00a0\u00bb#1C2226&Prime; custom_margin=\u00a0\u00bb||40px||false|false\u00a0\u00bb custom_margin_tablet=\u00a0\u00bb||30px||false|false\u00a0\u00bb custom_margin_phone=\u00a0\u00bb||20px||false|false\u00a0\u00bb custom_margin_last_edited=\u00a0\u00bbon|phone\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][\/et_pb_heading][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=\u00a0\u00bbon\u00a0\u00bb gutter_width=\u00a0\u00bb2&Prime; make_equal=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb custom_padding=\u00a0\u00bb0px||0px||false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_code _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]    <div class=\"video-wrapper\">\r\n        <div class=\"video-container\" id=\"videoContainer\" data-page=\"1\" data-max=\"1\" data-lang=\"fr\">\r\n            <div id=\"videoSentinel\" style=\"height: 1px; width: 100%; grid-column: 1 \/ -1; display: none;\"><\/div>\r\n        <\/div>\r\n        <div class=\"video-loader\" id=\"videoLoader\">\r\n            <svg class=\"video-loader_spinner\" viewBox=\"0 0 50 50\">\r\n                <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"><\/circle>\r\n            <\/svg>\r\n        <\/div>\r\n        <div class=\"video-empty\" id=\"videoEmpty\" style=\"display: none;\">\r\n                   <div class=\"c-empty-state\">\r\n            <div class=\"c-empty-state__image-wrapper\">\r\n                <img decoding=\"async\" class=\"c-empty-state__image\" src=\"https:\/\/mossadegh.com\/wp-content\/uploads\/2026\/07\/Empty-State-Illustrations_Light-Mode_No-Data.svg\" alt=\"Aucune donn\u00e9e disponible\" loading=\"lazy\" \/>\r\n            <\/div>\r\n            <h3 class=\"c-empty-state__heading\">Aucune donn\u00e9e<\/h3>\r\n            <p class=\"c-empty-state__paragraph\">Nous ne disposons d&#039;aucune donn\u00e9e \u00e0 vous communiquer pour le moment.<\/p>\r\n        <\/div>\r\n                <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n        const container = document.getElementById('videoContainer');\r\n        const loader = document.getElementById('videoLoader');\r\n        const emptyState = document.getElementById('videoEmpty');\r\n        const sentinel = document.getElementById('videoSentinel');\r\n        const currentLang = container.getAttribute('data-lang') || '';\r\n        let isLoading = false;\r\n        let hasItems = false;\r\n        let observer = null;\r\n\r\n        const renderItem = (item) => {\r\n            const card = document.createElement('div');\r\n            card.className = 'video-card';\r\n            card.innerHTML = `\r\n                <div class=\"video-card_media\">\r\n                    <video controls class=\"video-card_player\" preload=\"metadata\" playsinline>\r\n                        <source src=\"${item.video_url}#t=0.5\" type=\"video\/mp4\">\r\n                    <\/video>\r\n                <\/div>\r\n                <div class=\"video-card_content\">\r\n                    <h3 class=\"video-card_heading\">${item.title}<\/h3>\r\n                <\/div> \r\n            `;\r\n            return card;\r\n        };\r\n\r\n        const setupObserver = () => {\r\n            if (observer) {\r\n                observer.disconnect();\r\n            }\r\n            observer = new IntersectionObserver((entries) => {\r\n                if (entries[0].isIntersecting && !isLoading) {\r\n                    const currentPage = parseInt(container.getAttribute('data-page'), 10);\r\n                    const maxPages = parseInt(container.getAttribute('data-max'), 10);\r\n                    if (currentPage <= maxPages) {\r\n                        loadVideos();\r\n                    }\r\n                }\r\n            }, {\r\n                root: container,\r\n                rootMargin: '0px',\r\n                threshold: 0.1\r\n            });\r\n            observer.observe(sentinel);\r\n        };\r\n\r\n        const loadVideos = async () => {\r\n            const currentPage = parseInt(container.getAttribute('data-page'), 10);\r\n            const maxPages = parseInt(container.getAttribute('data-max'), 10);\r\n\r\n            if (isLoading || (currentPage > 1 && currentPage > maxPages)) return;\r\n\r\n            isLoading = true;\r\n            loader.style.display = 'flex';\r\n            emptyState.style.display = 'none';\r\n\r\n            try {\r\n                const res = await fetch(`\/wp-json\/custom\/v1\/videos?page=${currentPage}&lang=${currentLang}`);\r\n                const data = await res.json();\r\n\r\n                if (data.data && data.data.length > 0) {\r\n                    hasItems = true;\r\n                    data.data.forEach(item => {\r\n                        container.insertBefore(renderItem(item), sentinel);\r\n                    });\r\n                    \r\n                    container.setAttribute('data-max', data.total_pages);\r\n                    container.setAttribute('data-page', currentPage + 1);\r\n\r\n                    if (data.total_pages > 1) {\r\n                        container.classList.add('is-scrollable');\r\n                        sentinel.style.display = 'block';\r\n                        \r\n                        requestAnimationFrame(() => {\r\n                            setupObserver();\r\n                        });\r\n                    } else {\r\n                        container.classList.remove('is-scrollable');\r\n                        sentinel.style.display = 'none';\r\n                        if (observer) {\r\n                            observer.disconnect();\r\n                        }\r\n                    }\r\n                } else if (!hasItems) {\r\n                    emptyState.style.display = 'block';\r\n                }\r\n            } catch (err) {\r\n                console.error(err);\r\n                if (!hasItems) {\r\n                    emptyState.style.display = 'block';\r\n                }\r\n            } finally {\r\n                isLoading = false;\r\n                loader.style.display = 'none';\r\n            }\r\n        };\r\n\r\n        loadVideos();\r\n    });\r\n    <\/script>\r\n    [\/et_pb_code][\/et_pb_column][\/et_pb_row][et_pb_row _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb custom_padding=\u00a0\u00bb0px||0px||false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_heading title=\u00a0\u00bbSon\u00a0\u00bb module_class=\u00a0\u00bbheading-style-h1&Prime; _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb title_level=\u00a0\u00bbh2&Prime; title_text_color=\u00a0\u00bb#1C2226&Prime; custom_margin=\u00a0\u00bb||40px||false|false\u00a0\u00bb custom_margin_tablet=\u00a0\u00bb||30px||false|false\u00a0\u00bb custom_margin_phone=\u00a0\u00bb||20px||false|false\u00a0\u00bb custom_margin_last_edited=\u00a0\u00bbon|phone\u00a0\u00bb hover_enabled=\u00a0\u00bb0&Prime; global_colors_info=\u00a0\u00bb{}\u00a0\u00bb sticky_enabled=\u00a0\u00bb0&Prime;][\/et_pb_heading][\/et_pb_column][\/et_pb_row][et_pb_row use_custom_gutter=\u00a0\u00bbon\u00a0\u00bb gutter_width=\u00a0\u00bb2&Prime; make_equal=\u00a0\u00bbon\u00a0\u00bb _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb custom_padding=\u00a0\u00bb0px||60px||false|false\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_column type=\u00a0\u00bb4_4&Prime; _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb][et_pb_code _builder_version=\u00a0\u00bb4.27.6&Prime; _module_preset=\u00a0\u00bbdefault\u00a0\u00bb global_colors_info=\u00a0\u00bb{}\u00a0\u00bb]    <div class=\"audio-wrapper\">\r\n        <div class=\"audio-container\" id=\"audioContainer\" data-page=\"1\" data-max=\"1\" data-lang=\"fr\">\r\n            <div id=\"audioSentinel\" style=\"height: 1px; width: 100%; grid-column: 1 \/ -1; display: none;\"><\/div>\r\n        <\/div>\r\n        <div class=\"audio-loader\" id=\"audioLoader\">\r\n            <svg class=\"audio-loader_spinner\" viewBox=\"0 0 50 50\">\r\n                <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"><\/circle>\r\n            <\/svg>\r\n        <\/div>\r\n        <div class=\"audio-empty\" id=\"audioEmpty\" style=\"display: none;\">\r\n                   <div class=\"c-empty-state\">\r\n            <div class=\"c-empty-state__image-wrapper\">\r\n                <img decoding=\"async\" class=\"c-empty-state__image\" src=\"https:\/\/mossadegh.com\/wp-content\/uploads\/2026\/07\/Empty-State-Illustrations_Light-Mode_No-Data.svg\" alt=\"Aucune donn\u00e9e disponible\" loading=\"lazy\" \/>\r\n            <\/div>\r\n            <h3 class=\"c-empty-state__heading\">Aucune donn\u00e9e<\/h3>\r\n            <p class=\"c-empty-state__paragraph\">Nous ne disposons d&#039;aucune donn\u00e9e \u00e0 vous communiquer pour le moment.<\/p>\r\n        <\/div>\r\n                <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n        const container = document.getElementById('audioContainer');\r\n        const loader = document.getElementById('audioLoader');\r\n        const emptyState = document.getElementById('audioEmpty');\r\n        const sentinel = document.getElementById('audioSentinel');\r\n        const currentLang = container.getAttribute('data-lang') || '';\r\n        let isLoading = false;\r\n        let hasItems = false;\r\n        let observer = null;\r\n\r\n        const renderItem = (item) => {\r\n            const card = document.createElement('div');\r\n            card.className = 'audio-card';\r\n            card.innerHTML = `\r\n                <div class=\"audio-card_content\">\r\n                    <h3 class=\"audio-card_heading\">${item.title}<\/h3>\r\n                <\/div>  \r\n                <div class=\"audio-card_media\">\r\n                    <audio controls class=\"audio-card_player\" preload=\"metadata\" src=\"${item.audio_url}\">\r\n                        <source src=\"${item.audio_url}\" type=\"audio\/mpeg\">\r\n                    <\/audio>\r\n                <\/div> \r\n            `;\r\n            return card;\r\n        };\r\n\r\n        const setupObserver = () => {\r\n            if (observer) {\r\n                observer.disconnect();\r\n            }\r\n            observer = new IntersectionObserver((entries) => {\r\n                if (entries[0].isIntersecting && !isLoading) {\r\n                    const currentPage = parseInt(container.getAttribute('data-page'), 10);\r\n                    const maxPages = parseInt(container.getAttribute('data-max'), 10);\r\n                    if (currentPage <= maxPages) {\r\n                        loadAudios();\r\n                    }\r\n                }\r\n            }, {\r\n                root: container,\r\n                rootMargin: '0px',\r\n                threshold: 0.1\r\n            });\r\n            observer.observe(sentinel);\r\n        };\r\n\r\n        const loadAudios = async () => {\r\n            const currentPage = parseInt(container.getAttribute('data-page'), 10);\r\n            const maxPages = parseInt(container.getAttribute('data-max'), 10);\r\n\r\n            if (isLoading || (currentPage > 1 && currentPage > maxPages)) return;\r\n\r\n            isLoading = true;\r\n            loader.style.display = 'flex';\r\n            emptyState.style.display = 'none';\r\n\r\n            try {\r\n                const res = await fetch(`\/wp-json\/custom\/v1\/audios?page=${currentPage}&lang=${currentLang}`);\r\n                const data = await res.json();\r\n\r\n                if (data.data && data.data.length > 0) {\r\n                    hasItems = true;\r\n                    data.data.forEach(item => {\r\n                        container.insertBefore(renderItem(item), sentinel);\r\n                    });\r\n                    \r\n                    container.setAttribute('data-max', data.total_pages);\r\n                    container.setAttribute('data-page', currentPage + 1);\r\n\r\n                    if (data.total_pages > 1) {\r\n                        container.classList.add('is-scrollable');\r\n                        sentinel.style.display = 'block';\r\n                        \r\n                        requestAnimationFrame(() => {\r\n                            setupObserver();\r\n                        });\r\n                    } else {\r\n                        container.classList.remove('is-scrollable');\r\n                        sentinel.style.display = 'none';\r\n                        if (observer) {\r\n                            observer.disconnect();\r\n                        }\r\n                    }\r\n                } else if (!hasItems) {\r\n                    emptyState.style.display = 'block';\r\n                }\r\n            } catch (err) {\r\n                console.error(err);\r\n                if (!hasItems) {\r\n                    emptyState.style.display = 'block';\r\n                }\r\n            } finally {\r\n                isLoading = false;\r\n                loader.style.display = 'none';\r\n            }\r\n        };\r\n\r\n        loadAudios();\r\n    });\r\n    <\/script>\r\n    [\/et_pb_code][\/et_pb_column][\/et_pb_row][\/et_pb_section]<\/p>\n","protected":false},"excerpt":{"rendered":"<p>    <div class=\"video-wrapper\">\r\n        <div class=\"video-container\" id=\"videoContainer\" data-page=\"1\" data-max=\"1\" data-lang=\"fr\">\r\n            <div id=\"videoSentinel\" style=\"height: 1px; width: 100%; grid-column: 1 \/ -1; display: none;\"><\/div>\r\n        <\/div>\r\n        <div class=\"video-loader\" id=\"videoLoader\">\r\n            <svg class=\"video-loader_spinner\" viewBox=\"0 0 50 50\">\r\n                <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"><\/circle>\r\n            <\/svg>\r\n        <\/div>\r\n        <div class=\"video-empty\" id=\"videoEmpty\" style=\"display: none;\">\r\n                   <div class=\"c-empty-state\">\r\n            <div class=\"c-empty-state__image-wrapper\">\r\n                <img decoding=\"async\" class=\"c-empty-state__image\" src=\"https:\/\/mossadegh.com\/wp-content\/uploads\/2026\/07\/Empty-State-Illustrations_Light-Mode_No-Data.svg\" alt=\"Aucune donn\u00e9e disponible\" loading=\"lazy\" \/>\r\n            <\/div>\r\n            <h3 class=\"c-empty-state__heading\">Aucune donn\u00e9e<\/h3>\r\n            <p class=\"c-empty-state__paragraph\">Nous ne disposons d&#039;aucune donn\u00e9e \u00e0 vous communiquer pour le moment.<\/p>\r\n        <\/div>\r\n                <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n        const container = document.getElementById('videoContainer');\r\n        const loader = document.getElementById('videoLoader');\r\n        const emptyState = document.getElementById('videoEmpty');\r\n        const sentinel = document.getElementById('videoSentinel');\r\n        const currentLang = container.getAttribute('data-lang') || '';\r\n        let isLoading = false;\r\n        let hasItems = false;\r\n        let observer = null;\r\n\r\n        const renderItem = (item) => {\r\n            const card = document.createElement('div');\r\n            card.className = 'video-card';\r\n            card.innerHTML = `\r\n                <div class=\"video-card_media\">\r\n                    <video controls class=\"video-card_player\" preload=\"metadata\" playsinline>\r\n                        <source src=\"${item.video_url}#t=0.5\" type=\"video\/mp4\">\r\n                    <\/video>\r\n                <\/div>\r\n                <div class=\"video-card_content\">\r\n                    <h3 class=\"video-card_heading\">${item.title}<\/h3>\r\n                <\/div> \r\n            `;\r\n            return card;\r\n        };\r\n\r\n        const setupObserver = () => {\r\n            if (observer) {\r\n                observer.disconnect();\r\n            }\r\n            observer = new IntersectionObserver((entries) => {\r\n                if (entries[0].isIntersecting && !isLoading) {\r\n                    const currentPage = parseInt(container.getAttribute('data-page'), 10);\r\n                    const maxPages = parseInt(container.getAttribute('data-max'), 10);\r\n                    if (currentPage <= maxPages) {\r\n                        loadVideos();\r\n                    }\r\n                }\r\n            }, {\r\n                root: container,\r\n                rootMargin: '0px',\r\n                threshold: 0.1\r\n            });\r\n            observer.observe(sentinel);\r\n        };\r\n\r\n        const loadVideos = async () => {\r\n            const currentPage = parseInt(container.getAttribute('data-page'), 10);\r\n            const maxPages = parseInt(container.getAttribute('data-max'), 10);\r\n\r\n            if (isLoading || (currentPage > 1 && currentPage > maxPages)) return;\r\n\r\n            isLoading = true;\r\n            loader.style.display = 'flex';\r\n            emptyState.style.display = 'none';\r\n\r\n            try {\r\n                const res = await fetch(`\/wp-json\/custom\/v1\/videos?page=${currentPage}&lang=${currentLang}`);\r\n                const data = await res.json();\r\n\r\n                if (data.data && data.data.length > 0) {\r\n                    hasItems = true;\r\n                    data.data.forEach(item => {\r\n                        container.insertBefore(renderItem(item), sentinel);\r\n                    });\r\n                    \r\n                    container.setAttribute('data-max', data.total_pages);\r\n                    container.setAttribute('data-page', currentPage + 1);\r\n\r\n                    if (data.total_pages > 1) {\r\n                        container.classList.add('is-scrollable');\r\n                        sentinel.style.display = 'block';\r\n                        \r\n                        requestAnimationFrame(() => {\r\n                            setupObserver();\r\n                        });\r\n                    } else {\r\n                        container.classList.remove('is-scrollable');\r\n                        sentinel.style.display = 'none';\r\n                        if (observer) {\r\n                            observer.disconnect();\r\n                        }\r\n                    }\r\n                } else if (!hasItems) {\r\n                    emptyState.style.display = 'block';\r\n                }\r\n            } catch (err) {\r\n                console.error(err);\r\n                if (!hasItems) {\r\n                    emptyState.style.display = 'block';\r\n                }\r\n            } finally {\r\n                isLoading = false;\r\n                loader.style.display = 'none';\r\n            }\r\n        };\r\n\r\n        loadVideos();\r\n    });\r\n    <\/script>\r\n        <div class=\"audio-wrapper\">\r\n        <div class=\"audio-container\" id=\"audioContainer\" data-page=\"1\" data-max=\"1\" data-lang=\"fr\">\r\n            <div id=\"audioSentinel\" style=\"height: 1px; width: 100%; grid-column: 1 \/ -1; display: none;\"><\/div>\r\n        <\/div>\r\n        <div class=\"audio-loader\" id=\"audioLoader\">\r\n            <svg class=\"audio-loader_spinner\" viewBox=\"0 0 50 50\">\r\n                <circle cx=\"25\" cy=\"25\" r=\"20\" fill=\"none\" stroke-width=\"4\"><\/circle>\r\n            <\/svg>\r\n        <\/div>\r\n        <div class=\"audio-empty\" id=\"audioEmpty\" style=\"display: none;\">\r\n                   <div class=\"c-empty-state\">\r\n            <div class=\"c-empty-state__image-wrapper\">\r\n                <img decoding=\"async\" class=\"c-empty-state__image\" src=\"https:\/\/mossadegh.com\/wp-content\/uploads\/2026\/07\/Empty-State-Illustrations_Light-Mode_No-Data.svg\" alt=\"Aucune donn\u00e9e disponible\" loading=\"lazy\" \/>\r\n            <\/div>\r\n            <h3 class=\"c-empty-state__heading\">Aucune donn\u00e9e<\/h3>\r\n            <p class=\"c-empty-state__paragraph\">Nous ne disposons d&#039;aucune donn\u00e9e \u00e0 vous communiquer pour le moment.<\/p>\r\n        <\/div>\r\n                <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n    document.addEventListener('DOMContentLoaded', () => {\r\n        const container = document.getElementById('audioContainer');\r\n        const loader = document.getElementById('audioLoader');\r\n        const emptyState = document.getElementById('audioEmpty');\r\n        const sentinel = document.getElementById('audioSentinel');\r\n        const currentLang = container.getAttribute('data-lang') || '';\r\n        let isLoading = false;\r\n        let hasItems = false;\r\n        let observer = null;\r\n\r\n        const renderItem = (item) => {\r\n            const card = document.createElement('div');\r\n            card.className = 'audio-card';\r\n            card.innerHTML = `\r\n                <div class=\"audio-card_content\">\r\n                    <h3 class=\"audio-card_heading\">${item.title}<\/h3>\r\n                <\/div>  \r\n                <div class=\"audio-card_media\">\r\n                    <audio controls class=\"audio-card_player\" preload=\"metadata\" src=\"${item.audio_url}\">\r\n                        <source src=\"${item.audio_url}\" type=\"audio\/mpeg\">\r\n                    <\/audio>\r\n                <\/div> \r\n            `;\r\n            return card;\r\n        };\r\n\r\n        const setupObserver = () => {\r\n            if (observer) {\r\n                observer.disconnect();\r\n            }\r\n            observer = new IntersectionObserver((entries) => {\r\n                if (entries[0].isIntersecting && !isLoading) {\r\n                    const currentPage = parseInt(container.getAttribute('data-page'), 10);\r\n                    const maxPages = parseInt(container.getAttribute('data-max'), 10);\r\n                    if (currentPage <= maxPages) {\r\n                        loadAudios();\r\n                    }\r\n                }\r\n            }, {\r\n                root: container,\r\n                rootMargin: '0px',\r\n                threshold: 0.1\r\n            });\r\n            observer.observe(sentinel);\r\n        };\r\n\r\n        const loadAudios = async () => {\r\n            const currentPage = parseInt(container.getAttribute('data-page'), 10);\r\n            const maxPages = parseInt(container.getAttribute('data-max'), 10);\r\n\r\n            if (isLoading || (currentPage > 1 && currentPage > maxPages)) return;\r\n\r\n            isLoading = true;\r\n            loader.style.display = 'flex';\r\n            emptyState.style.display = 'none';\r\n\r\n            try {\r\n                const res = await fetch(`\/wp-json\/custom\/v1\/audios?page=${currentPage}&lang=${currentLang}`);\r\n                const data = await res.json();\r\n\r\n                if (data.data && data.data.length > 0) {\r\n                    hasItems = true;\r\n                    data.data.forEach(item => {\r\n                        container.insertBefore(renderItem(item), sentinel);\r\n                    });\r\n                    \r\n                    container.setAttribute('data-max', data.total_pages);\r\n                    container.setAttribute('data-page', currentPage + 1);\r\n\r\n                    if (data.total_pages > 1) {\r\n                        container.classList.add('is-scrollable');\r\n                        sentinel.style.display = 'block';\r\n                        \r\n                        requestAnimationFrame(() => {\r\n                            setupObserver();\r\n                        });\r\n                    } else {\r\n                        container.classList.remove('is-scrollable');\r\n                        sentinel.style.display = 'none';\r\n                        if (observer) {\r\n                            observer.disconnect();\r\n                        }\r\n                    }\r\n                } else if (!hasItems) {\r\n                    emptyState.style.display = 'block';\r\n                }\r\n            } catch (err) {\r\n                console.error(err);\r\n                if (!hasItems) {\r\n                    emptyState.style.display = 'block';\r\n                }\r\n            } finally {\r\n                isLoading = false;\r\n                loader.style.display = 'none';\r\n            }\r\n        };\r\n\r\n        loadAudios();\r\n    });\r\n    <\/script>\r\n    <\/p>\n","protected":false},"author":5,"featured_media":0,"parent":2470,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_et_pb_use_builder":"on","_et_pb_old_content":"","_et_gb_content_width":"","inline_featured_image":false,"footnotes":""},"class_list":["post-2509","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/mossadegh.com\/fr\/wp-json\/wp\/v2\/pages\/2509","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mossadegh.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mossadegh.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mossadegh.com\/fr\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/mossadegh.com\/fr\/wp-json\/wp\/v2\/comments?post=2509"}],"version-history":[{"count":10,"href":"https:\/\/mossadegh.com\/fr\/wp-json\/wp\/v2\/pages\/2509\/revisions"}],"predecessor-version":[{"id":4200,"href":"https:\/\/mossadegh.com\/fr\/wp-json\/wp\/v2\/pages\/2509\/revisions\/4200"}],"up":[{"embeddable":true,"href":"https:\/\/mossadegh.com\/fr\/wp-json\/wp\/v2\/pages\/2470"}],"wp:attachment":[{"href":"https:\/\/mossadegh.com\/fr\/wp-json\/wp\/v2\/media?parent=2509"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}