Skip to content

Hướng dẫn nâng cấp giao diện tương thích từ NukeViet 4.5.02 lên NukeViet 4.5.03

Jump to bottom
Tan Dung Phan edited this page Dec 11, 2022 · 1 revision

Cập nhật giao diện module news

Làm mục này để có tính năng báo nói trong giao diện

Cập nhật theme.php

Nếu giao diện của bạn có themes/ten-theme/modules/news/theme.php thì:

Tìm:

    if ($news_contents['allowed_send'] == 1) {

Thêm lên trên

    // Xuất giọng đọc
    if (!empty($news_contents['current_voice'])) {
        foreach ($news_contents['voicedata'] as $voice) {
            $xtpl->assign('VOICE', $voice);
            $xtpl->parse('main.show_player.loop');
        }

        $xtpl->parse('main.show_player');
    }

Tìm

$news_contents['addtime'] = nv_date('d/m/Y h:i:s', $news_contents['addtime']);

Thêm xuống dưới

$news_contents['css_autoplay'] = $news_contents['autoplay'] ? ' checked' : '';

Cập nhật news.css

Nếu giao diện của bạn có themes/ten-theme/css/news.css thì:

Tìm

/* Responsive news */

Thêm lên trên

/* Player */
:root {
    --plyr-color-main: #108DE5;
    --plyr-audio-controls-background: transparent;
}

.news-detail-player {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 24px;
    background-color: #f4f4f4;
}

.news-detail-player > .player {
    -ms-flex-positive: 1;
    flex-grow: 1;
    -ms-flex-negative: 1;
    flex-shrink: 1;
    padding-right: 24px;
}

.news-detail-player > .source {
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 20px;
}

.news-detail-player > .tools {
    -ms-flex-positive: 0;
    flex-grow: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    padding-right: 20px;
}

.news-switch {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}

.news-switch .news-switch-btn {
    margin-left: 5px;
    position: relative;
    width: 44px;
    height: 22px;
}

.news-switch .news-switch-btn .news-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transition: .4s;
    transition: .4s;
}

.news-switch .news-switch-btn .news-switch-slider:before {
    position: absolute;
    content: "";
    background-color: #d6dadf;
    -webkit-transition: .4s;
    transition: .4s;
    height: 14px;
    width: 36px;
    left: 4px;
    bottom: 4px;
    border-radius: 7px;
}

.news-switch .news-switch-btn .news-switch-slider:after {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 0;
    bottom: 0;
    background-color: #4a5464;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
}

.news-switch .news-switch-btn.checked .news-switch-slider:after {
    background-color: #108DE5;
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}

