combined video create button

MONEE
@monee
2 weeks ago
82 posts

How is the combined video create button called. It looks like is using the create_video.tpl on click to choose upload or import youtube video. I need to create a similar button for the bottom tab for mobile that has option for create audio or video.
I'm guessing it's using something like
a href="#" onclick="mis_modal('')"
How do I assign template to open on click?

@douglas
2 weeks ago
2,797 posts

MONEE:
How is the combined video create button called. It looks like is using the create_video.tpl on click to choose upload or import youtube video.

You won't be able to use the method that is currently in place for the Combined Video module.

MONEE:
I need to create a similar button for the bottom tab for mobile that has option for create audio or video.
I'm guessing it's using something like
a href="#" onclick="mis_modal('')"
How do I assign template to open on click?

You could try something like this:


                        <style>
                            .add-video-modal {
                                position: relative;
                            }

                            #videoDialog {
                                position: absolute;
                                background-color: #000000;
                                border: 1px solid #999;
                                border-radius: 3px;
                                padding: 6px;
                                z-index: 999999;
                                overflow: visible;
                                box-shadow: 1px 1px 1px 1px #CCC;
                            }
                            .video-item {
                                display:flex;
                                gap:1rem;
                            }

                            .video-item > * {
                                flex:1;
                                text-align: center;
                            }

                        </style>
                        <div class="add-video-modal">

                            <dialog id="videoDialog">
                                <div class="video-item">
                                    {if jrCore_module_is_active('jrAudio')}
                                        <a href="{$jamroom_url}/{jrCore_module_url module="jrAudio"}/create">
                                            <div class="video-choice">
                                                <img src="{$jamroom_url}/modules/jrAudio/icon.png" width="50" height="50" title="upload a new audio file" alt="upload a new audio file">
                                                <br>
                                                Upload Audio
                                            </div>
                                        </a>
                                    {/if}
                                    {if jrCore_module_is_active('jrVideo')}
                                        <a href="{$jamroom_url}/{jrCore_module_url module="jrVideo"}/create">
                                            <div class="video-choice">
                                                <img src="{$jamroom_url}/modules/jrVideo/icon.png" width="50" height="50" title="upload a new video file" alt="upload a new video file">
                                                <br>
                                                Upload Video
                                            </div>
                                        </a>
                                    {/if}
                                    {if jrCore_module_is_active('jrYouTube')}
                                        <a href="{$jamroom_url}/{jrCore_module_url module="jrYouTube"}/create">
                                            <div class="video-choice">
                                                <img src="{$jamroom_url}/modules/jrYouTube/icon.png" width="50" height="50" title="embed a youtube video" alt="embed a youtube video">
                                                <br>
                                                Embed YouTube
                                            </div>
                                        </a>
                                    {/if}
                                </div>
                                <br>
                                <form method="dialog"><button class="form_button" style="float:right;">X</button></form>
                            </dialog>

                            <button class="form_button" onclick="videoDialog.show()">Add Media</button>

                        </div>

--

Douglas Hackney
Jamroom Team - Designer/Developer/Support
FAQ-Docs-Help Videos

MONEE
@monee
2 weeks ago
82 posts

Thanks that works but the widow doesn't show above the button. it's below the bottom tab so you can't really see it but I got it moved
updated by @monee: 01/02/25 02:21:07PM

@emmamegan
2 weeks ago
1 posts

These steps will help to make combined video create button
1. Understand the Existing Code
If the combined video create button uses onclick="mis_modal('create_video.tpl')" to open the create_video.tpl template, it implies that the mis_modal() function is handling the modal's behavior and dynamically loading the specified template.

2. Define Your Modal Template
You need to create templates for the new functionalities (e.g., create_audio.tpl and create_video.tpl). Ensure these templates are stored in the correct location that the system can access.

3. Modify the HTML for Your Button
Add a button to the bottom tab for mobile with an onclick event calling the mis_modal() function. For example:

html
Copy code
Create Audio or Video
4. Create a Template for Combined Options
Create a new template file, create_audio_or_video.tpl, that provides options for creating audio or video. For example:

html
Copy code

Choose an Option
Create Audio
Create Video

5. Ensure mis_modal() is Configured to Load Templates
The mis_modal() function likely handles loading a template into a modal. If it's not already implemented, here's a basic example of how it might work with JavaScript:

javascript
Copy code
function mis_modal(template) {
// Fetch the content of the template (assuming server-side support for loading templates)
fetch(`/path/to/templates/${template}`)
.then(response => response.text())
.then(html => {
// Display the template content in the modal container
document.getElementById('modal-container').innerHTML = html;
// Show the modal
document.getElementById('modal-container').classList.add('visible');
})
.catch(err => console.error('Failed to load template:', err));
}
6. Add a Modal Container to Your Page
Ensure your HTML includes a container for modals:

html
Copy code

7. Style Your Modal (Optional)
Use CSS to style your modal container and make it look consistent with the rest of your UI:

css
Copy code
.modal-container {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 1000;
}
.modal-container.visible {
display: block;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #fff;
padding: 20px;
border-radius: 8px;
}
8. Test the Button
Click the new button in the bottom tab.
Ensure it loads the create_audio_or_video.tpl template.
Confirm the modal buttons allow switching to the specific templates (create_audio.tpl or create_video.tpl).

MONEE
@monee
2 weeks ago
82 posts

I got this to work using the code Douglas provided with a couple of modifications and it works perfectly but this will coming in handy for some other ideas that a had. Thanks a lot for the help
updated by @monee: 01/04/25 12:45:16PM