Tìm đoạn có dạng @media (max-width:499.98px) { thêm vào bên trong đoạn đó

    .news-detail-player {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-pack: center;
        justify-content: center;
    }

    .news-detail-player > .player {
        padding-right: 0;
        width: 100%;
        -ms-flex-order: 1;
        order: 2;
    }

    .news-detail-player > .source {
        padding-right: 10;
        -ms-flex-order: 0;
        order: 0;
        margin-top: 12px;
    }

    .news-detail-player > .tools {
        padding-right: 0;
        -ms-flex-order: 0;
        order: 1;
        margin-top: 12px;
    }

Cập nhật news.js

Nếu giao diện của bạn có themes/ten-theme/js/news.js thì:

Tìm

$(document).ready(function() {

Thêm lên trên

window.newsPls = {};
window.newsSeek = 0;

// Trình điều khiển báo nói
function newsPlayVoice(voiceid, voicepath, voicetitle, autoplay) {
    // Destroy các player đang phát
    $.each(window.newsPls, function(k, v) {
        v.destroy();
    });
    window.newsPls = {};
    window.newsPls[voiceid] = new Plyr('#newsVoicePlayer', {
        controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'airplay']
    });
    window.newsPls[voiceid].source = {
        type: 'audio',
        title: voicetitle,
        sources: [{
            src: voicepath
        }],
    };
    window.newsPls[voiceid].isFirstPlay = true;
    window.newsPls[voiceid].isPlaying = false;
    window.newsPls[voiceid].on('playing', function() {
        window.newsPls[voiceid].isPlaying = true;
        if (window.newsPls[voiceid].isFirstPlay) {
            window.newsPls[voiceid].isFirstPlay = false;
            window.newsPls[voiceid].forward(window.newsSeek);
        }
    });
    window.newsPls[voiceid].on('pause', function() {
        window.newsPls[voiceid].isPlaying = false;
    });
    window.newsPls[voiceid].on('ended', function() {
        window.newsPls[voiceid].isPlaying = false;
    });
    window.newsPls[voiceid].on('ready', function() {
        if (autoplay) {
            window.newsPls[voiceid].play();
        }
        window.newsPls[voiceid].on('timeupdate', function() {
            if (window.newsPls[voiceid].isPlaying) {
                window.newsSeek = window.newsPls[voiceid].currentTime;
            }
        });
    });
}

Thêm vào trong đoạn $(document).ready(function() {

    // Xử lý player
    var playerCtn = $('#newsVoicePlayer');
    if (playerCtn.length) {
        newsPlayVoice(playerCtn.data('voice-id'), playerCtn.data('voice-path'), playerCtn.data('voice-title'), playerCtn.data('autoplay'));
    }

    // Chọn giọng đọc: Thiết lập làm giọng đọc mặc định lần sau
    $('[data-news="voicesel"]').on('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        if ($this.data('busy')) {
            return;
        }
        $(this).data('busy', true);
        $.ajax({
            type: 'POST',
            url: nv_base_siteurl + 'index.php?' + nv_lang_variable + '=' + nv_lang_data + '&' + nv_name_variable + '=' + nv_module_name + '&nocache=' + new Date().getTime(),
            dataType: 'json',
            data: {
                setDefaultVoice: $this.data('tokend'),
                id: $this.data('id')
            }
        }).done(function() {
            $this.data('busy', false);
            $('[data-news="voiceval"]').html($this.text());
            newsPlayVoice($this.data('id'), $this.data('path'), $this.text(), true);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            $this.data('busy', false);
            console.error(jqXHR, textStatus, errorThrown);
        });
    });

    // Bật/Tắt tự phát giọng đọc
    $('[data-news="switchapl"]').on('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        if ($this.data('busy')) {
            return;
        }
        $(this).data('busy', true);
        $.ajax({
            type: 'POST',
            url: nv_base_siteurl + 'index.php?' + nv_lang_variable + '=' + nv_lang_data + '&' + nv_name_variable + '=' + nv_module_name + '&nocache=' + new Date().getTime(),
            dataType: 'json',
            data: {
                'setAutoPlayVoice': $this.data('tokend')
            }
        }).done(function(res) {
            $this.data('busy', false);
            if (res.value == 1) {
                $this.addClass('checked');
            } else {
                $this.removeClass('checked');
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            $this.data('busy', false);
            console.error(jqXHR, textStatus, errorThrown);
        });
    });    // Xử lý player
    var playerCtn = $('#newsVoicePlayer');
    if (playerCtn.length) {
        newsPlayVoice(playerCtn.data('voice-id'), playerCtn.data('voice-path'), playerCtn.data('voice-title'), playerCtn.data('autoplay'));
    }

    // Chọn giọng đọc: Thiết lập làm giọng đọc mặc định lần sau
    $('[data-news="voicesel"]').on('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        if ($this.data('busy')) {
            return;
        }
        $(this).data('busy', true);
        $.ajax({
            type: 'POST',
            url: nv_base_siteurl + 'index.php?' + nv_lang_variable + '=' + nv_lang_data + '&' + nv_name_variable + '=' + nv_module_name + '&nocache=' + new Date().getTime(),
            dataType: 'json',
            data: {
                setDefaultVoice: $this.data('tokend'),
                id: $this.data('id')
            }
        }).done(function() {
            $this.data('busy', false);
            $('[data-news="voiceval"]').html($this.text());
            newsPlayVoice($this.data('id'), $this.data('path'), $this.text(), true);
        }).fail(function(jqXHR, textStatus, errorThrown) {
            $this.data('busy', false);
            console.error(jqXHR, textStatus, errorThrown);
        });
    });

    // Bật/Tắt tự phát giọng đọc
    $('[data-news="switchapl"]').on('click', function(e) {
        e.preventDefault();
        var $this = $(this);
        if ($this.data('busy')) {
            return;
        }
        $(this).data('busy', true);
        $.ajax({
            type: 'POST',
            url: nv_base_siteurl + 'index.php?' + nv_lang_variable + '=' + nv_lang_data + '&' + nv_name_variable + '=' + nv_module_name + '&nocache=' + new Date().getTime(),
            dataType: 'json',
            data: {
                'setAutoPlayVoice': $this.data('tokend')
            }
        }).done(function(res) {
            $this.data('busy', false);
            if (res.value == 1) {
                $this.addClass('checked');
            } else {
                $this.removeClass('checked');
            }
        }).fail(function(jqXHR, textStatus, errorThrown) {
            $this.data('busy', false);
            console.error(jqXHR, textStatus, errorThrown);
        });
    });

Cập nhật detail.tpl

Nếu giao diện của bạn có themes/ten-theme/modules/news/detail.tpl thì:

Tìm

        <!-- END: no_public -->

Thêm xuống dưới

        <!-- BEGIN: show_player -->
        <link rel="stylesheet" href="{NV_BASE_SITEURL}{NV_ASSETS_DIR}/js/plyr/plyr.css" />
        <script src="{NV_BASE_SITEURL}{NV_ASSETS_DIR}/js/plyr/plyr.polyfilled.js"></script>
        <div class="news-detail-player">
            <div class="player">
                <audio id="newsVoicePlayer" data-voice-id="{DETAIL.current_voice.id}" data-voice-path="{DETAIL.current_voice.path}" data-voice-title="{DETAIL.current_voice.title}" data-autoplay="{DETAIL.autoplay}"></audio>
            </div>
            <div class="source">
                <div class="btn-group">
                    <button type="button" class="btn btn-default btn-xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <i class="fa fa-microphone" aria-hidden="true"></i> <span data-news="voiceval" class="val">{DETAIL.current_voice.title}</span> <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-right">
                        <!-- BEGIN: loop -->
                        <li><a href="#" data-news="voicesel" data-id="{VOICE.id}" data-path="{VOICE.path}" data-tokend="{NV_CHECK_SESSION}">{VOICE.title}</a></li>
                        <!-- END: loop -->
                    </ul>
                </div>
            </div>
            <div class="tools">
                <div class="news-switch">
                    <div class="news-switch-label">
                        {LANG.autoplay}:
                    </div>
                    <div data-news="switchapl" class="news-switch-btn{DETAIL.css_autoplay}" role="button" data-busy="false" data-tokend="{NV_CHECK_SESSION}">
                        <span class="news-switch-slider"></span>
                    </div>
                </div>
            </div>
        </div>
        <!-- END: show_player -->
Clone this wiki locally